design-review

A frontend design review systematically evaluates UI across seven phases: preparation, interaction, responsiveness, polish, accessibility, robustness, and code health. This Skill automates the process using Playwright or Chrome DevTools to check contrast, layouts, focus states, spacing, and behavior across desktop, tablet, and mobile—satisfying WCAG 2.1 AA standards and catching accessibility issues before production.

Yes. This Skill integrates with Playwright MCP or Chrome DevTools to automate PR reviews and UI audits, generating screenshots and structured reports. It runs through all seven phases with hands-on checklists, eliminating manual review gaps and ensuring consistent evaluation of responsive design and visual polish.

The seven phases are preparation, interaction testing, responsiveness validation, visual polish assessment, accessibility compliance, robustness checks, and code health review. Together they identify contrast failures, broken layouts, missing focus states, spacing inconsistencies, and interactive behavior defects across all screen sizes.

Yes. The Skill includes automated WCAG 2.1 AA compliance checks as part of its accessibility phase, analyzing contrast, focus states, and interactive behavior to ensure your frontend meets technical accessibility requirements alongside responsive design and visual quality.

You need either Playwright MCP or Chrome DevTools to power the automated checks. The Skill handles the seven-phase workflow, generating screenshots and reports for desktop, tablet, and mobile scenarios without additional manual setup.

Design tokens are referenced throughout the review to validate visual consistency—checking spacing, colors, typography, and interactive states against your defined token system. This ensures the UI adheres to design specifications alongside responsive and accessibility standards.