skills.rest
bobbo01
bobbo01COMMUNITY
Explore all skills by this author →
GitHub

design-review

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

Updated Mar 16, 2026
Search Tags:#typography#screenshots#frontend#design review#atomic commits#ui audit#visual qa
One-click install
npx skills add https://github.com/bobbo01/B2BPlatform --skill design-review-bobbo01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/bobbo01/B2BPlatform/tree/main/.agents/skills/gstack-design-review
Command: npx skills add https://github.com/bobbo01/B2BPlatform --skill design-review-bobbo01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Live websites accumulate visual inconsistencies, spacing problems, hierarchy issues, and generic AI-generated patterns that manual review often misses. This Skill performs a designer's-eye 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 - Visual QA Audit: Reviews live pages for typography, spacing, visual hierarchy, AI slop patterns, and slow interactions using a headless browser. - Iterative Fix Loop: Fixes each issue in source code, commits atomically, and re-verifies with before/after screenshots. - Diff-Aware Mode: On a feature branch with no URL given, automatically scopes the review to changed pages. - Design System Calibration: Reads DESIGN.md when present so deviations from the project's stated design system are flagged at higher severity. - Use Case: Before shipping a new settings page, run the review against localhost to catch misaligned gutters, inconsistent heading scales, and sluggish interactions, then get each fix as its own commit. ## 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 design review on my local website?▼

Point the skill at a running URL such as http://localhost:3000 and it audits pages with a headless browser. It captures screenshots, identifies visual issues, fixes them in source code, and commits each fix atomically.

What visual issues does a design QA audit catch?▼

The audit catches spacing inconsistencies, typography and hierarchy problems, AI slop patterns, and slow interactions. It also flags deviations from your project's DESIGN.md design system at higher severity.

Can I review only the pages changed on my feature branch?▼

Yes. If you run the review on a feature branch without providing a URL, it enters diff-aware mode and scopes the audit to pages affected by your branch changes. On main or master it asks for a URL instead.

Does the design review require a clean git working tree?▼

Yes. The skill stops if uncommitted changes exist because each design fix gets its own atomic commit. You can choose to commit or stash your changes before the review begins.

What happens if my project has no DESIGN.md file?▼

The review falls back to universal design principles for typography, spacing, and hierarchy. It also offers to create a DESIGN.md from the design system it infers from your existing pages.

Related Skills

Explore More Design & Creative Skills→
MWest2020MWest2020

performance

Diagnose and optimize web page performance using Core Web Vitals and browser traces.

Community
Advanced
ceratops-codeceratops-code

ceratops-codex-skill-stage-release

Merge task-worktree branches into a local release branch and validate the staged batch.

Official
Advanced
langgeniuslanggenius

rams

Reviews code files for WCAG accessibility violations and visual design issues.

Official
Intermediate
whd4whd4

plan-design-review

Score design plans on UX criteria and generate concrete fixes.

Community
Advanced