Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Evaluates front-end UI code for usability issues using 15 heuristics, rates severity 0-4, and produces a structured report with summary, findings, strengths, and recommendations. Accepts file/dir paths.
npx claudepluginhub mistyhx/frontend-design-auditHow 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...
/ui-reviewRuns a retroactive 6-pillar visual audit of implemented frontend code, producing a graded UI-REVIEW.md assessment.
/design-reviewReviews UI files or components interactively for design, usability, code quality, and performance issues. Configures via sequential questions on focus, context, and platform.
/ux-auditRuns a structured 6-lens UX review of a live surface (URL, file, or screenshot), producing a severity-tagged Polaris-style report with findings, evidence, and fixes.
/ui-auditAudits UI components or live browser pages against design principles, WCAG accessibility standards, and usability laws, producing a scored report with prioritized issues.
/design-reviewReviews code, screenshots, or visual artifacts against visual design principles, identifies violations with scores, and suggests research-backed fixes.
/auditAudits frontend designs from code or descriptions, computes AI Slop Score, detects generic patterns, suggests improvements, and generates a detailed report without changes.
Share bugs, ideas, or general feedback.
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."