Design system governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption.
How this skill is triggered — by the user, by Claude, or both
Slash command
/universal-design-system:design-system-governanceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when the user needs **governance**, **scaling**, or **adoption** guidance for a design system — including centralized vs federated models, lifecycle, contribution rules, and how the Universal Design System fits as a single source of truth with palette overrides for brands.
Use this skill when the user needs governance, scaling, or adoption guidance for a design system — including centralized vs federated models, lifecycle, contribution rules, and how the Universal Design System fits as a single source of truth with palette overrides for brands.
tokens/design-tokens.json — one file. Foundation tokens (spacing, motion, typography scale, z-index) are locked; palette tokens (color, shadow, radius, display font) vary per palette. Custom palettes can be added via palette.py create and merged into the same structure.src/data/components.csv and implementation (React/Vue/Svelte) — one canonical set. Variants and states are defined once; products use the same components with different data-theme (palette).src/data/ui-reasoning.csv — sector/product-type rules (e.g. IF sector=finance THEN palette=corporate). Governance can extend this with org-specific overrides or leave it as-is for recommendation only.UDS uses a defined lifecycle for components. Reference docs/governance/LIFECYCLE.md:
| Stage | Meaning |
|---|---|
| Proposal | RFC, discussion, acceptance criteria |
| Alpha | Initial implementation; API may change; limited a11y |
| Beta | API stabilizing; a11y audit; documentation draft |
| Stable | API frozen; WCAG 2.2 AA; docs and examples complete; cross-palette tested |
| Deprecated | Migration guide; maintained 2 major versions; then removed |
Promotion: Proposal → Alpha (RFC + impl), Alpha → Beta (API review + basic a11y), Beta → Stable (full a11y, docs, 2+ palette tests), Stable → Deprecated (replacement + migration guide).
Use this lifecycle in your own governance: e.g. new components start as Proposal, reach Stable only after a11y and docs, and deprecation is time-bound.
uds install, tokens in repo), (2) palette choice per product (data-theme), (3) component usage from the canonical list, (4) docs/Storybook for usage. Design ops can track adoption (e.g. token usage, component usage) to find gaps and deprecations.palette.py). Each product or brand sets data-theme to its palette. Single documentation and one codebase.| Topic | Reference |
|---|---|
| Component lifecycle | docs/governance/LIFECYCLE.md |
| Token architecture | CLAUDE.md or project Token Architecture section — foundation vs palette |
| Custom palettes | python src/scripts/palette.py create/list |
| Rules and reasoning | src/data/ui-reasoning.csv |
Governance should keep the design system predictable (lifecycle, tokens, components) while allowing controlled extension (palettes, rules) for multi-team and multi-brand use.
npx claudepluginhub mkatogui/universal-design-system --plugin universal-design-systemEstablishes governance processes for design systems: contribution models, deprecation strategies, versioning, adoption metrics, and documentation standards. Helps scale from ad hoc to managed governance.
Build or audit a design system: component library, design tokens, naming conventions, contribution model, documentation. Use when teams are inconsistent across products.
Creates design systems with CSS tokens for typography, colors, spacing, elevation; React components like buttons; Markdown docs and governance. Use for component libraries and UI consistency.