Skip to main content
skill CX Codex

governance — Claude Code skill: versioning, deprecation, contribution

A skill that keeps a design system from drifting: it picks the SemVer level, runs the contribution flow, and retires old tokens with a migration path.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add plugin87/ux-ui-agent-skills --skill governance -a claude-code
Open on GitHub

What governance does

The skill opens workflows/governance.md from the ux-ui-agent-skills kit and follows it: the SemVer table, the contribution workflow, the deprecation policy, change comms. Every change gets a level. Major means a token or prop was renamed or removed, anatomy or a default shifted. Minor covers anything additive — a new token, component, variant, optional prop. Patch is a fix: contrast, a bug, docs, a value still inside tolerance.

Before a component or token gets promoted, the skill asks whether the need is real and repeated — at least two places using it — and only then moves it product → candidate → core. A deprecation needs a reason, a replacement and a removal version, and the old thing keeps working for at least one minor cycle. Migration is written up as a table in the style of design-systems/crosswalk.md. Nothing is removed outside a major.

Install only the skill folders and this breaks: there is no tokens directory and no workflows file to read. The skill says so and stops rather than inventing file contents. Run npx ux-ui-agent-skills init or install the plugin to get the kit. Done means python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py passes, with contrast checked again if colors moved.

What it helps with

  • decide between a major and a patch bump
  • add a token without breaking existing themes
  • retire a component and leave a replacement behind
  • set up a contribution process for the design system
  • wire a new file into CLAUDE.md and the changelog

Example prompts for the agent

  • Classify this change by SemVer and add a changelog entry
  • I want to move a component out of core — write the deprecation with a replacement and removal version
  • Check whether this new token belongs in core yet

How to install governance

1Skills CLI (Vercel)

npx skills add plugin87/ux-ui-agent-skills --skill governance -a claude-code

2Manually: put the files in place

~/.claude/skills/governance/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/governance/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about governance

How do I install governance in Claude Code?

Run npx skills add plugin87/ux-ui-agent-skills --skill governance -a claude-code. The skill lands at ~/.claude/skills/governance/SKILL.md.

What does the governance skill do?

It applies versioning, contribution and deprecation rules to a design system: it sets the SemVer level for a change, writes a deprecation window with a replacement and a migration table, and makes sure new files are listed in CLAUDE.md.

Why does the skill stop right after install?

With only the skill folders present there is no tokens or workflows alongside it, so the skill halts instead of guessing. Run npx ux-ui-agent-skills init or install the full plugin.

Source text

SKILL.md · MIT
---
name: governance
description: 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.
# `invocation:` was not a field Claude Code reads - unknown frontmatter keys are
# ignored without an error, so these six were auto-invocable the whole time they
# were marked user-only. This is the field that actually does it.
disable-model-invocation: true
---

# Skill: Governance

> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

Keep the system consistent as it grows. Apply versioning, contribution, and deprecation rules.

## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../.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 (`${CLAUDE_SKILL_DIR}/../../../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 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py` passes; contrast re-checked if colors changed.

© plugin87 · MIT · plugin87/ux-ui-agent-skills

Similar skills

Everything for Design →

From the same set16

design-component Produces UI component specifications covering anatomy, 8 interactive states, tokens, and accessibility. Useful when designing components in a design system before coding. CX Codex +1 522installs ux-writing Write or review interface text, from button labels to errors and empty states. The skill applies a project’s voice and checks copy against a pre-ship checklist. CX Codex +1 517installs design-qa This skill sets up checks for tokens, contrast, accessibility, and visual regressions. Use it to QA a component or screen before release. CX Codex +1 516installs brandkit Build a token-based design foundation from a product brief, with separate light and dark themes and contrast checks. Use it to establish shared visual rules before designing screens. CX Codex +1 510installs migrate-design-system Maps your design tokens to another system and back: Material 3, Apple HIG, Fluent 2, shadcn/ui, Radix. Useful when you borrow a look or move onto a new stack. CX Codex +1 487installs prototype Guides interface design across a five-tier fidelity ladder from content to code. It helps map user flows, build wireframes, and draft usability test plans. CX Codex +1 484installs token-build Generate web and mobile theme files from DTCG JSON tokens, or wire the build into CI. Useful when one token source needs outputs for several platforms. CX Codex +1 480installs figma-integration Sync project tokens and components with Figma in either direction. Use the skill to move design data, publish tokens, or check for mismatches. CX Codex +1 478installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor