skills-ws/skills/design-system/SKILL.md

87 agent skills for AI coding assistants — marketing, growth, web3, dev, design & operations. Built for OpenClaw, Claude Code, Cursor, and Codex.

---
name: design-system
description: "Build and audit React/Tailwind design systems: design tokens, CVA component libraries, Storybook 10 docs/tests, WCAG 2.2 accessibility, theming, Figma-to-code token pipelines, npm publishing. Use when building or reviewing a component library, token pipeline, Storybook setup, theming, or Figma handoff on React 18/19 + Tailwind v4."
---
# Design System Implementation

## Reference guide

Read only the references needed for the current request:

- **1. Design Tokens**: [references/1-design-tokens.md](references/1-design-tokens.md)
- **2. Component Architecture (Atomic Design)**: [references/2-component-architecture-atomic-design.md](references/2-component-architecture-atomic-design.md)
- **3. Component Variants with CVA**: [references/3-component-variants-with-cva.md](references/3-component-variants-with-cva.md)
- **4. Storybook Setup (Storybook 10)**: [references/4-storybook-setup-storybook-10.md](references/4-storybook-setup-storybook-10.md)
- **5. Accessibility**: [references/5-accessibility.md](references/5-accessibility.md)
- **6. Theming (Dark Mode)**: [references/6-theming-dark-mode.md](references/6-theming-dark-mode.md)
- **7. Figma-to-Code Workflow**: [references/7-figma-to-code-workflow.md](references/7-figma-to-code-workflow.md)
- **8. Testing Components**: [references/8-testing-components.md](references/8-testing-components.md)
- **9. Publishing Components**: [references/9-publishing-components.md](references/9-publishing-components.md)
- **10. Popular Systems to Reference**: [references/10-popular-systems-to-reference.md](references/10-popular-systems-to-reference.md)