getting-started
starsforks
How to install getting-started?
dylantarre/design-system-skills/getting-started
$npx -y skills add dylantarre/design-system-skills --skill getting-startedIntroduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
SKILL.md
| 1 | # Getting Started with Design System Skills |
| 2 | |
| 3 | ## Overview |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## Quick Start |
| 8 | |
| 9 | **Building a new design system?** Start here: |
| 10 | |
| 11 | 1. **Token foundation**: Use `design-tokens-structure` to plan your architecture |
| 12 | 2. **Colors**: Use `color-scale` to generate your palette |
| 13 | 3. **Spacing/Typography**: Use `spacing-scale` and `type-scale` |
| 14 | 4. **Components**: Use your framework skill (`react`, `vue`, `svelte`, `angular`) |
| 15 | |
| 16 | **Adding to an existing project?** Jump to the skill you need: |
| 17 | |
| 18 | | Task | Skill | |
| 19 | |------|-------| |
| 20 | | Add dark mode | `dark-mode` | |
| 21 | | Fix contrast issues | `color-contrast` | |
| 22 | | Improve animations | `animation-principles` + `motion-scale` | |
| 23 | | Set up Storybook | `storybook` | |
| 24 | | Multi-platform tokens | `style-dictionary` | |
| 25 | |
| 26 | ## Available Skills |
| 27 | |
| 28 | ### Tokens (10 skills) |
| 29 | Generate design tokens in CSS, Tailwind, or JSON: |
| 30 | |
| 31 | | Skill | Purpose | |
| 32 | |-------|---------| |
| 33 | | `color-scale` | OKLCH color palettes from brand colors | |
| 34 | | `spacing-scale` | Margin/padding/gap token scales | |
| 35 | | `type-scale` | Typography with modular ratios | |
| 36 | | `shadow-scale` | Elevation and depth tokens | |
| 37 | | `radius-scale` | Border radius tokens | |
| 38 | | `breakpoints` | Responsive breakpoint tokens | |
| 39 | | `motion-scale` | Animation duration and easing | |
| 40 | | `z-index-scale` | Layering/stacking tokens | |
| 41 | | `design-tokens-structure` | Token architecture (primitive → semantic → component) | |
| 42 | | `responsive-typography` | Fluid type with clamp() | |
| 43 | |
| 44 | ### Patterns (6 skills) |
| 45 | Implementation patterns for common challenges: |
| 46 | |
| 47 | | Skill | Purpose | |
| 48 | |-------|---------| |
| 49 | | `dark-mode` | Theme switching with semantic tokens | |
| 50 | | `compound-components` | Radix/Headless UI patterns | |
| 51 | | `icon-system` | SVG sprites and icon components | |
| 52 | | `layout-primitives` | Stack, Cluster, Grid, Sidebar | |
| 53 | | `animation-principles` | Disney's 12 principles for UI | |
| 54 | |
| 55 | ### Frameworks (4 skills) |
| 56 | Framework-specific component patterns: |
| 57 | |
| 58 | | Skill | Purpose | |
| 59 | |-------|---------| |
| 60 | | `react` | React + TypeScript components | |
| 61 | | `vue` | Vue 3 + Composition API | |
| 62 | | `svelte` | Svelte 5 + runes | |
| 63 | | `angular` | Angular + signals | |
| 64 | |
| 65 | ### Tools (4 skills) |
| 66 | Design tool and build integrations: |
| 67 | |
| 68 | | Skill | Purpose | |
| 69 | |-------|---------| |
| 70 | | `figma` | Figma Variables and Tokens Studio | |
| 71 | | `storybook` | Component documentation | |
| 72 | | `framer` | Framer token integration | |
| 73 | | `style-dictionary` | Multi-platform token transformation | |
| 74 | |
| 75 | ### Accessibility (3 skills) |
| 76 | WCAG compliance and a11y patterns: |
| 77 | |
| 78 | | Skill | Purpose | |
| 79 | |-------|---------| |
| 80 | | `color-contrast` | WCAG contrast validation | |
| 81 | | `focus-states` | Keyboard focus indicators | |
| 82 | | `aria-patterns` | ARIA for interactive components | |
| 83 | |
| 84 | ### Documentation (2 skills) |
| 85 | Generate documentation: |
| 86 | |
| 87 | | Skill | Purpose | |
| 88 | |-------|---------| |
| 89 | | `token-docs` | Design token documentation | |
| 90 | | `component-docs` | Component API documentation | |
| 91 | |
| 92 | --- |
| 93 | |
| 94 | ## Recommended Paths |
| 95 | |
| 96 | ### Path A: New Design System |
| 97 | |
| 98 | ``` |
| 99 | 1. design-tokens-structure → Plan your token architecture |
| 100 | 2. color-scale → Generate color palette |
| 101 | 3. spacing-scale → Generate spacing tokens |
| 102 | 4. type-scale → Generate typography tokens |
| 103 | 5. shadow-scale → Generate elevation tokens |
| 104 | 6. dark-mode → Add theme support |
| 105 | 7. [framework skill] → Build components |
| 106 | 8. storybook → Document components |
| 107 | ``` |
| 108 | |
| 109 | ### Path B: Add Design Tokens to Existing Project |
| 110 | |
| 111 | ``` |
| 112 | 1. design-tokens-structure → Understand token layers |
| 113 | 2. color-scale → Convert existing colors to tokens |
| 114 | 3. spacing-scale → Standardize spacing |
| 115 | 4. style-dictionary → Set up build process |
| 116 | ``` |
| 117 | |
| 118 | ### Path C: Improve Accessibility |
| 119 | |
| 120 | ``` |
| 121 | 1. color-contrast → Audit and fix contrast |
| 122 | 2. focus-states → Add visible focus indicators |
| 123 | 3. aria-patterns → Fix interactive components |
| 124 | ``` |
| 125 | |
| 126 | ### Path D: Cross-Platform Design System |
| 127 | |
| 128 | ``` |
| 129 | 1. design-tokens-structure → Plan architecture |
| 130 | 2. style-dictionary → Multi-platform output |
| 131 | 3. figma → Sync with design tool |
| 132 | ``` |
| 133 | |
| 134 | --- |
| 135 | |
| 136 | ## How Skills Work |
| 137 | |
| 138 | Each skill provides: |
| 139 | |
| 140 | 1. **When to use**: Scenarios that trigger the skill |
| 141 | 2. **Quick reference**: Tables and cheat sheets |
| 142 | 3. **The process**: Step-by-step workflow |
| 143 | 4. **Implementation checklist**: Trackable progress (for complex skills) |
| 144 | 5. **Code examples**: CSS, Tailwind, JSON, framework-specific |
| 145 | |
| 146 | Skills output in multiple formats: |
| 147 | - **CSS custom properties**: `--color-primary: #3b82f6` |
| 148 | - **Tailwind config**: `theme.extend.colors.primary` |
| 149 | - **JSON tokens**: Design token format for tools |
| 150 | |
| 151 | --- |
| 152 | |
| 153 | ## Tips for Best Results |
| 154 | |
| 155 | 1. **Be sp |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
