VincentChuWaiChow/vanguard-frontier-agentic/skills/frontend/design-token-governance-review/SKILL.md
Reviews design-token source of truth and build pipelines for hardcoded-value drift and resolved WCAG 1.4.3/1.4.11 contrast compliance across theme variants (light, dark, high-contrast), grounded in the W3C Design Tokens format and current WCAG success criteria.
Decision brief
Reviews design-token source of truth and build pipelines for hardcoded-value drift and resolved WCAG 1. 4.
Compatibility matrix
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
npx skills add https://github.com/VincentChuWaiChow/vanguard-frontier-agentic --skill "skills/frontend/design-token-governance-review"Inspect the Agent Skill "design-token-governance-review" from https://github.com/VincentChuWaiChow/vanguard-frontier-agentic/blob/5e32c1f3b9ba9e9bacae9687f55bed35b5def90f/skills/frontend/design-token-governance-review/SKILL.md at commit 5e32c1f3b9ba9e9bacae9687f55bed35b5def90f. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
A token system only delivers its promise (consistent, themeable, accessible UI) if it is actually the single source of truth. This skill catches the two most common failure modes: hardcoded values that duplicate an existing token (silent drift) and token pairings that resolve to…
Use this skill when the user asks to:
Before making any claim about token-file format, $value/$type semantics, reference resolution, transform behavior, or Storybook a11y tooling, ground the claim in current library docs:
Always compute the resolved contrast ratio from the actual token values in scope; a token's semantic name (--color-text-secondary) does not guarantee its computed contrast is compliant.
inventory of hardcoded-value findings with file/line and the matching existing token,
Permission review
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 91/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 21 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
A token system only delivers its promise (consistent, themeable, accessible UI) if it is actually the single source of truth. This skill catches the two most common failure modes: hardcoded values that duplicate an existing token (silent drift) and token pairings that resolve to an inaccessible contrast ratio in some theme variant that nobody re-checked after the token value changed.
Use this skill when the user asks to:
Before making any claim about token-file format, $value/$type semantics, reference resolution, transform behavior, or Storybook a11y tooling, ground the claim in current library docs:
mcp__Context7__resolve-library-id for the library in scope (Style Dictionary, Storybook) if not already resolved in this session.mcp__Context7__query-docs with a specific query before asserting version-specific behavior (transform config shape, DTCG $type inheritance rules, a11y-addon detection coverage, etc.)./style-dictionary/style-dictionary (DTCG format, $value/$type, resolveReferences/getReferences, typeDtcgDelegate for $type inheritance); Storybook /storybookjs/storybook (@storybook/addon-a11y, built on axe-core, documented as catching up to ~57% of WCAG issues automatically — never represent an addon-a11y pass as full conformance).https://tr.designtokens.org/format/) or WCAG 2.1 normative text, and mark the claim documentation-based rather than verified.--color-text-secondary) does not guarantee its computed contrast is compliant.{group.token} references and $type group-level inheritance before evaluating a value — a token's effective type/value can come from an ancestor group, not the token's own object.@storybook/addon-a11y pass as partial automated evidence only (axe-core-class coverage, not full conformance); it does not substitute for manually verifying contrast math on token pairings the user is asking about.visual-regression-storybook-review skill instead of this one when the question is about pixel-diff baseline approval rather than token source/contrast math.Load these only when needed:
$type inheritance, transform/build config, or hunting for hardcoded-value drift against an existing token set.Return, at minimum:
Frequently asked questions
Reviews design-token source of truth and build pipelines for hardcoded-value drift and resolved WCAG 1. 4.
The source record exposes this install command: npx skills add https://github.com/VincentChuWaiChow/vanguard-frontier-agentic --skill "skills/frontend/design-token-governance-review". Inspect the command and pinned source before running it.
Alternatives
oaustegard/claude-skills
Generate hierarchical _FEATURES.md files that describe what a codebase DOES from a user/consumer perspective, anchored to source symbols via tree-sitting. Supports large complex codebases through feature-driven decomposition into sub-feature files. Uses a multi-pass synthesis: orientation → detail → overview rewrite. Use when someone says "what does this do", "document features", "feature inventory", "_FEATURES.md", or needs to understand a codebase's purpose before modifying it. Complements tre
NintendaDev/unikit-ai
Generate and maintain the project's TECHNICAL documentation from its codebase — scans the project structure, tech stack, and module boundaries, then writes a lean README landing page plus detailed topic pages (architecture, modules, setup, build, APIs), only the docs that are relevant. Use whenever the user wants to create, update, or validate documentation of the CODE or the project itself, e.g. "generate documentation", "create docs", "write the README", "update the project docs", "document th
alirezarezvani/claude-skills
ISO 13485 Quality Management System implementation and maintenance for medical device organizations. Provides QMS design, documentation control, internal auditing, CAPA management, and certification support. Use when working with medical device quality systems, preparing for ISO 13485 audits, managing regulatory compliance documentation, setting up corrective actions, or building audit preparation programs. Useful for quality management, audit preparation, regulatory compliance, medical device d
compozy/compozy
Build terminal user interfaces with Go and Bubbletea framework. Use when creating TUI apps with the Elm architecture, dual-pane layouts, accordion modes, mouse/keyboard handling, Lipgloss styling, and reusable components. Includes production-ready templates, effects library, and battle-tested layout patterns from real projects. Don't use for plain-text CLI scripts without an interactive UI, web/desktop GUIs, or non-Go terminal frameworks (Ink, Textual, Ratatui).