UI quality audit — inspects computed CSS across typography, spacing, color, layout, interaction, accessibility, and polish. Produces letter grades per category. Requires Preview MCP tools. Trigger: 'audit the design', 'check UI quality', 'grade the frontend', 'design review'.
Log skill invocation:
AUDIT_SCRIPT=$(find . -name "audit-trail.sh" -path "*/sdlc/*" 2>/dev/null | head -1)
[ -z "$AUDIT_SCRIPT" ] && AUDIT_SCRIPT=$(find "$HOME/.claude" -name "audit-trail.sh" -path "*/sdlc/*" 2>/dev/null | sort -V | tail -1)
bash "$AUDIT_SCRIPT" log review sdlc:design-audit started --context "$ARGUMENTS"bash "$AUDIT_SCRIPT" log review sdlc:design-audit completed --context="<summary>"Perform a structured 80-item design audit powered by browser CSS inspection. Each of 7 categories gets a letter grade (A-F).
/sdlc:design-audit to audit the current UIpreview_inspect for computed values, not guessing.quality/proof/design-audit.json| Category | Items | Key tools |
|---|---|---|
| Typography | 12 | preview_inspect for font-size, line-height, font-weight |
| Spacing | 10 | preview_inspect for padding, margin, gap |
| Color | 12 | preview_inspect for color, background-color + contrast calc |
| Layout | 12 | preview_resize + preview_screenshot for responsive |
| Interaction | 12 | preview_eval for hover/focus states |
| Accessibility | 12 | preview_snapshot for ARIA, roles, labels |
| Polish | 10 | Mix of all tools |
| Score | Grade |
|---|---|
| >= 90% | A |
| >= 80% | B |
| >= 70% | C |
| >= 60% | D |
| < 60% | F |
Configurable minimum grade in sdlc.config.json (default: no category below C).
.quality/proof/design-audit.json — per-item scores, per-category grades, overall grade.quality/proof/screenshots/*.png — viewport screenshots and issue documentationThe ship skill includes the grade table and screenshots in the PR description under a ## Design Audit section.