Mern design review

Skill edfenton/claude-skills/mern/mern-design-review

A collection of Claude Code skills for iOS, MERN, NEAN, and shared development workflows

Install

npx -y skills add edfenton/claude-skills --skill mern-design-review

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Visual design review using Playwright screenshots against mern-styleguide.

SKILL.md

1.9 KB, as published. Nobody here has run it

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