← ClaudeAtlas

design-system-authoringlisted

Authoring discipline for a product's design system — the code-independent UX/visual contract (semantic tokens, typography, spacing, motion, accessibility standard, component behaviors, anti-patterns) that every blueprint screen references. Auto-applies when editing docs/blueprint/design-system. Read the reference matching the layer you are defining.
virajp/ai-plugins · ★ 1 · Web & Frontend · score 78
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