Agent skill · design visual · secondsky
design-review
7-phase frontend design review with accessibility (WCAG 2.1 AA), responsive testing, visual polish. Use for PR reviews, UI audits, or encountering contrast issues, broken layouts, accessibility violations, inconsistent spacing, missing focus states.
Why this skill is useful
Adds a systematic 7-phase design review methodology with specific testing procedures for accessibility and responsiveness that the AI wouldn't reliably generate on its own.
What it needs
Requires playwright, puppeteer installed locally. About 10k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Design Review Skill Status: Production Ready ✅ Last Updated: 2025-11-20 Dependencies: Playwright MCP or Chrome DevTools Methodology: 7-phase systematic review (inspired by Stripe, Airbnb, Linear) --- Quick Start 1. Prerequisites Check Before starting a design review, verify browser automation tools are available: Option A: Playwright MCP (recommended for interactive testing) See the playwright-testing skill for Playwright setup Provides browser automation, screenshots, viewport testing, console monitoring Option B: Puppeteer CLI (alternative for screenshots and performance) Install Puppeteer directly via npm install -g puppeteer Provides screenshot capture, performance analysis, network monitoring For complete browser tools reference, see references/browser-tools-reference.md. 2. Understand the Review Scope For PR reviews: For general UI reviews: Simply provide the preview URL and component/page description. 3. Execute 7-Phase Review Follow the systematic checklist below. Each phase has specific objectives and testing procedures. --- The 7-Phase Review Methodology Phase 0: Preparation Objective: Understand context and set up testing environment. Steps: 1. Read PR description or review request to understand: Motivation for changes Scope of implementation Testing notes from developer Expected behavior 2. Analyze code diff (if PR available): Identify modified files (components, styles, tests) 3. Set up live preview environment: Navigate to preview URL using browser tools Set initial viewport: 1440x900 (desktop) Take baseline screenshot for reference 4. Review design principles (if project has custom guidelines): Check project CLAUDE.md for design standards Review component library documentation Note design system tokens and patterns When to skip: For quick component reviews without git context. --- Phase 1: Interaction & User Flow Objective: Verify the interactive experience works as expected. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/design-review