Guides building a production-ready design system with tokens, components, theming, and accessibility.
- What it does
- This skill provides guidance for constructing and maintaining a design system. It covers core elements such as design tokens for color, typography, spacing and shadows, reusable UI components, layout patterns, and SVG icon libraries. It also lists supporting tools like Figma, Storybook, Chromatic and JSON design tokens, plus a checklist covering token definition, component implementation, accessibility testing, documentation and team adoption.
- When to use it
- Use it when initializing a design system, extending a component library, keeping design and implementation in sync, enforcing accessibility standards, or implementing theming.
- Requirements
- No scripts are included; it is instructions only. It references Figma, Storybook, Chromatic and JSON-based design tokens as tools, but no credentials, packages or runtime are specified.