Getting started

Skill dylantarre/design-system-skills/skills/getting-started

Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.From its SKILL.md

Install

npx -y skills add dylantarre/design-system-skills --skill getting-started

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

5.6 KB, as published. Nobody here has run it

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.