frontend_design_system_skill

Overview

This skill converts UI style requirements into production-grade frontend code, delivering a scalable design system that balances creativity with engineering rigor. It centralizes visual decisions into design tokens, enforces accessibility compliance, and ships ready-to-use components. The default implementation uses React, Tailwind CSS, and shadcn/ui as a pragmatic, developer-friendly stack.

How this skill works

I inspect your visual specifications, map colors, spacing, typography, and interaction patterns into a token system, then generate reusable React components styled with Tailwind utility classes. Components are organized, documented, and wired for theming and accessibility by default. The output includes token definitions, component code, examples, and basic tests to accelerate production adoption.

When to use it

• Creating a new product UI with consistent design language
• Consolidating scattered styles into a single token-driven system
• Migrating legacy CSS to a component-based architecture
• Ensuring accessibility compliance across a component library
• Rapidly prototyping creative UI concepts with production-ready code

Best practices

• Start with a minimal set of tokens (color, spacing, type) and iterate
• Keep components focused and composable to avoid duplication
• Embed accessibility attributes and keyboard behavior in primitives
• Version tokens and components to manage design evolution
• Document usage examples and visual regression tests for each component

Example use cases

• Ship a themeable component library for a multi-brand platform
• Replace ad-hoc CSS with token-driven Tailwind components
• Audit and remediate accessibility issues across UI primitives
• Deliver high-fidelity prototypes that convert to production code
• Implement dark mode and responsive token scales across products