SKILL.md
Design Systems Best Practices
Guidelines for creating and maintaining design systems that ensure visual consistency, accessibility compliance, and scalable component architecture across digital products.
Workflow: Setting Up a Design System
- Audit existing UI — Inventory current components, colors, typography, and spacing across the product to identify inconsistencies and reusable patterns.
- Define design tokens — Establish primitive tokens (colors, spacing, typography, shadows) as CSS custom properties or a token format (e.g., Style Dictionary) that serves as the single source of truth.
- Build foundational components — Create atomic components (Button, Input, Text, Icon) that consume design tokens and expose a clear props API with TypeScript types.
- Compose patterns and layouts — Assemble atomic components into higher-order patterns (forms, cards, navigation) with documented usage guidelines.
- Set up documentation and Storybook — Configure Storybook with stories for every component variant, state, and accessibility annotation. Publish as a living style guide.
- Integrate testing and governance — Add visual regression tests (e.g., Chromatic), accessibility linting (e.g., axe-core), and a contribution/review process for new components.
- Ship and iterate — Publish the library as a versioned package, gather consumer feedback, and run regular accessibility and performance audits.