design-review

Name: design-review
Availability: InStock
Author: Expanly

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

Updated Aug 27, 2026

Search Tags:#accessibility #React #UI #Playwright #visual-design #design-review

Ready to run

npx skills add https://github.com/Expanly/expanly-claude-code-agents --skill design-review-expanly

💬 Prompt for ChatGPT / Claude Chat▼

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.