Stats
Actions
Tags
From orchestrator-supaconductor
Generates UI/UX audit report from live browser testing, with grades, categorized issues, evidence, fixes, design principle checks, and WCAG 2.1 AA compliance.
How this command is triggered — by the user, by Claude, or both
Slash command
/orchestrator-supaconductor:UI-UX-AUDIT-REPORTui-audit/The summary Claude sees in its command listing — used to decide when to auto-load this command
# UI/UX Audit Report Template **Date:** [YYYY-MM-DD] **Auditor:** Claude Code (Automated Browser Testing) **Methodology:** Live browser testing with agent-browser CLI, accessibility tree analysis, DOM measurements --- ## Executive Summary [Brief summary of audit findings, highlighting strengths and critical issues.] ### Overall Grade: **[A-F] ([0-100]/100)** **Breakdown:** - Touch Targets & Sizing: [0-100]/100 - Color Contrast: [0-100]/100 - Cognitive Load: [0-100]/100 - Typography: [0-100]/100 - Responsive Design: [0-100]/100 --- ## Critical Issues (Fix Immediately) ### 1. [Issue T...
Date: [YYYY-MM-DD] Auditor: Claude Code (Automated Browser Testing) Methodology: Live browser testing with agent-browser CLI, accessibility tree analysis, DOM measurements
[Brief summary of audit findings, highlighting strengths and critical issues.]
Breakdown:
Severity: P0 - [Category] Impact: [Description of user/business impact]
[Measurements, screenshots, and data from live browser testing]
[Code analysis showing the source of the issue]
[Specific code changes with before/after examples]
File to fix: [path/to/file.tsx]
Severity: P1 Impact: [Description]
[Measurements and data]
[Recommended changes]
[Description and recommendations]
[List of things done well with evidence]
| Element | Count | Status | Notes |
|---|---|---|---|
| Navigation items | [N] | [Status] | [Notes] |
| Form fields | [N] | [Status] | [Notes] |
| Choice options | [N] | [Status] | [Notes] |
| Pricing tiers | [N] | [Status] | [Notes] |
| Element | Size | Minimum | Status |
|---|---|---|---|
| Header buttons | [W]x[H]px | 44x44px | [Status] |
| CTAs | [W]x[H]px | 44x44px | [Status] |
| Cards | [W]x[H]px | 44x44px | [Status] |
| Element Type | Required Ratio | Status |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | [Status with measured ratio] |
| Large text (>= 18pt) | 3:1 | [Status with measured ratio] |
| UI components | 3:1 | [Status with measured ratio] |
| Issue | Impact | Effort | Priority |
|---|---|---|---|
| [Issue 1] | [HIGH/MEDIUM/LOW] | [HIGH/MEDIUM/LOW] | P0 |
| [Issue 2] | [HIGH/MEDIUM/LOW] | [HIGH/MEDIUM/LOW] | P1 |
| [Issue 3] | [HIGH/MEDIUM/LOW] | [HIGH/MEDIUM/LOW] | P2 |
File: [path/to/file.tsx]
// BEFORE
[original code]
// AFTER
[fixed code]
Verification: [How to verify the fix works]
Before marking this audit complete, verify:
Stored in: [path/to/screenshots/]
[screenshot-1.png] - [Description][screenshot-2.png] - [Description]Immediate (This Week):
Short-term (Next Sprint):
Medium-term (Next Month):
[Summary of findings, key takeaways, and overall assessment.]
Priority: [Key recommendation before launch/release]
Estimated effort: [Total hours for all P0 fixes]
Audit completed: [Date] Evidence-based: Live browser measurements, DOM inspection, accessibility tree analysis Tools used: agent-browser CLI, Chrome DevTools, manual WCAG calculations
npx claudepluginhub ibrahim-3d/orchestrator-supaconductor --plugin orchestrator-supaconductor/wcag-auditRuns WCAG 2.1 Level A/AA accessibility audit on a web page URL, generates compliance score and detailed remediation guidance with optional screenshots.
/ux-a11yRuns a structured WCAG 2.1 AA accessibility audit on a URL, file, or screenshot. Checks contrast, keyboard navigation, focus, ARIA, screen reader support, and motion preferences, then produces a grouped findings report with severity, evidence, and fixes.
/generate-reportGenerates detailed WCAG accessibility audit report with organized findings, severity levels, code fixes, compliance score, executive summary, priority matrix, and references in Markdown/HTML.
/accessibility-auditAudits UI code for WCAG 2.1/2.2 compliance at A/AA/AAA level, identifies issues across perceivable/operable/etc. criteria, and provides remediation. Accepts file/component path or prompts for target.
/evaluateEvaluates 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.
/auditRuns a full web accessibility audit using the web-accessibility-wizard agent with all specialists, producing a prioritized report.