design-system
Design System
Overview
Single source of truth for visual consistency at scale — a shared language between design and engineering. Covers token architecture, theming infrastructure, component API patterns, accessibility compliance, and governance workflows.
Design systems are not component libraries alone. They unify tokens, patterns, documentation, and contribution processes so teams build once and maintain once.
Quick Reference
| Area | Pattern | Key Points |
|---|---|---|
| Token hierarchy | Primitive > Semantic > Component | Never reference primitives in components; semantic layer is themable |
| Dark mode | Swap semantic tokens via data-theme |
Use off-white/dark-gray, not pure white/black |
| Multi-brand theming | Override semantic tokens per brand | Apply via CSS custom properties at runtime |
| Tailwind v4 | @theme block in CSS (no config file) |
CSS-first configuration replaces tailwind.config.js |
| CVA variants | cva() for variant + size combinations |
Type-safe with VariantProps; pair with cn() utility |
| Compound components | Modal.Header, Modal.Body sub-parts |
Composition over configuration; shared context for implicit state |
| Headless UI | Radix primitives + Tailwind classes | Accessibility built-in; bring your own styles |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78