What problem does it solves?
Maintaining UI consistency, promoting component reuse, and managing design tokens across multiple projects can be challenging without a well-structured design system. This Skill automates the application and management of design system principles.
Core Features & Use Cases
- Identify Opportunities: Automatically detects when code could benefit from design system patterns (e.g., repeated styles, similar components, magic numbers).
- Design Token Architecture: Guidance on structuring design tokens into primitive, semantic, and component-specific layers.
- Component Structure: Recommendations for organizing UI components using Atomic Design principles (atoms, molecules, organisms, templates).
- Component File Structure: Standardized file organization for individual components, including implementation, styles, types, tests, and Storybook documentation.
- Warning Triggers: Automatically warns about hard-coded values, duplicate styles, missing documentation, and inconsistent naming.
- Use Case: Creating a new UI component for a design system, extracting hard-coded styles into design tokens, auditing an existing component library for consistency, or documenting component usage in Storybook.
Quick Start
Use the design-system skill to generate a file structure for a new 'Button' atomic component, including Button.tsx, Button.styles.ts, and Button.stories.tsx.
