Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From interface-design
Audits UI code for violations of a design system's spacing grid, depth rules, color palette, and component patterns. Reports violations with line numbers and suggestions.
How this command is triggered — by the user, by Claude, or both
Slash command
/interface-design:auditcommands/The summary Claude sees in its command listing — used to decide when to auto-load this command
# interface-design audit Check existing code against your design system. ## Usage ## What to Check **If `.interface-design/system.md` exists:** 1. **Spacing violations** - Find spacing values not on defined grid - Example: 17px when base is 4px 2. **Depth violations** - Borders-only system → flag shadows - Subtle system → flag layered shadows - Allow ring shadows (0 0 0 1px) 3. **Color violations** - If palette defined → flag colors not in palette - Allow semantic grays 4. **Pattern drift** - Find buttons not matching Button pattern - Find cards not matc...
Check existing code against your design system.
/audit <path> # Audit specific file/directory
/audit # Audit common UI paths
If .interface-design/system.md exists:
Spacing violations
Depth violations
Color violations
Pattern drift
Report format:
Audit Results: src/components/
Violations:
Button.tsx:12 - Height 38px (pattern: 36px)
Card.tsx:8 - Shadow used (system: borders-only)
Input.tsx:20 - Spacing 14px (grid: 4px, nearest: 12px or 16px)
Suggestions:
- Update Button height to match pattern
- Replace shadow with border
- Adjust spacing to grid
If no system.md:
No design system to audit against.
Create a system first:
1. Build UI → establish system automatically
2. Run /extract → create system from existing code
npx claudepluginhub cleberdsantos/claude-design-skill --plugin interface-design10plugins reuse this command
First indexed Jan 20, 2026
Showing the 6 earliest of 10 plugins
/auditAudits UI codebase for design style consistency, hardcoded design tokens (colors, spacing), accessibility (color contrast), and best practices across file, directory, or project scopes.
/design-auditAudits Figma files, screenshots, or components against design tokens and patterns, generating a compliance score, violations table, and fix recommendations in markdown.
/design-reviewReviews UI files, directories, or staged git changes against design conventions, anti-patterns, accessibility, performance, RTL, i18n, and brand standards. Supports --check, --fix, and --json output.
/reviewReviews an HTML design file for anti-patterns, design principles, and accessibility issues, producing a structured markdown report.
/design-reviewReviews existing UI code for design issues, usability problems, and improvement opportunities. Provides actionable recommendations with interactive configuration and state tracking.
/audit-systemAudits a design system or component library for consistency, completeness, and accessibility, producing a prioritized report with severity ratings and remediation roadmap.