getting-started

---
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.
license: MIT
---

# 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:

1. **Token foundation**: Use `design-tokens-structure` to plan your architecture
2. **Colors**: Use `color-scale` to generate your palette
3. **Spacing/Typography**: Use `spacing-scale` and `type-scale`
4. **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:

1. **When to use**: Scenarios that trigger the skill
2. **Quick reference**: Tables and cheat sheets
3. **The process**: Step-by-step workflow
4. **Implementation checklist**: Trackable progress (for complex skills)
5. **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

1. **Be specific**: "Generate a blue color scale" → uses `color-scale`
2. **Mention format**: "in Tailwind format" → gets Tailwind config output
3. **Chain skills**: "Create spacing tokens then document them" → uses `spacing-scale` + `token-docs`
4. **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](https://buoy.design).