Design Systems

Build, document, and maintain scalable design systems — from tokens and components to accessibility and theming.

Skills (11)

• accessibility-audit — Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use accessibility-test-plan (prototyping-testing).
• component-spec — Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use documentation-template; for a problem-solution pattern use pattern-library.
• design-system-governance — Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use design-system-adoption (designer-toolkit); for design file history use version-control-strategy (design-ops).
• design-token — Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use design-token-audit (designer-toolkit); for multi-brand mapping use theming-system.
• documentation-template — Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use component-spec.
• icon-system — Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use illustration-style (ui-design).
• localization-design — Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use ux-writing (designer-toolkit).
• motion-system — Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use animation-principles (interaction-design).
• naming-convention — Establish naming rules for components, tokens, and layers with patterns and worked examples. Use when names are inconsistent or being set. For what the tokens actually contain, use design-token.
• pattern-library — Structure a pattern entry — problem context, solution, usage examples, and related patterns. Use when documenting a recurring solution rather than a component. For a single component's API, use component-spec.
• theming-system — Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use color-system (ui-design); for dark mode craft use dark-mode-design (ui-design).

Commands (3)

• /audit-system — Run a comprehensive audit of an existing design system for consistency, completeness, and accessibility.
• /create-component — Scaffold a full component specification end to end — props, states, variants, accessibility, and documentation.
• /tokenize — Extract tokens from an existing design or stylesheet and organise them — naming, structure, and theme mapping.