design-system-reviewer
CommunityEnsure UI components follow design system tokens.
AuthorRaNDoM6913
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Frontend UI components often fail to align with a project's design system tokens, leading to visual inconsistencies and potential accessibility gaps. This Skill helps detect token usage automatically and enforces reliance on tokens rather than hardcoded values.
Core Features & Use Cases
- Design Token Discovery: automatically detect design tokens from CSS variables, Tailwind/theme configs, and design-token files.
- Token-Based Compliance: verify colors, spacing, typography, and z-index use tokens instead of hardcoded values.
- Use Case: run a full design-system audit across a component library to produce a report that highlights deviations and suggested token substitutions.
Quick Start
Prompt the reviewer with your component library path to begin the token-based review process.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-reviewer Download link: https://github.com/RaNDoM6913/claude-code-superkit/archive/main.zip#design-system-reviewer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.