Can I use the Design Review skill for git Pull Requests?

Yes, it can analyze git diffs to understand the scope of changes and provide targeted feedback on UI/UX modifications.

Is this skill suitable for design system compliance?

Absolutely. It checks for the use of design tokens, consistent spacing scales (like 8px), and typography hierarchy to ensure alignment with your design system.

What accessibility standards does this skill check for?

The skill follows WCAG 2.1 AA guidelines, specifically checking for color contrast, keyboard navigation, semantic HTML, and proper ARIA attributes.

Does this skill require external browser tools?

Yes, it is designed to work with Playwright MCP or Chrome DevTools to perform live browser automation, screenshots, and console monitoring.

How does it handle responsive testing?

The skill triggers browser resizing to standard desktop, tablet, and mobile dimensions to detect layout breaks, horizontal scrolling, and touch target issues.

Design Review

Name: Design Review
Author: secondsky

bysecondsky

•

Design Tools

Performs systematic 7-phase frontend design audits covering accessibility, responsiveness, and visual polish.

The Design Review skill empowers Claude Code to conduct comprehensive UI audits and PR reviews using a rigorous 7-phase methodology inspired by industry leaders like Stripe and Airbnb. It automates the evaluation of accessibility (WCAG 2.1 AA), responsive layouts across multiple viewports, interaction states, and visual consistency, ensuring production-ready frontend code that meets high aesthetic and functional standards. By integrating with browser automation tools, it provides actionable feedback on everything from color contrast to keyboard navigation traps.

Key Features

0121 GitHub stars

027-phase systematic UI audit methodology for consistent reviews

03Visual polish evaluation including typography, spacing, and hierarchy

04Automated accessibility checking for WCAG 2.1 AA compliance

05Multi-viewport responsive testing (Desktop, Tablet, Mobile)

06Deep integration with Playwright and Chrome DevTools for live testing

Use Cases

01Verifying responsive behavior and layout integrity across device sizes

02Auditing existing pages for accessibility violations and contrast issues

03Conducting comprehensive design reviews on Pull Requests before merging

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills design-review

For use in Claude.ai and ChatGPT

Download Skill