cyberneticlibrary
← library

Build component design systems

ui-design-systemskillsetup L2★17,464
alirezarezvani/claude-skills ↗
What it does

Define, document, and enforce design system tokens, components, and interaction patterns

Best for

Multi-product design teams that need single-source-of-truth for components, tokens, and interaction specs.

Inputs
  • · Component definitions (spec or code)
  • · Token mappings (colors, typography, spacing)
  • · Usage examples
Outputs
  • · Design system documentation
  • · Component library (Storybook/chromatic)
  • · Linted design code
Requires
  • · Figma/Pen
  • · Storybook
  • · design-lint
  • · CSS-in-JS or CSS modules
Preconditions

Design tools linked to code repository; component hierarchy agreed; tokens file (tokens.json or vars.css) created

Failure modes
  • · Design and code tokens diverge → visual inconsistency
  • · Component prop API undocumented → wrong usage in projects
  • · Storybook outdated → docs don't match shipped components
Trust signals
  • · Token versioning: design changes → code tokens auto-synced
  • · Storybook auto-generated from component JSDoc and Figma specs
  • · Lint rule prevents off-token color/spacing usage in component code