frontend-design-system

Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation. A skill for production-grade UI design. Supports consistent, scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks. Component structure by section : Motion/interaction notes : Prompt : Expected output : Prompt : Expected output : Prompt : Expected output : Cause : No visual direction or tokens defined Solution : Provide style references and a color palette Cause : No responsive grid rules defined Solution : Define breakpoints and stacking behavior Cause : Tokens not being used Solution : Reference all values from tokens #frontend #design #ui #ux #typography #animation #design-tokens #accessibility - Provides structured design token system covering colors, typography, spacing, shadows, and breakpoints for consistent scaling across projects - Includes layout specification templates for different page types (landing, dashboard, form, blog, e-commerce) with responsive breakpoint rules - Offers motion guidelines with easing curves, transition durations, and interaction patterns for hover states and page transitions - Built-in accessibility checklist covering WCAG 2.1 AA compliance, keyboard navigation, screen reader support, and readability standards - Generates component handoff packages with prop specifications,...