Skills
.Work. You
Rest

mern-design-review

Community

Visual MERN UI review with automated screenshots.

Software Engineering#playwright#ui-testing#screenshot#breakpoints#design-review#visual-regression#mern
Authoredfenton
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Capture and evaluate UI designs across multiple breakpoints to ensure MERN applications adhere to the mern-styleguide.

Core Features & Use Cases

  • Multi-breakpoint screenshots across mobile, tablet, and desktop using Playwright.
  • Visual design evaluation against the mern-styleguide, including typography, spacing, color, and accessibility checks.
  • Issue reporting and optional auto-fix workflow; after review, re-run tests to confirm improvements.
  • Use cases include QA validation for Next.js and MERN projects, design reviews, and regression testing.

Quick Start

Start the design-review workflow by launching the dev server and running the Playwright-based design review test to generate the screens and assessments.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mern-design-review
Download link: https://github.com/edfenton/claude-skills/archive/main.zip#mern-design-review

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.