mern-design-review

name	mern-design-review
description	Visual design review using Playwright screenshots against mern-styleguide.
argument-hint	[--base-url <url>] [--routes /,/settings] [--no-fix]
allowed-tools	Bash, Read, Glob, Grep, Write

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