Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
This plugin provides 28 skills for building design systems: token generators, component patterns, accessibility guidance, framework integrations, and tool workflows. Each skill is a focused guide Claude uses to help you implement specific parts of a design system.
Building a new design system? Start here:
design-tokens-structure to plan your architecturecolor-scale to generate your palettespacing-scale and type-scalereact, vue, svelte, angular)Adding to an existing project? Jump to the skill you need:
| Task | Skill |
|------|-------|
| Add dark mode | dark-mode |
| Fix contrast issues | color-contrast |
| Improve animations | animation-principles + motion-scale |
| Set up Storybook | storybook |
| Multi-platform tokens | style-dictionary |
Generate design tokens in CSS, Tailwind, or JSON:
| Skill | Purpose |
|-------|---------|
| color-scale | OKLCH color palettes from brand colors |
| spacing-scale | Margin/padding/gap token scales |
| type-scale | Typography with modular ratios |
| shadow-scale | Elevation and depth tokens |
| radius-scale | Border radius tokens |
| breakpoints | Responsive breakpoint tokens |
| motion-scale | Animation duration and easing |
| z-index-scale | Layering/stacking tokens |
| design-tokens-structure | Token architecture (primitive → semantic → component) |
| responsive-typography | Fluid type with clamp() |
Implementation patterns for common challenges:
| Skill | Purpose |
|-------|---------|
| dark-mode | Theme switching with semantic tokens |
| compound-components | Radix/Headless UI patterns |
| icon-system | SVG sprites and icon components |
| layout-primitives | Stack, Cluster, Grid, Sidebar |
| animation-principles | Disney's 12 principles for UI |
Framework-specific component patterns:
| Skill | Purpose |
|-------|---------|
| react | React + TypeScript components |
| vue | Vue 3 + Composition API |
| svelte | Svelte 5 + runes |
| angular | Angular + signals |
Design tool and build integrations:
| Skill | Purpose |
|-------|---------|
| figma | Figma Variables and Tokens Studio |
| storybook | Component documentation |
| framer | Framer token integration |
| style-dictionary | Multi-platform token transformation |
WCAG compliance and a11y patterns:
| Skill | Purpose |
|-------|---------|
| color-contrast | WCAG contrast validation |
| focus-states | Keyboard focus indicators |
| aria-patterns | ARIA for interactive components |
Generate documentation:
| Skill | Purpose |
|-------|---------|
| token-docs | Design token documentation |
| component-docs | Component API documentation |
1. design-tokens-structure → Plan your token architecture
2. color-scale → Generate color palette
3. spacing-scale → Generate spacing tokens
4. type-scale → Generate typography tokens
5. shadow-scale → Generate elevation tokens
6. dark-mode → Add theme support
7. [framework skill] → Build components
8. storybook → Document components
1. design-tokens-structure → Understand token layers
2. color-scale → Convert existing colors to tokens
3. spacing-scale → Standardize spacing
4. style-dictionary → Set up build process
1. color-contrast → Audit and fix contrast
2. focus-states → Add visible focus indicators
3. aria-patterns → Fix interactive components
1. design-tokens-structure → Plan architecture
2. style-dictionary → Multi-platform output
3. figma → Sync with design tool
Each skill provides:
Skills output in multiple formats:
--color-primary: #3b82f6theme.extend.colors.primarycolor-scalespacing-scale + token-docsThis plugin is maintained by buoy.design.
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer