skills.rest
PedroLages
PedroLagesCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Automate UI and accessibility validation through live browser testing for React components.

Updated Feb 28, 2026
Search Tags:#ui#accessibility#playwright#responsive#browser testing#ux
One-click install
npx skills add https://github.com/PedroLages/TripFlow-Next --skill design-review-pedrolages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/PedroLages/TripFlow-Next/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/PedroLages/TripFlow-Next --skill design-review-pedrolages

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, git, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers and designers validate UI and UX changes by performing comprehensive live browser tests, ensuring consistency and accessibility compliance.

Core Features & Use Cases

  • Design Validation: Verifies that UI updates adhere to the design system and improve user experience.
  • Accessibility Checks: Tests for WCAG 2.1 AA+ conformance, including keyboard navigation and contrast analysis.
  • Responsive Testing: Assesses layout performance across different devices by resizing browser views.
  • Use Case: When updating a webpage's styling, use this Skill to confirm the changes are accessible and responsive without manual test efforts.

Quick Start

Use the design-review skill to automatically test the latest UI changes in the development environment.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate accessibility testing for React components?▼

Automate accessibility testing by running live browser tests that check React components against WCAG 2.1 AA+ standards, including keyboard navigation and contrast analysis. This validates UI updates without manual test efforts.

Can I use Playwright to check responsive design across different devices?▼

Playwright can check responsive design by resizing browser views to assess layout performance across different devices. This live browser testing verifies that UI updates remain responsive and consistent.

Do I need git integration to validate UI changes?▼

Git integration is required to detect recent code changes for UI validation. The Skill uses git to identify which React components or web pages have been updated before running browser automation tests.

What's the best way to ensure UI consistency after updating a webpage's styling?▼

The best way to ensure UI consistency is through live browser testing that verifies design system adherence and accessibility compliance. This confirms styling updates are responsive and accessible automatically.

Does browser testing work for catching contrast and keyboard navigation issues?▼

Browser testing catches contrast and keyboard navigation issues by evaluating accessibility standards during live validation. It tests WCAG 2.1 AA+ conformance to ensure UI updates improve user experience.

Related Skills

Explore More Design & Creative Skills→
srstompsrstomp
8

browser-verification

Automate browser verification of UI changes with Playwright to detect visual regressions and runtime errors.

Community
Intermediate
guichefferguicheffer
3

web-accessibility

Enforce WCAG 2.1 AA compliance using semantic HTML, ARIA attributes, axe-core, and jest-axe automated tests.

Community
Intermediate
NVIDIA-NeMoNVIDIA-NeMo
58

visual-dev

Automate visual regression testing and UI implementation with Playwright MCP browser automation.

Official
Intermediate
smarmen86smarmen86

canary

Monitor live web applications for console errors and visual regressions post-deployment.

Community
Advanced