governance

Solid

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

Web & Frontend 731 stars 77 forks Updated today

Install

View on GitHub

Quality Score: 83/100

Stars 20%
95
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
67
Issue Health 10%
50
License 10%
0
Description 5%
100

Skill Content

# Skill: Governance Keep the system consistent as it grows. Apply versioning, contribution, and deprecation rules. ## Steps 1. Read `workflows/governance.md` (SemVer table, contribution workflow, deprecation policy, change comms). 2. Classify the change: **major** (breaking — renamed/removed token or prop, changed anatomy/default), **minor** (additive — new token/component/variant/optional prop), **patch** (fix — contrast/bug/doc/value tweak in tolerance). 3. For a **new** component/token: confirm it serves a real, repeated need (≥ 2 places) before promoting product → candidate → core. Design it to the full quality bar (`.claude/rules/components.md` → Component Quality Bar). 4. For a **deprecation**: mark with reason + replacement + removal version; keep working ≥ 1 minor cycle; provide a migration map (`design-systems/crosswalk.md` style); remove only in a major. 5. Wire any new file into `CLAUDE.md` (File Reference Map + relevant table/router) and add a changelog entry. ## Verification (definition of done) - Change has a SemVer level **and** a changelog entry. - Removals have a deprecation window, a replacement, and a migration table. - New spec meets the 8-state + a11y + token-mapping bar and is reachable via the router. - `python3 scripts/validate_tokens.py` passes; contrast re-checked if colors changed.

Details

Author
plugin87
Repository
plugin87/ux-ui-agent-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
None

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-system-engineering

Create, audit, or synchronize design tokens, reusable components, variants, documentation, and code across design tools and product repositories. Use for Figma libraries, frontend component libraries, typography and color systems, responsive foundations, theming, governance, design-code parity, or reducing inconsistent UI patterns.

0 Updated 1 weeks ago
Yaz-inc
Web & Frontend Listed

design-system-governance

Discover, select, document, extend, and enforce a product design system through design tokens, component contracts, responsive behavior, interaction states, content rules, accessibility, visual evidence, and deterministic UI quality gates. Use when starting a UI product, preparing a frontend feature, choosing a component system or visual direction, auditing an existing interface, preventing one-off styling, or reviewing whether implementation follows the approved design language.

0 Updated today
Cartograf666
Web & Frontend Listed

design-system

Establish a design system where there is none, and enforce the one that exists so violations fail a check instead of surviving code review. Covers token layers, the traps that make tokens quietly wrong (alpha over variables, contrast by threshold, a token that cannot express a state), and the four gates that keep drift out. Use for: design system, design tokens, tokens, theme, dark mode, light mode, colores del sistema, hardcoded colors, /design-system, esto no respeta el design system, unificar estilos.

1 Updated 2 weeks ago
MR-Axel