← ClaudeAtlas

pb-design-reviewlisted

Pre-merge UI design review for Codex. Use when the user asks for pb-design-review, a design review, visual review, UI review, pre-landing UI audit, or review of TSX, JSX, Vue, Svelte, Astro, CSS, SCSS, Tailwind, design-token, component, page, form, dashboard, card, navigation, modal, or app-shell changes. Audits the diff for design quality, accessibility, responsiveness, project-style consistency, AI-slop patterns, dead UI, and optionally runs a live screenshot critique when a URL is provided.
pixelbrew-studio/pb-suite · ★ 1 · Web & Frontend · score 74
Install: claude install-skill pixelbrew-studio/pb-suite
# pb-design-review Run one comprehensive UI review pass before merge. Combine practical UI design checks, art-direction critique, and the pb-suite severity model. Read the project before applying taste. A finding only matters if it violates the project's own design system, weakens the hierarchy, harms accessibility, breaks responsiveness, or introduces generic AI-looking output. Do not stage, commit, push, or open a PR. Auto-fix only local, obvious BLOCKERs. Ask before changing anything that is taste-adjacent or brand-shaping. ## Canonical source Before beginning, resolve the installed suite and read the complete canonical command. Its refusal flags, severity model, source references, and report requirements remain authoritative. ```bash source "$HOME/.codex/skills/pb-bootstrap.sh" ``` Read `$PB_SUITE/commands/pb-design-review.md`, then apply the Codex-native review detail below. Interpret arguments from the user's request; when the canonical command calls another slash command, apply the corresponding Codex skill procedure inline. ## 1. Determine Scope Find the base branch and the UI files changed against it: ```bash BASE=$(git merge-base HEAD origin/main 2>/dev/null || git merge-base HEAD main 2>/dev/null || git rev-parse HEAD~1) git status --short git diff --name-only "$BASE"...HEAD git diff --name-only ``` Include uncommitted UI changes. Review files matching: ```text *.ts *.tsx *.js *.jsx *.vue *.svelte *.astro *.css *.scss *.sass *.module.css tailwind.config.