skills.rest
TrevorEdris
TrevorEdrisCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Run Playwright-driven UI design reviews on frontend PRs.

2|1|Updated Jan 26, 2026
Search Tags:#accessibility#Playwright#design-principles#responsive-design#design-review#UI-testing#WCAG AA+
One-click install
npx skills add https://github.com/TrevorEdris/fellowship-of-the-workflows --skill design-review-trevoredris
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/TrevorEdris/fellowship-of-the-workflows/tree/main/workflows/skills/design-review
Command: npx skills add https://github.com/TrevorEdris/fellowship-of-the-workflows --skill design-review-trevoredris

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides automated, repeatable UI design reviews for front-end changes by running a structured Playwright-based evaluation to catch visual, accessibility, and interaction issues before merging.

Core Features & Use Cases

  • Seven-phase live UI review covering visual hierarchy, accessibility (WCAG AA+), responsive design, and interaction patterns.
  • Automates PR validation against design principles, design tokens, and responsive states, delivering a clear report.
  • Use case: When reviewing a PR with UI changes, run the skill to assess consistency with the design system and generate actionable feedback.

Quick Start

  • Provide the PR URL or branch context to initiate the review.
  • Ensure Playwright MCP server is connected and the skill has access to the repository context.
  • The agent will produce a markdown design report with embedded screenshots for reviewers.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate UI design reviews for frontend pull requests?▼

Automate UI design reviews for frontend pull requests by running a Playwright-driven evaluation that validates visual hierarchy, accessibility, and responsive behavior. The skill executes a live seven-phase review and outputs a structured markdown report with embedded screenshots for reviewers.

Can I check WCAG AA+ accessibility compliance automatically during a design review?▼

Check WCAG AA+ accessibility compliance automatically by integrating Playwright MCP to evaluate interaction patterns and visual hierarchy. The review targets frontend changes across desktop and mobile, validating against standardized design principles to ensure accessibility standards are met.

Does the Playwright MCP server need to be connected to review responsive design?▼

The Playwright MCP server needs to be connected to review responsive design and interaction patterns. You must also provide the PR URL or branch context and ensure the skill has access to the repository context to initiate the live UI evaluation.

What is included in a Playwright UI design review report?▼

A Playwright UI design review report includes structured markdown feedback with embedded screenshots for reviewers. It details findings across seven phases covering visual hierarchy, accessibility WCAG AA+, responsive design states, and interaction patterns to provide actionable feedback.

What's the best way to validate design tokens and visual hierarchy in a PR workflow?▼

Validate design tokens and visual hierarchy in a PR workflow by running a structured Playwright-based evaluation against standardized design-principles references. This live review checks frontend changes for consistency with the design system before merging, delivering a clear actionable report.

Related Skills

Explore More Design & Creative Skills→
rwxprojectrwxproject

mcp-tester

Test MCP server connectivity and tool execution across stdio, http, and sse transports.

Community
Advanced
adrianliechtiadrianliechti
4

design-critique

Identify usability, visual hierarchy, and accessibility issues in designs from Figma URLs, screenshots, or descriptions.

Community
Intermediate
ceslepceslep

react:components

Convert Stitch HTML/CSS/JS designs into Vite and React components.

Community
Intermediate
abhishekdutta18abhishekdutta18

browser-qa

Automate visual, functional, and accessibility testing of web pages.

Community
Intermediate