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: