frontend-design-system
Installation
Summary
Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation.
- 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, CSS summaries, and multi-agent validation workflows for design review
SKILL.md
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.
When to use this skill
- 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