# Design Review (design-review)

> Audits a live site with a designer's eye for inconsistency, spacing, hierarchy, AI slop and slow interactions, then fixes and re-checks each finding.

- Category: [UI & Interaction](https://www.myskills.tools/en/categories/ui-interaction/)
- Source: Community · Garry Tan
- Repository: https://github.com/garrytan/gstack/tree/main/design-review (commit ed10791 · v2.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/design-review/SKILL.md
- Install command: `npx skills add garrytan/gstack --skill design-review`
- License: MIT
- Compatible with: Claude Code, Codex, Cursor, Copilot
- Permissions: read-repo ✓, write-files ✓, shell ✓, network ✓
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.
- ⚠ Commits every fix to git (and may commit or stash your uncommitted work first), and drives your signed-in browser session.

## Core rule

Make the minimal fix for each finding in its own commit, and revert any fix that causes a regression.

## Execution Phases

1. **Set up** — Pick the target URL (or diff-aware scope on a feature branch), read DESIGN.md or code tokens, and require a clean git working tree.
2. **Audit the design** — Using browser screenshots, record a first impression, extract the rendered design system, run the per-page checklist, then review flows and cross-page consistency.
3. **Triage and fix** — Sort by impact, apply minimal CSS-first fixes with one commit each and re-test; stop and ask when risk exceeds 20%, with a hard cap of 30 fixes.
4. **Final audit and report** — Re-audit affected pages, compute before and after scores, write a report with fix status and before/after shots, and update TODOS.md.

## Permissions (summarised from SKILL.md)

| Capability | Needed | Details |
|---|---|---|
| File writes | Limited | Edits only source files tied to a finding, plus new regression tests, reports and an accepted DESIGN.md; never CI config or existing tests. |
| Command execution | Required | Runs git, browser-driving scripts (Aside or gstack's browser), gstack helper tools and test commands. |
| Network outbound | Required | Loads the target site, may use WebSearch, and can ask Codex for an outside opinion. |

## SKILL.md frontmatter (YAML)

```yaml
---
name: design-review
preamble-tier: 4
version: 2.0.0
description: "Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack)"
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - AskUserQuestion
  - WebSearch
triggers:
  - visual design audit
  - design qa
  - fix design issues
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/design-review/