Stats
Actions
Tags
From claude-frontforge
Find UI inconsistencies in your code — off-grid spacing, wrong depth strategy, out-of-palette colors, and component drift from established patterns. Reports violations with file and line numbers. Add --fix to auto-correct safe issues.
How this command is triggered — by the user, by Claude, or both
Slash command
/claude-frontforge:auditcommands/The summary Claude sees in its command listing — used to decide when to auto-load this command
# claude-frontforge audit Check existing code against your design system. ## Usage ## What to Check **If `.frontforge/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 matching ...
Check existing code against your design system.
/audit <path> # Audit specific file/directory
/audit # Audit common UI paths
/audit <path> --fix # Auto-fix violations where safe
If .frontforge/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
When --fix is passed, automatically correct safe violations:
Safe to auto-fix:
Requires confirmation:
Always show a diff preview and ask for confirmation before applying fixes:
Ready to fix 3 violations:
Button.tsx:12 — 38px → 36px (pattern)
Card.tsx:8 — shadow → border (depth)
Input.tsx:20 — 14px → 16px (grid)
Apply these changes? (y/n/review each)
--fix: collect safe fixes, preview diff, apply on confirmationnpx claudepluginhub thiagoedson/claude-frontforge --plugin claude-frontforge/auditAudits UI code against design system for spacing, depth, color, and pattern violations. Reports file-specific issues and suggestions. Supports path argument or defaults to common UI paths.
/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.
/design-reviewReviews UI files or components interactively for design, usability, code quality, and performance issues. Configures via sequential questions on focus, context, and platform.