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)
Runs a structured usability audit on front-end code, evaluating against 15 heuristic principles and producing a severity-ranked report with findings, user impact, and fix recommendations.
How this command is triggered — by the user, by Claude, or both
Slash command
/frontend-design-audit:evaluatecommands/The summary Claude sees in its command listing — used to decide when to auto-load this command
# Frontend Audit: Evaluate Only Run a usability audit and produce a report. Do not implement any changes. ## Required Reading Before starting, read these files: 1. The main skill at `.claude/skills/frontend-design-audit/SKILL.md` — The evaluation framework and workflow 2. `references/heuristics.md` — Detailed principle definitions and what to look for ## Usage ## Process 1. **Identify UI files** — Use Glob to find front-end files (tsx, jsx, vue, svelte, html, css). If a path was provided, scope to that path. If not, look for common UI directories (src/components, src/pages, app/, pa...
Run a usability audit and produce a report. Do not implement any changes.
Before starting, read these files:
.claude/skills/frontend-design-audit/SKILL.md — The evaluation framework and workflowreferences/heuristics.md — Detailed principle definitions and what to look for/frontend-design-audit:evaluate # Evaluate common UI paths in the project
/frontend-design-audit:evaluate src/pages/ # Evaluate a specific directory
/frontend-design-audit:evaluate App.tsx # Evaluate a specific file
Identify UI files — Use Glob to find front-end files (tsx, jsx, vue, svelte, html, css). If a path was provided, scope to that path. If not, look for common UI directories (src/components, src/pages, app/, pages/, etc.).
Read the code — Read the key UI files. For large projects, focus on the most important screens (index/home, main dashboard, primary form, key user flow).
Evaluate systematically — Go through all 15 principles. For each, inspect the code for violations. Reference references/heuristics.md for what to look for.
Rate severity — Apply the 0-4 scale to each finding. Consider frequency, impact, and persistence.
Produce the report — Use the structured format from SKILL.md. Include:
Present to user — Show the full report. Offer to explain any finding in more detail. Do NOT implement changes — this command is evaluation only.
Suggest next steps:
/frontend-design-audit:improve or I can implement the top-priority items now."/frontend-design-audit:quick to auto-fix severity 3-4 issues."npx claudepluginhub mistyhx/frontend-design-audit/design-reviewReviews existing UI code for design issues, usability problems, and improvement opportunities. Provides actionable recommendations with interactive configuration and state tracking.
/ux-auditRuns a structured 6-lens UX audit on any existing surface — URL, code, mockup, or image — producing a severity-tagged Polaris-style report with findings and fixes.
/ui-reviewConducts a retroactive 6-pillar visual audit of implemented frontend code, grading each pillar 1-4 and producing a UI-REVIEW.md report.
/auditAudits frontend design without making changes — calculates an AI Slop Score (0-100), detects generic patterns, and generates a detailed report with recommendations.
/reviewReviews an HTML design file for anti-patterns, design principles, and accessibility issues, producing a structured markdown report.
/design-reviewReviews code, screenshots, or visual artifacts against visual design principles, identifies violations with scores, and suggests research-backed fixes.