nean-design-review

Capture UI screenshots across breakpoints with Playwright and evaluate against the nean-styleguide.

3|1|Updated Feb 12, 2026

Search Tags:#playwright #ui-testing #breakpoints #design-review #visual-testing #nean-styleguide

Ready to run

npx skills add https://github.com/edfenton/claude-skills --skill nean-design-review

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nean-design-review
Source: https://github.com/edfenton/claude-skills/tree/main/nean/nean-design-review
Command: npx skills add https://github.com/edfenton/claude-skills --skill nean-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Capture and evaluate UI design across breakpoints to ensure visual consistency against the nean-styleguide.

Core Features & Use Cases

Breakpoint-driven screenshots with Playwright to validate layout across mobile, tablet, and desktop
Styleguide conformance evaluation focusing on typography, spacing, color, and accessibility
Approval gate workflow to apply fixes and re-run tests before merging

Quick Start

Run the design review workflow to capture screenshots across breakpoints and compare them to the nean-styleguide.

Frequently Asked Questions about nean-design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate visual design review across mobile, tablet, and desktop breakpoints?▼

Playwright captures breakpoint-specific screenshots of your UI across mobile, tablet, and desktop. The captured screenshots are evaluated against the nean-styleguide to validate typography, spacing, color, and accessibility.

How does Playwright screenshot testing ensure styleguide conformance?▼

Playwright screenshot testing enforces styleguide conformance by capturing UI layouts across breakpoints and evaluating them against the nean-styleguide. This validates typography, spacing, color, and accessibility before merging feature deployments.

Do I need Playwright and a configured base URL to run a design review?▼

Yes, running a design review requires Playwright, a configured base URL, and an angular-like route map. These prerequisites allow the workflow to discover routes and capture screenshots across mobile, tablet, and desktop breakpoints.

Can I use Playwright UI testing to validate NEAN UI refreshes before merging?▼

Yes, Playwright UI testing validates NEAN UI refreshes by capturing breakpoint screenshots and enforcing an approval gate workflow. This allows you to apply fixes and re-run visual tests before merging feature deployments.

What is visual testing for styleguide conformance in Angular-like applications?▼

Visual testing for styleguide conformance is the process of capturing UI screenshots across breakpoints to evaluate visual consistency. It validates typography, spacing, color, and accessibility against the nean-styleguide for Angular-like applications.