mcpField
D
design-system-generalizer

design-system-generalizer

github.com/heyeddi-comDesign & UI086 installsUpdated 1d ago
Repository

About design-system-generalizer

design-system-generalizer is a project skill for comparing routes against a chosen golden reference. It helps teams identify design-token and component-reuse drift and plan incremental migration changes.

Key features

  1. 01Scans patterns on a reference route
  2. 02Diffs violations between routes
  3. 03Checks for hex colors and missing route files

Use cases

  1. 01Comparing routes with a golden reference
  2. 02Finding token or component reuse drift
  3. 03Planning incremental migration PRs

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill design-system-generalizer

After installing, type/design-system-generalizerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
scripts/
_skill_cli.py
diff_violations.py
scan_patterns.py

Details

From the project README

Design System Generalizer

When to use

  • One route is the "golden" reference (e.g. /settings)
  • Other routes drift from tokens or component reuse
  • Planning incremental migration PRs

Instructions

  1. python scripts/scan_patterns.py --route /golden --project-root <root>
  2. python scripts/diff_violations.py --golden /golden --target /other --project-root <root>
  3. Use --check on diff to exit non-zero when target has hex colors or missing route files.
  4. Propose small PRs: never whole-app rewrite in one shot.

Comments

Markdown supported