What browser tools does it use?

It utilizes the Playwright CLI to automate browser interactions, capture screenshots, and validate different viewport tiers.

How does it handle subjective opinions?

It uses a confidence scoring system (1-10) to suppress subjective aesthetic opinions and focus on measurable failures or documented design system violations.

What accessibility standards are checked?

It performs automated axe-core scans and manual keyboard sequence checks to ensure compliance with WCAG 2.1 AA standards.

Can I specify where the reports are saved?

Yes, you can provide an optional output directory argument; otherwise, reports default to the ./reviews/design/ directory.

Does this skill require a live server?

Yes, the skill follows a 'Live Environment First' methodology and requires a local dev server or staging URL to perform browser-based testing.

Design Reviewer

Name: Design Reviewer
Author: joaquimscosta

byjoaquimscosta

•

디자인 도구

Conducts comprehensive UI/UX audits and accessibility checks using live environment testing and Playwright automation.

The Design Review skill transforms Claude into a high-caliber design critic, performing deep audits of web interfaces for visual polish, responsiveness, and accessibility compliance. By integrating with Playwright for live browser testing and following a rigorous 7-phase methodology, it identifies layout shifts, design system violations (WCAG 2.1 AA), and interaction bugs. It moves beyond static code analysis to provide evidence-based feedback with prioritized findings, ensuring high-quality user experiences that match the standards of industry leaders like Stripe and Airbnb.

주요 기능

01Responsive validation across 7 viewport tiers from mobile to ultra-wide

02Live environment testing of interactive states and user flows

03Automated accessibility scans for WCAG 2.1 AA compliance

04Visual consistency analysis against design tokens and system rules

059 GitHub stars

06Evidence-based reporting with confidence scoring and prioritized triage

사용 사례

01Accessibility compliance checking for enterprise and public-facing web apps

02Pre-deployment UI/UX audits to ensure visual fidelity and responsive behavior

03Systematic review of frontend PRs to enforce design system consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins design-review

For use in Claude.ai and ChatGPT

주요 기능

01Responsive validation across 7 viewport tiers from mobile to ultra-wide

02Live environment testing of interactive states and user flows

03Automated accessibility scans for WCAG 2.1 AA compliance

04Visual consistency analysis against design tokens and system rules

059 GitHub stars

06Evidence-based reporting with confidence scoring and prioritized triage

사용 사례

01Accessibility compliance checking for enterprise and public-facing web apps

02Pre-deployment UI/UX audits to ensure visual fidelity and responsive behavior

03Systematic review of frontend PRs to enforce design system consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins design-review

For use in Claude.ai and ChatGPT