Claude Code skills for structuring design systems, component libraries, and composite UI patterns.
Three focused skills covering the full arc from foundation tokens through individual components to assembled features. Each skill owns a single layer of the design system stack.
Companion to ui-craft, which covers motion, interaction design, typography, colour, and platform implementation.
system-craft/
├── token-craft/SKILL.md Design tokens and foundation scales.
├── component-craft/SKILL.md Component APIs, composition, states.
└── pattern-craft/SKILL.md Composite UI patterns.
For cross-suite references, see ui-craft's accessibility.md (accessibility requirements across all 8 skills) and composition.md (multi-skill task sequencing and lead-skill lookup).
Design token architecture and foundation scales. The three-layer model (primitive, semantic, component), naming conventions (--{category}-{property}-{modifier}), and concrete scales for spacing (base-4), border radius, shadow (Derek Briggs natural shadow method with matched Y/blur, negative spread, uniform opacity), z-index (named layers), breakpoints (mobile-first), motion tokens, and icon sizing. Plus units guidance (rem for spacing, px for borders, unitless for line-heights) and theming (primitives never change, only semantics remap).
Based on the Design System Checklist and the token patterns of Tailwind, Radix Themes, and Open Props.
Sources: Design System Checklist, Derek Briggs (natural shadow method)
How to build reusable UI components with consistent APIs and complete state coverage. Prop conventions (variant, size, disabled, loading, no is prefix, string unions over booleans), variant systems (CVA with defaultVariants), forwarding (ref, className, rest props, displayName, React 19 note), controlled and uncontrolled patterns, composition (when to configure vs compose, the 4-content-prop rule, compound component naming, slots, render delegation via asChild/render), component state coverage (interactive: default, hover, focus, active, disabled, loading; content: empty, loading, error, partial, complete), icon system (colour inheritance via currentColor, sizing from token-craft scale, one library, accessibility), and tools (CVA, Radix Slot, Base UI, clsx + tailwind-merge).
Based on the component patterns of Radix, Base UI, and shadcn/ui.
Composite UI patterns that assemble components into coherent features. The layer between "I have well-structured components" and "I have a well-structured product."
Covers: form patterns (validation timing with three strategies, error display, field grouping, multi-step with progress and backward navigation, submit behaviour), navigation patterns (top/sidebar/bottom tabs, mobile adaptation, active states, breadcrumbs, deep linking), data display patterns (tables with sort/filter/pagination/selection/responsive, lists, cards), feedback patterns (toast vs inline vs banner decision table, confirmation dialogs, progress indicators, optimistic updates), layout patterns (sidebar+main, dashboard grids with auto-fill, content density levels, responsive strategies, max-width by content type), search patterns (keyboard shortcut, debounce, arrow key navigation, empty states, URL-reflected filters), and modal/dialog patterns (modal vs page vs sheet decisions, focus trapping and return, dismiss behaviour, scroll lock, mobile adaptation, stacking avoidance, deep linking).
token-craft sets up the foundation once: "Here's the spacing scale, here's how tokens are named, here's how theming works."
component-craft uses those tokens to build individual components: "Here's a Button with consistent props, complete states, and forwarded refs."
pattern-craft assembles those components into features: "Here's how that Button, Input, and ErrorMessage work together as a form with validation timing and error placement."
"Set up the spacing and token system" — token-craft fires.
"Build a reusable Button component" — component-craft fires.
"How should this form validate?" — pattern-craft fires.
"Build me a dashboard" — pattern-craft fires (layout and data display patterns).
"Where should errors show?" — pattern-craft fires.
"This component API feels wrong" — component-craft fires.
From your project's root directory:
curl -fsSL https://raw.githubusercontent.com/olzn/system-craft/main/install.sh | shOr clone and run locally:
git clone https://github.com/olzn/system-craft.git
cd system-craft
sh install.shCopy the skill folders into your project's .claude/skills/ directory:
your-project/
└── .claude/
└── skills/
├── token-craft/
│ └── SKILL.md
├── component-craft/
│ └── SKILL.md
└── pattern-craft/
└── SKILL.md
Or install globally to ~/.claude/skills/ for availability across all projects.
The SKILL.md files are standard markdown with YAML frontmatter. Adapt file locations to your tool's conventions.
The visual and interaction counterpart to this suite. Covers motion, interaction design, typography, colour, and platform implementation details.
Each skill includes a learnings.md convention. After completing a task with a skill, patterns, edge cases, and library quirks are appended to a learnings.md file in that skill's folder. The skill consults this file before starting new tasks.
This skill suite draws on patterns established by:
- Radix UI — compound component patterns,
asChildrender delegation, controlled/uncontrolled conventions - Base UI —
renderprop delegation, unstyled component architecture - shadcn/ui — CVA variant system,
cn()utility, component API conventions - Tailwind CSS — utility-first token consumption, design scale philosophy
- Design Tokens W3C Community Group — three-layer token model, naming conventions
- Derek Briggs — natural shadow method
These are widely adopted community patterns. This repo packages them as Claude Code skills for easy use.
MIT