design-system-authoringlisted
Install: claude install-skill virajp/ai-plugins
# Design System
The product-wide **UX and visual language, as a contract**. It is a vwf
foundation — a peer of `architecture.md` — and is **mandatory once the product
has a UI surface** (a frontend/app project in the registry). Every blueprint
Screens section references it instead of re-deciding color, type, spacing, or
component behavior.
A design system records decisions that are **true regardless of framework**:
semantic token *values*, type and spacing *scales*, motion *principles*, and the
*accessibility standard* the product commits to. It never names the component
library, CSS framework, or design file — that mapping is realization (`plan`).
| Topic | When to read |
| ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| [Foundations](${CLAUDE_PLUGIN_ROOT}/skills/design-system-authoring/references/foundations.md) | **Read first.** What belongs here vs in plan; MASTER + override model |
| [Color tokens](${CLAUDE_PLUGIN_ROOT}/skills/design-system-authoring/references/color-tokens.md) | Semantic, role-based color tokens with light/dark values and contrast |
| [Typography](${CLAUDE_PLUGIN_R