Agent skill · design visual · julianoczkowski
design-review
Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building.
Why this skill is useful
Provides a structured process for conducting design reviews, ensuring consistency and accessibility checks that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-07-06. 492 stars on the source repository.
What this skill does
This skill runs a structured design review of what has been built, measured against the design brief and the chosen aesthetic philosophy. CRITICAL — Visual Screenshot Capture You MUST capture screenshots of the running application as part of every design review. Code review alone is insufficient — you need to see what the user sees. Follow the screenshot capture protocol in Step 3 below. This is not optional. Example prompts "Review what I just built" "Run a design critique on the landing page" "Check this against the brief" "Here's a screenshot. How does it look?" [paste screenshot] "QA pass before I ship this" Process 1. Read the brief. Look for the active feature's brief at .design/<feature-slug>/DESIGNBRIEF.md. If multiple feature folders exist under .design/, ask the user which feature to review. If no .design/ folder exists, fall back to DESIGNBRIEF.md in the project root. If neither exists, ask the user what the intended design direction was. 2. Explore the built code. Examine every component, page, and style file that was created or modified. Scan specifically for: All new or modified components and their relationship to pre-existing components Token/variable usage: are components using shared tokens or hardcoding values? Duplicate components that should be consolidated File naming and organization: do new files follow the project's conventions? Understand what was actually built, not what was planned. 3. Capture screenshots of the running application. This step is mandatory. Do not skip it. Do not rely only on user-provided screenshots. Screenshot Tool Priority Try each option in order. Use the first one that is available: 1. Playwright MCP (preferred). Check if the plugin-playwright-playwright MCP server is available. If it is, use it — it gives you precise control over viewport sizing, full-page captures, and file naming. 2. Cursor IDE Browser (second choice). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianoczkowski/design-review