skills.rest
edfenton
edfentonCOMMUNITY
Explore all skills by this author →
Website𝕏@edfentonGitHub

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
One-click install
npx skills add https://github.com/edfenton/claude-skills --skill nean-design-review
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
pckienuitpckienuit

webapp-testing

Automate Playwright-driven web application testing with route discovery and accessibility checks.

Community
Intermediate
edfentonedfenton
3

ios-unit-test

Run iOS unit and UI tests with xcodebuild and report failure details.

Community
Advanced
edfentonedfenton
3

nean-styleguide

Define NEAN design tokens, typography, spacing, and component patterns.

Community
Advanced
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced