design-review

Audits live websites for visual design issues and fixes them with atomic commits.

107|7|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/no-session/pstack --skill design-review-no-session
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/no-session/pstack/tree/main/design-review
Command: npx skills add https://github.com/no-session/pstack --skill design-review-no-session

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Live sites accumulate visual inconsistencies, spacing problems, hierarchy issues, and AI-generated-looking patterns that erode user trust, and manually auditing every page is slow and subjective. This Skill performs a designer-grade visual QA pass on a running site, then fixes each issue in source code with atomic commits and before/after screenshot verification. ## Core Features & Use Cases - Systematic design audit: Visits 5-8 pages (or 10-15 in deep mode), captures screenshots, and grades typography, spacing, hierarchy, and interaction quality against a checklist calibrated to your DESIGN.md. - Iterative fix loop: Fixes each finding in source code, commits atomically, and re-verifies with before/after screenshots so every change is reviewable and revertible. - Diff-aware and regression modes: On a feature branch, scopes the audit to pages affected by your changes; with a prior baseline, compares grades to catch design regressions. - Use Case: Before launching a landing page redesign, run the audit on localhost to catch misaligned sections, inconsistent button styles, and slow interactions, then let it fix and commit each issue automatically. ## Quick Start Ask the assistant to run a design review on http://localhost:3000 and fix any visual issues it finds.

Frequently Asked Questions about design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a visual design audit on my website?

Point the skill at a URL such as http://localhost:3000 or a production domain. It navigates 5-8 pages, takes screenshots, grades design dimensions, then fixes findings in source code with atomic commits and before/after verification.

What is the difference between design-review and plan-design-review?

design-review audits a live, running site and fixes issues in code after implementation. plan-design-review runs in plan mode before implementation, rating design dimensions of a written plan and fixing the plan itself.

Can I audit only the pages changed on my feature branch?

Yes. When invoked on a feature branch without a URL, diff-aware mode analyzes git diff against main, maps changed files to affected routes, detects a running local app, and audits only those pages.

Why does design-review require a clean git working tree?

Each design fix gets its own atomic commit so changes are individually reviewable and revertible. If the tree is dirty, the skill stops and offers to commit or stash your changes before proceeding.

Does design-review work with authenticated pages?

Yes. You can provide sign-in credentials or import cookies. In CDP mode it connects to your real browser, which already holds your sessions, so cookie import steps are skipped.

When should I not use automated design review?

Avoid it when no runnable site exists yet, since it audits rendered pages rather than static code. For pre-implementation feedback, use plan-mode design review on the written plan instead.