| name | design-system-patterns |
| description | Design system patterns for reusable UI via atomic design, Tailwind tokens/variants, and accessibility. Use when creating atoms/molecules, theming, or hardening a11y. |
Design System Patterns
Concise guidance for building consistent, accessible atoms and molecules. Keep SKILL lean; open resources only when needed.
When To Use
- Creating/updating atoms or molecules from a component gap analysis
- Defining tokens, variants, and dark mode support
- Enforcing accessibility (focus, keyboard, semantics, SR)
- Structuring components (polymorphic props, compound patterns) and adding tests/visual coverage
Core Patterns
- Atomic Scope: DS owns atoms/molecules; organisms stay with product/feature teams.
- Tokens/Variants: Central tokens + CVA variants; always include dark mode.
- Accessibility: Focus-visible, keyboard flows, semantic labels, SR text.
- Composition: Polymorphic headings, compound components, safe error boundaries.
- Testing: RTL for behavior/accessibility; Storybook for visual regressions.
Resources
- Atomic Design — load when classifying scope (atom vs molecule vs organism).
- Styling, Tokens, and Variants — load when defining tokens, CVA variants, dark mode.
- Accessibility — load when enforcing focus, keyboard, semantics, SR support.
- Component Structure — load when defining props, polymorphism, composition, error boundaries.
- Testing — load when writing component tests or visual regression coverage.
