Design System

Audit, document, or extend your design system. Checks for naming inconsistencies, hardcoded values across components, writes component documentation with variants and accessibility notes.

The Design System skill acts as a design system consultant. It audits your existing system for inconsistencies, documents components with their variants and states, and helps you design new patterns that fit your existing system's language.

When to use

Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

Examples

Audit component for consistency

Check a component against your design system rules

Audit our Button component for hardcoded colors and spacing that should use design tokens.

Document a component

Generate full documentation with variants and states

Write documentation for our Modal component including all variants, states, and accessibility notes.

Design a new pattern

Create a new component that fits your system

Design a Toast notification pattern that fits our existing design system. We use 8px grid and semantic color tokens.