Use this skill when building design systems, creating component libraries, defining design tokens, implementing theming, or setting up Storybook. Triggers on design tokens, component library, Storybook, theming, CSS variables, style dictionary, variant props, compound components, and any task requiring systematic UI component architecture.
Instrucciones de origen · Vista previa de solo lectura
name
design-systems
version
0.1.0
description
Use this skill when building design systems, creating component libraries, defining design tokens, implementing theming, or setting up Storybook. Triggers on design tokens, component library, Storybook, theming, CSS variables, style dictionary, variant props, compound components, and any task requiring systematic UI component architecture.
When this skill is activated, always start your first response with the 🧢 emoji.
Design Systems
A production-ready skill for building scalable design systems: component libraries,
design tokens, theming infrastructure, Storybook documentation, and the tooling
that connects design to code. Applies equally to building a system from scratch
or systematizing an existing ad-hoc component collection.
When to use this skill
Trigger this skill when the user:
Is building or contributing to a component library or design system
Needs to define, structure, or migrate design tokens
Wants to implement light/dark theming or multi-brand theming
Is setting up or configuring Storybook
Asks about variant-based component APIs (CVA, Tailwind Variants, etc.)
Wants to build compound components (Tabs, Dialog, Accordion, etc.)
Needs to publish a component package or version a design system
Is connecting a design tool (Figma) to code via tokens
Asks about Style Dictionary or token pipeline tooling
Do NOT trigger this skill for:
One-off UI styling with no reuse requirement (use ultimate-ui instead)
Backend-only or data layer work with no component surface
Key principles
Tokens before components - Every visual decision (color, spacing, typography,
motion) must be a named token before any component uses it. Components that bypass
tokens become maintenance liabilities the moment a brand or theme changes.
Compose, don't configure - Prefer passing children/slots over growing a
variant prop to 20 options. A <Card> with <Card.Header>, <Card.Body>,
<Card.Footer> scales. A <Card hasHeader hasStickyFooter showBorder> does not.
Document with stories - Every component must have a Storybook story before
it can be considered done. Stories are living documentation, accessibility test
harnesses, and visual regression baselines rolled into one.
Accessibility built-in - ARIA roles, keyboard navigation, and focus management
are entry requirements, not features. Use Radix UI primitives or similar headless
libraries to avoid re-implementing complex a11y patterns.
Version semantically - Design systems are APIs. A color rename is a breaking
change. Use semantic versioning strictly and changesets for automated releases.
Core concepts
Token hierarchy
Tier
Also called
Example
Used by
Primitive
Global
--blue-500: #3b82f6
Semantic layer only
Semantic
Alias
--color-interactive-primary: var(--blue-500)
Components + CSS
Component
Local
--btn-bg: var(--color-interactive-primary)
That component only
Components must only reference semantic tokens, never primitives. Swap semantic
tokens and every component updates automatically.
Load references/token-architecture.md for full naming conventions, file
structure, Style Dictionary pipeline, and multi-brand token patterns.
Component API design
Variant props - Enumerated visual variants. Use CVA (Class Variance Authority)
to map variants to Tailwind classes with full TypeScript inference.
Compound components - Components that own state and expose sub-components as
namespaced exports (Tabs.List, Tabs.Tab, Tabs.Panel). Use React context to
share state without prop drilling.
Polymorphic components - Render as different HTML elements via an as prop
(Button as="a"). Use the AsChild pattern (Radix) for safer polymorphism.
Theming architecture
:root Light theme semantic tokens (default)
[data-theme="dark"] Dark theme overrides
@media (prefers-color-scheme: dark) System fallback (no data-theme)
.brand-acme Brand-specific color overrides only
Only semantic tokens change across themes. Motion tokens must respect
prefers-reduced-motion.
// package.json - expose tokens as a named export{"exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./tokens":{"import":"./dist/tokens/variables.css"}},"scripts":{"build":"tsup src/index.ts --format esm --dts","release":"changeset publish"}}
Workflow: npx changeset (describe changes) -> PR -> merge -> CI runs changeset version
(bumps versions + writes CHANGELOGs) -> merge -> CI runs changeset publish.
Anti-patterns
Anti-pattern
Why it hurts
Better approach
Hardcoded hex values in components
Breaks theming when brand/theme changes
Use semantic tokens exclusively in components
Mega-component with 30+ props
Impossible to document, hard to maintain
Decompose into composable sub-components
Skipping Storybook stories
No living docs, no visual regression baseline
Write story before marking component done
aria-* added last
Complex keyboard/focus bugs surface too late
Use Radix/Headless UI primitives from the start
Semver ignored on token renames
Breaks consumers without a clear signal
Any token rename is a major version bump
Tokens without a naming convention
--blue, --blue2, --darkBlue chaos
Enforce {category}-{property}-{variant}-{state}
Emojis instead of icon components
Cannot be themed, styled, or sized consistently; render differently per OS
Use SVG icon components from Lucide React, Heroicons, Phosphor, or Font Awesome
Gotchas
CSS custom properties don't work in Tailwind utility class values without special syntax - bg-[--color-interactive-primary] requires the bracket notation with -- prefix. Using bg-color-interactive-primary as a utility class name silently fails. Test that tokens actually apply before shipping.
changesets publish requires a clean working directory and correct npm auth - Running changeset publish with uncommitted files or a missing .npmrc token publishes nothing but exits with code 0. Always run npm whoami and verify the registry before CI publish steps.
Compound components using React context throw at the wrong level - If a consumer renders <Tabs.Tab> outside <Tabs>, the context check throws. The error must reference the component name clearly. A generic "Cannot read property of null" doesn't help consumers. Always throw with throw new Error('Tabs.Tab must be used inside <Tabs>').
Storybook's autodocs tag generates docs from the first exported story's args, not all stories - If your Primary story omits certain prop values, those props won't appear in the auto-generated docs table. Explicitly define argTypes in meta to control what shows.
Token renames in a patch release will break consumers - Even if you add a semantic alias pointing to the old name, consumers who reference the old CSS variable name by string (e.g., in inline styles) get broken silently. Any token rename is a breaking change requiring a major version bump.
Only load the reference when the task requires that depth.
Companion check
On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:
