gsd-ui-review

name: gsd-ui-review description: "Retroactive 6-pillar visual audit of implemented frontend code" argument-hint: "[phase]" allowed-tools:

• Read
• Write
• Bash
• Glob
• Grep
• Task
• AskUserQuestion

<required_reading> @${CLAUDE_PLUGIN_ROOT}/references/ui-brand.md </required_reading>

<available_agent_types> Valid GSD subagent types (use exact names — do not fall back to 'general-purpose'):

• gsd-ui-auditor — Audits UI against design requirements </available_agent_types>

0. Initialize

INIT=$(node "$GSD_TOOLS" init phase-op "${PHASE_ARG}")
if [[ "$INIT" == @file:* ]]; then INIT=$(cat "${INIT#@file:}"); fi
AGENT_SKILLS_UI_REVIEWER=$(node "$GSD_TOOLS" agent-skills gsd-ui-reviewer 2>/dev/null)

Parse: phase_dir, phase_number, phase_name, phase_slug, padded_phase, commit_docs.

UI_AUDITOR_MODEL=$(node "$GSD_TOOLS" resolve-model gsd-ui-auditor --raw)

Display banner:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 GSD ► UI AUDIT — PHASE {N}: {name}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. Detect Input State

SUMMARY_FILES=$(ls "${PHASE_DIR}"/*-SUMMARY.md 2>/dev/null)
UI_SPEC_FILE=$(ls "${PHASE_DIR}"/*-UI-SPEC.md 2>/dev/null | head -1)
UI_REVIEW_FILE=$(ls "${PHASE_DIR}"/*-UI-REVIEW.md 2>/dev/null | head -1)

If SUMMARY_FILES empty: Exit — "Phase {N} not executed. Run /gsd-execute-phase {N} first."

If UI_REVIEW_FILE non-empty: Use AskUserQuestion:

• header: "Existing UI Review"
• question: "UI-REVIEW.md already exists for Phase {N}."
• options:
  • "Re-audit — run fresh audit"
  • "View — display current review and exit"

If "View": display file, exit. If "Re-audit": continue.

2. Gather Context Paths

Build file list for auditor:

• All SUMMARY.md files in phase dir
• All PLAN.md files in phase dir
• UI-SPEC.md (if exists — audit baseline)
• CONTEXT.md (if exists — locked decisions)

3. Spawn gsd-ui-auditor

◆ Spawning UI auditor...

Build prompt:

Read $HOME/.claude/agents/gsd-ui-auditor.md for instructions.

<objective>
Conduct 6-pillar visual audit of Phase {phase_number}: {phase_name}
{If UI-SPEC exists: "Audit against UI-SPEC.md design contract."}
{If no UI-SPEC: "Audit against abstract 6-pillar standards."}
</objective>

<files_to_read>
- {summary_paths} (Execution summaries)
- {plan_paths} (Execution plans — what was intended)
- {ui_spec_path} (UI Design Contract — audit baseline, if exists)
- {context_path} (User decisions, if exists)
</files_to_read>

${AGENT_SKILLS_UI_REVIEWER}

<config>
phase_dir: {phase_dir}
padded_phase: {padded_phase}
</config>

Omit null file paths.

Task(
  prompt=ui_audit_prompt,
  subagent_type="gsd-ui-auditor",
  model="{UI_AUDITOR_MODEL}",
  description="UI Audit Phase {N}"
)

4. Handle Return

If ## UI REVIEW COMPLETE:

Display score summary:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 GSD ► UI AUDIT COMPLETE ✓
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

**Phase {N}: {Name}** — Overall: {score}/24

| Pillar | Score |
|--------|-------|
| Copywriting | {N}/4 |
| Visuals | {N}/4 |
| Color | {N}/4 |
| Typography | {N}/4 |
| Spacing | {N}/4 |
| Experience Design | {N}/4 |

Top fixes:
1. {fix}
2. {fix}
3. {fix}

Full review: {path to UI-REVIEW.md}

───────────────────────────────────────────────────────────────

## ▶ Next

`/clear` then one of:

- `/gsd:verify-work {N}` — UAT testing
- `/gsd:plan-phase {N+1}` — plan next phase

- `/gsd-verify-work {N}` — UAT testing
- `/gsd-plan-phase {N+1}` — plan next phase

───────────────────────────────────────────────────────────────

Automated UI Verification (when Playwright-MCP is available)

If mcp__playwright__* tools are accessible in this session:

1. Navigate to each UI component described in the phase's UI-SPEC.md using mcp__playwright__navigate (or equivalent Playwright-MCP tool).
2. Take a screenshot of each component using mcp__playwright__screenshot.
3. Compare against the spec's visual requirements — dimensions, color palette, layout, spacing scale, and typography.
4. Report any dimension, color, or layout discrepancies automatically as additional findings within the relevant pillar section of UI-REVIEW.md.
5. Flag items that require human judgment (brand feel, content tone) as needs_human_review: true in the findings — these are surfaced to the user separately after the automated pass completes.

If Playwright-MCP is not available in this session, this section is skipped entirely. The audit falls back to the standard code-only review described above. No configuration change is required — the availability of mcp__playwright__* tools is detected at runtime.

5. Commit (if configured)

node "$GSD_TOOLS" commit "docs(${padded_phase}): UI audit review" --files "${PHASE_DIR}/${PADDED_PHASE}-UI-REVIEW.md"

<success_criteria>

• Phase validated
• SUMMARY.md files found (execution completed)
• Existing review handled (re-audit/view)
• gsd-ui-auditor spawned with correct context
• UI-REVIEW.md created in phase directory
• Score summary displayed to user
• Next steps presented </success_criteria>