design-system

Production-grade UI design system with design tokens, layout rules, motion guidelines, and accessibility validation. This is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks. Section-by-section component structure : Motion/Interaction notes : Prompt : Expected output : Prompt : Expected output : Prompt : Expected output : Cause : No visual direction or tokens Solution : Provide style references and palette Cause : No responsive grid rules Solution : Define breakpoints and stacking behavior Cause : Tokens not in use Solution : Reference all values from tokens #frontend #design #ui #ux #typography #animation #design-tokens #accessibility - Provides structured design tokens for colors, typography, spacing, shadows, and breakpoints with 8px-based spacing scale - Includes section-by-section component architecture with responsive breakpoints (mobile-first, 640/768/1024/1280px) - Covers motion specifications with CSS variables for duration and easing, plus hover and transition patterns - Built-in WCAG 2.1 AA accessibility checklist covering contrast ratios, keyboard navigation, screen reader support, and text readability - Supports multi-agent workflows with validation rounds for visual direction, accessibility analysis, and handoff verification -...