design-system-starter_skill

Overview

This skill helps teams create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. It produces token JSON, component patterns, theming strategies (including dark mode), and a practical workflow to ensure consistent, scalable, and accessible UI across products. Use it to jumpstart a design system or to audit and mature an existing one.

How this skill works

Provide a short description of your product or UI goals and the skill returns a starter kit: design token files (colors, typography, spacing, radii, shadows), an atomic component hierarchy with component templates, accessibility checks aligned to WCAG 2.1 AA, and documentation templates. It also suggests theming approaches (CSS variables, ThemeProvider, or Tailwind), component API patterns, and a phased workflow for adoption and maintenance.

When to use it

• Starting a new product and needing a consistent visual language
• Standardizing UI across multiple teams or applications
• Adding dark mode and theming support across components
• Auditing accessibility and bringing components up to WCAG 2.1 AA
• Documenting components for handoff and developer onboarding

Best practices

• Define tokens first — colors, typography, spacing, radii, shadows — to enable global changes
• Follow atomic design: build atoms, then compose molecules and organisms
• Make accessibility default: contrast checks, keyboard navigation, ARIA where needed
• Prefer composition over large prop surfaces and provide sensible defaults
• Document as you build: usage, props, accessibility notes, and examples

Example use cases

• Generate a token set and ThemeProvider for a React app with dark mode support
• Create a Button component template with variants, sizes, and loading states
• Audit current UI for color contrast issues and propose accessible replacements
• Produce a component documentation page with prop tables, examples, and a11y notes
• Plan a migration strategy with codemod suggestions and a deprecation timeline