Mern Design Review

Purpose

Capture screenshots at multiple breakpoints and evaluate against mern-styleguide. Report issues, then (with approval) fix and run tests to confirm.

Arguments

• --base-url <url> — App URL (default: http://localhost:3000)
• --routes <paths> — Comma-separated routes (default: discover from app/**/page.tsx)
• --no-fix — Report only, don't offer to fix

Workflow

1. Setup

• Ensure dev server running (pnpm dev)
• Discover routes if not specified (scan for page.tsx files)

2. Capture screenshots

Use Playwright to capture each route at:

• Mobile: 390×844
• Tablet: 834×1194
• Desktop: 1440×900

Save to playwright-artifacts/design-review/ (don't commit).

3. Evaluate against mern-styleguide

Review each screenshot for:

• Responsiveness — intentional adaptation, not just stacking
• Typography — no banned fonts, contributes voice
• Spacing/hierarchy — premium feel, clear visual order
• Color — uses semantic tokens, proper contrast
• Accessibility — visible focus states, adequate tap targets
• Anti-patterns — no unchanged shadcn defaults, card nesting, decorative effects

For each issue, note:

• Route and viewport
• Severity: must-fix | should-fix | nice-to-have
• What violates mern-styleguide
• Concrete fix

4. Report results

Summary of screens/viewports reviewed + findings by severity.

5–6. Approval gate, fix and confirm

See /shared-review-workflow for severity definitions, approval gate protocol, and fix constraints. After fixes, re-capture affected screenshots and run /mern-unit-test.

Reference

For Playwright setup, screenshot scripts, and evaluation checklist, see reference/mern-design-review-reference.md

Converted and distributed by TomeVault — claim your Tome and manage your conversions.