AgentSkillsCN

mern-design-review

利用 Playwright 截屏，对照 mern-styleguide 对视觉设计进行审查。

SKILL.md
--- frontmatter
name: mern-design-review
description: Visual design review using Playwright screenshots against mern-styleguide.
argument-hint: "[--base-url <url>] [--routes /,/settings] [--no-fix]"
disable-model-invocation: true
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
  • •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