frontend-design-system

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 - Production-quality UI needed : Generate high-quality UI from prompts - Consistent design language : Maintain a unified visual language across screens - Typography/layout/motion guidance : Systematic design system - Section layout with visual direction - Typography scale (H1: 48px → Body: 16px) - Color palette with gradient definitions - Motion/interaction specifications - Component list with props - Grid layout (12-column) - Component breakdown (cards, tables, filters) - Visual hierarchy documentation - Responsive behavior specification - Step-by-step flow diagram - Form field specifications - Error/success state designs - Touch-friendly sizing (min 44px targets) - Start with content hierarchy : UI follows content...