skills.rest
Expanly
ExpanlyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-review

Automate visual design review of React/Tailwind interfaces with Playwright.

Updated Aug 27, 2026
Search Tags:#accessibility#React#UI#Playwright#visual-design#design-review
One-click install
npx skills add https://github.com/Expanly/expanly-claude-code-agents --skill design-review-expanly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Expanly/expanly-claude-code-agents/tree/main/plugins/ui-designer/skills/design-review
Command: npx skills add https://github.com/Expanly/expanly-claude-code-agents --skill design-review-expanly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual designers and QA engineers spend time auditing UI visuals and accessibility. This Skill automates design reviews of rendered React/Tailwind interfaces using Playwright to produce actionable reports.

Core Features & Use Cases

  • Visual inspection automation: render pages, capture screenshots, gather accessibility tree, and generate comprehensive reports.
  • Accessibility and design validation: verify color contrast, typography, spacing, and visual harmony against established guidelines.
  • Use Case: Given a dashboard built in React, run design-review to produce a report detailing issues and recommended fixes.

Quick Start

Use the design-review skill to analyze a live page at https://example.com and generate a design-review report.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate visual UI reviews for a React application?▼

Playwright tooling automates visual UI reviews by rendering React pages, capturing screenshots, and gathering accessibility trees. It validates color contrast, typography, and spacing to output a structured report with actionable fixes.

Can I run automated accessibility audits on live deployments using Playwright?▼

Yes, automated accessibility audits can run on live deployments using Playwright. The process applies to React and Tailwind interfaces across development stages, auditing components and live pages to generate a comprehensive report detailing issues.

Does the design review process work with Tailwind-based interfaces?▼

Yes, the design review process works with Tailwind-based interfaces. It audits rendered React components and pages to validate typography, spacing, and visual harmony, applying established guidelines to produce a detailed report of recommended fixes.

What is included in an automated visual design and accessibility report?▼

An automated visual design and accessibility report includes captured screenshots, the gathered accessibility tree, and a detailed list of identified issues. It provides actionable fixes for color contrast, typography, spacing, and visual harmony problems.

Do I need Playwright installed to audit UI components for visual and accessibility issues?▼

Yes, Playwright tooling is required to audit UI components for visual and accessibility issues. The review process uses Playwright to render React pages, capture screenshots, and extract the accessibility tree for analysis.

Related Skills

Explore More Design & Creative Skills→
one-ieone-ie
129

ai-elements

Build and deploy composable agentic UIs for React and Astro.

Official
Advanced
hongmaple0820hongmaple0820
9

ux-ui-design-system

Audit interfaces for WCAG 2.2 AA compliance and design consistency.

Community
Advanced
sudo-vaibhavsudo-vaibhav
1

frontend

Scaffold cohesive React and Tailwind design systems with bold typography and color accents.

Community
Basic
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced