design-system-creation_skill

Overview

This skill creates end-to-end design systems with tokens, components, patterns, and documentation to ensure consistent UI across teams. It produces foundation assets (colors, typography, spacing, elevation), ready-to-use component code and docs, and governance guidance for maintainable libraries. The output targets production workflows, theming, accessibility, and cross-platform consistency.

How this skill works

It generates design tokens (CSS variables or semantic tokens), scalable type and spacing scales, color palettes including dark-mode variants, and elevation/shadow tokens. It scaffolds component anatomy, variants, states, accessibility requirements, and example implementations (React/Tailwind/CSS variables). It also produces documentation and governance artifacts like contribution flow, versioning, and deprecation policy.

When to use it

• Establishing brand-consistent UI standards across products
• Building or migrating a component library (React, Tailwind, Storybook)
• Onboarding new design or engineering teams to consistent patterns
• Adding theming or dark-mode support to an existing UI
• Enforcing accessibility and WCAG compliance across components

Best practices

• Start with a small, well-documented foundation of design tokens before building components
• Define semantic tokens (purpose-driven names) over raw color names for future flexibility
• Document anatomy, variants, states, keyboard behavior, and ARIA for every component
• Include do/don't usage examples and visual tests (Storybook) for each pattern
• Plan governance: RFCs for new components, semantic versioning, and deprecation notices
• Design for dark mode and responsive breakpoints from the start

Example use cases

• Generate a CSS-variable token set with light and dark palettes plus a type scale for a new brand
• Create documented React component implementations (Button, Input, Card) with accessibility notes and Storybook stories
• Produce a spacing and grid system with responsive breakpoints and Tailwind mapping
• Prepare a contribution and release process: RFC template, review committee, and changelog strategy
• Audit an existing UI to extract tokens, replace hard-coded styles, and unify components