boo-critiquing-frontend

Critiquing Frontend

Size

Classify small/medium/large from the number of components, screens, or flows to critique. Default: small (single component or screen). At medium+, dispatch user-experience-designer. Accept $size override.

Process

1. Read references/design-guidance.md for the canonical design rules (color, typography, layout, motion, interaction, absolute bans, AI slop test).
2. Run ls frontend/src/components/ui/ and only reference primitives that exist. If the directory does not exist or is empty, stop and report.
3. Apply the design guidance from references/ against each component or screen.
4. If size is medium or larger, dispatch user-experience-designer for a full UX audit.
5. Group findings by severity and produce the report.

What NOT to do

• Do not use this skill for backend code review. Use boo-reviewing-code.
• Do not use this skill to build new UI. It critiques existing interfaces; building is boo-building-ui's job.

Gotchas

• BooLab primitive rule: run ls frontend/src/components/ui/ and only reference primitives that exist. If missing, stop and report.
• Anti-cream / serif default-aesthetic: for dashboards and tools, avoid recommending cream backgrounds or serif type as a default aesthetic. The warm-neutral AI default (cream/sand/beige body bg) is a tell; recommend neutral or brand-aligned palettes instead.
• Evidence rule: every critique cites a specific component file:line and names the UX principle violated.

• Subagent visibility: when the Paseo MCP tools (mcp__paseo__*) are available, spawn each agent persona as an attached Paseo subagent with create_agent (detached: false, notifyOnFinish: true; for an opencode provider also pass settings.modeId: "build" and settings.features.auto_accept: true) so every persona appears in the operator's Paseo agent track. Resolve each persona's provider/model from the active preset's agents map in ~/.paseo/orchestration-preferences.json; supervise on the finish notification (never poll) and read each result with get_agent_activity.
• Subagent fallback: when the Paseo MCP tools are not available, use the platform's native subagent dispatch. On a platform with no subagent dispatch at all (for example Pi), read each agents/<name>.md persona and apply its lens in sequential passes.
• Subagent concurrency: honor the active preset's concurrency value in ~/.paseo/orchestration-preferences.json. When it is 1 (local heavy-weight presets, around 27b/35b or larger on a single llama-swap server), dispatch subagents STRICTLY ONE AT A TIME: launch one, wait for its finish notification and read its result, then launch the next. This overrides any parallel fan-out. Absent or higher concurrency means parallel fan-out is fine.

• No commit: never commit, push, or stage changes; never git add -A. Prove any edits with git diff --stat.
• No em dashes: never use em dashes (U+2014) in output or files you write.

Output format

# Frontend Critique: <target>

## Severity Summary

| Severity     | Count |
|--------------|-------|
| Broken       | N     |
| Inconsistent | N     |
| Polish       | N     |

## Findings

### Broken

**B1: <title>**
- **Location:** `component/file.tsx:line`
- **Principle violated:** <UX principle, WCAG criterion, or design rule>
- **Issue:** <description>
- **Suggested fix:** <concrete change>

### Inconsistent

**I1: <title>**
- **Location:** `component/file.tsx:line`
- **Issue:** <description>
- **Suggested fix:** <concrete change>

### Polish

**P1: <title>**
- **Location:** `component/file.tsx:line`
- **Issue:** <description>
- **Suggested fix:** <concrete change>

## Claims I did not verify
- <anything assumed or not checked>

Failure modes

• No frontend code to critique: the repo has no frontend source. Report and stop.
• UI primitives directory missing: run ls frontend/src/components/ui/ fails. Report the actual path and stop.
• Design guidance cannot be loaded: references/design-guidance.md is missing. Report and stop.