skills.rest
Zpankz
ZpankzCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Guide frontend teams in aligning UI/UX decisions with design intent for interactive components.

7|3|Updated Jan 15, 2026
Search Tags:#typography#design#ui#frontend#color#ux#aesthetics
One-click install
npx skills add https://github.com/Zpankz/mcp-skillset --skill frontend-ui-ux-zpankz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/Zpankz/mcp-skillset/tree/main/frontend-ui-ux
Command: npx skills add https://github.com/Zpankz/mcp-skillset --skill frontend-ui-ux-zpankz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often struggle to translate aesthetic concepts into implementable frontend interfaces; this Skill provides a practical framework to align design intent with development.

Core Features & Use Cases

  • Clear design direction and practical guidelines for typography, color, spacing, and motion.
  • Reusable principles for building cohesive UI components and design systems.
  • Real-world scenarios like dashboards, marketing pages, and product editors.

Quick Start

Provide a bold, designer-guided UI direction for a given component to ensure cohesive typography, color, spacing, and interaction patterns.

Frequently Asked Questions about frontend-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align UI design intent with frontend code implementation?▼

Bridging UI design intent and frontend code requires explicit principles for spacing, color, typography, and motion. This framework provides concrete guidelines to ensure cohesive interaction patterns and consistent implementation across interactive components.

What is the best way to build a cohesive UI component library?▼

Building a cohesive UI component library requires applying reusable design principles for typography and color. Using a designer-guided direction ensures consistent spacing, accessibility, and interaction patterns across all elements.

How do I ensure accessibility when applying UI typography and color choices?▼

Ensuring accessibility with UI typography and color involves following explicit design principles that satisfy accessibility requirements. This framework provides concrete guidelines to align aesthetic choices with usability standards.

Can I use these UX guidelines for product pages and dashboards?▼

Yes, you can use these UX guidelines for product pages and dashboards. The framework provides real-world scenarios and practical rules for spacing and motion specifically tailored for these interactive frontend interfaces.

Why does my frontend interface look inconsistent despite using a design system?▼

Frontend interfaces look inconsistent when development lacks explicit guidelines for motion and spacing. Aligning UI decisions with design intent through concrete principles resolves these visual and interactive discrepancies.

Related Skills

Explore More Design & Creative Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
guillermoscriptguillermoscript
21

normalize

Analyze and refactor UI components, styles, and layout to align with a specified design system.

Community
Advanced
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced
michelvemichelve
1

figma

Convert Figma designs into React and Tailwind CSS components.

Community
Intermediate