| name | getting-started |
| description | Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation. |
Getting Started with Design System Skills
Overview
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.
Quick Start
Building a new design system? Start here:
- Token foundation: Use
design-tokens-structure to plan your architecture
- Colors: Use
color-scale to generate your palette
- Spacing/Typography: Use
spacing-scale and type-scale
- Components: Use your framework skill (
react, 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 |
Available Skills
Tokens (10 skills)
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() |
Patterns (6 skills)
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 |
Frameworks (4 skills)
Framework-specific component patterns:
| Skill | Purpose |
|---|
react | React + TypeScript components |
vue | Vue 3 + Composition API |
svelte | Svelte 5 + runes |
angular | Angular + signals |
Tools (4 skills)
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 |
Accessibility (3 skills)
WCAG compliance and a11y patterns:
| Skill | Purpose |
|---|
color-contrast | WCAG contrast validation |
focus-states | Keyboard focus indicators |
aria-patterns | ARIA for interactive components |
Documentation (2 skills)
Generate documentation:
| Skill | Purpose |
|---|
token-docs | Design token documentation |
component-docs | Component API documentation |
Recommended Paths
Path A: New Design System
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
Path B: Add Design Tokens to Existing Project
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
Path C: Improve Accessibility
1. color-contrast → Audit and fix contrast
2. focus-states → Add visible focus indicators
3. aria-patterns → Fix interactive components
Path D: Cross-Platform Design System
1. design-tokens-structure → Plan architecture
2. style-dictionary → Multi-platform output
3. figma → Sync with design tool
How Skills Work
Each skill provides:
- When to use: Scenarios that trigger the skill
- Quick reference: Tables and cheat sheets
- The process: Step-by-step workflow
- Implementation checklist: Trackable progress (for complex skills)
- Code examples: CSS, Tailwind, JSON, framework-specific
Skills output in multiple formats:
- CSS custom properties:
--color-primary: #3b82f6
- Tailwind config:
theme.extend.colors.primary
- JSON tokens: Design token format for tools
Tips for Best Results
- Be specific: "Generate a blue color scale" → uses
color-scale
- Mention format: "in Tailwind format" → gets Tailwind config output
- Chain skills: "Create spacing tokens then document them" → uses
spacing-scale + token-docs
- Reference existing: "Match my existing token structure" → adapts to your patterns
Getting Help
- Find a skill: Describe what you're trying to do
- Learn a concept: Ask about tokens, theming, accessibility
- Debug issues: "Why isn't my dark mode working?"
- Best practices: "What's the best way to structure tokens?"
This plugin is maintained by buoy.design.
