design-system_skill

Overview

This skill produces production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development. It outputs token files, page specs, component structures, motion guidelines, and a handoff package ready for engineering. The goal is fast, repeatable design-to-code handoffs with accessibility baked in.

How this skill works

Define a single source of truth: color, typography, spacing, radii, shadows, and breakpoints as tokens. Use a page specification to map hierarchy, responsive behavior, and primary/secondary actions. Generate section-level component structures, motion rules, and an accessibility checklist, then produce a handoff package with component props, variants, and asset links.

When to use it

• Creating production-quality UI for a new product or feature
• Standardizing visual language across screens and teams
• Preparing design handoff artifacts for engineering
• Auditing accessibility and responsive behavior early in design
• Scaling component libraries with consistent tokens and variants

Best practices

• Start with content hierarchy; design follows content priority
• Use an 8px spacing scale and reference tokens for all values
• Limit motion to meaningful transitions with defined durations and easings
• Test layouts mobile-first across defined breakpoints
• Validate contrast, keyboard navigation, and semantic HTML during design

Example use cases

• SaaS landing page: hero, features, pricing, CTA with motion and type scale
• Admin dashboard: 12-column grid, data cards, filters, and responsive tables
• Mobile-first multi-step form: progress indicator, validation states, touch-friendly targets
• Component library creation: tokens, button/input variants, and documentation
• Accessibility audit: contrast checks, focus order, ARIA recommendations