Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub thiagoedson/claude-frontforge --plugin claude-frontforgeHow 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 ...
/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.
Share bugs, ideas, or general feedback.
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 confirmation