Agent skill

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."

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/design-compliance-dashboard

SKILL.md

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.

Didn't find tool you were looking for?

Be as detailed as possible for better results