OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry design-compliance-dashboard

Tracks and visualizes the progress of the design system migration. Generates compliance reports across Typography, Shape, Color, Motion, and Accessibility metrics to provide a clear path to the "Definition of Done."

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-compliance-dashboard" ~/.claude/skills/majiayu000-claude-skill-registry-design-compliance-dashboard && rm -rf "$T"
manifest: skills/data/design-compliance-dashboard/SKILL.md
tags
#design-compliance#migration-tracking#accessibility-reporting#typography-analysis#color-metrics
source content

Design Compliance Dashboard Skill

Capabilities

  • Generate a real-time Markdown dashboard of component compliance.
  • Identify "High Priority" components for refactoring.
  • Track 5 key metrics: Typography, Shape, Color, Motion, and Accessibility.

Workflow

  1. Execute 
    python3 scripts/generate-compliance-dashboard.py
    .
  2. Present the summary results to the user.
  3. Suggest the next batch of 3 components for the 
    component-transformer
    to process.

Value

  • Provides clarity on the "Definition of Done".
  • Prevents "Design Debt" accrual.
  • Gamifies the migration process for stakeholders.