メニュー
Design review for front-end code changes using Playwright for live browser testing. Covers visual hierarchy, accessibility (WCAG AA+), responsive design, and interaction patterns. Use when reviewing UI/UX changes before merge.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Identify and remove AI slop from code comments, documentation, and prose. Use when cleaning up AI-generated output, reviewing for AI tells, or improving signal-to-noise ratio in any text.
Adversarial code review that assumes the worst. Finds failure modes, race conditions, blast radius, and edge cases that optimistic reviewers miss. Use when you want brutal honesty about code resilience.
Perform thorough code review on a PR using the Pragmatic Quality framework. Integrates with Jira to validate implementation matches ticket requirements. Use when reviewing pull requests or providing PR feedback.
Validate implementation plans for completeness, specificity, and actionability. Catches vague language, missing sections, and untestable outcomes.
Interactive PRD creation and iteration for non-technical users. Use this skill whenever the user wants to define product requirements, write a PRD, spec out a feature, describe what to build, or says "what should we build", "write requirements", "create a PRD", "define the product". Also use when updating an existing PRD based on stakeholder or engineering feedback. Guides through structured requirement definition using plain-language facilitation prompts with discovery questions upfront. Auto-validates with /prd-validator after completion.
Translates an approved PRD into a unified ROADMAP.md with phased feature descriptions and implementation checklists. Use this skill whenever an engineer receives a PRD and needs to break it into phases, when the user asks "how do I turn this PRD into a plan", "create a roadmap from requirements", or "decompose this into milestones". Gates on PRD validation — refuses to proceed if the PRD hasn't passed /prd-validator.
| name | design-review |
| description | Design review for front-end code changes using Playwright for live browser testing. Covers visual hierarchy, accessibility (WCAG AA+), responsive design, and interaction patterns. Use when reviewing UI/UX changes before merge. |
| context | fork |
| agent | design-review |
| model | sonnet |
| allowed-tools | Bash(git diff:*), Bash(git log:*), Bash(git show:*), Bash(git status), Bash(git branch:*), Bash(gh pr view:*), Bash(gh pr diff:*), Grep, Glob, LS, Read, WebFetch, TodoWrite, mcp__playwright__browser_close, mcp__playwright__browser_resize, mcp__playwright__browser_console_messages, mcp__playwright__browser_handle_dialog, mcp__playwright__browser_evaluate, mcp__playwright__browser_file_upload, mcp__playwright__browser_install, mcp__playwright__browser_press_key, mcp__playwright__browser_type, mcp__playwright__browser_navigate, mcp__playwright__browser_navigate_back, mcp__playwright__browser_network_requests, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot, mcp__playwright__browser_click, mcp__playwright__browser_drag, mcp__playwright__browser_hover, mcp__playwright__browser_select_option, mcp__playwright__browser_tabs, mcp__playwright__browser_wait_for |
| tags | ["review"] |
Review the pending front-end changes for design quality.
GIT STATUS:
!`git status`
PR METADATA:
!`gh pr view --json title,body,author,files,additions,deletions,headRefName,state 2>/dev/null || echo "No PR context - reviewing local branch"`
FILES MODIFIED:
!`gh pr diff --name-only 2>/dev/null || git diff --name-only origin/HEAD...`
DIFF CONTENT:
!`gh pr diff 2>/dev/null || git diff --merge-base origin/HEAD`
Use the design-review agent to review the UI/UX changes above. Execute the 8-phase review process (including AI slop check) with live browser testing. Your final reply must contain the markdown report with screenshots.
references/DESIGN_PRINCIPLES.md — Design philosophy and quick review checklistreferences/ai-slop-test.md — AI generation fingerprint checklistreferences/typography.md — Modular scales, font selection, loadingreferences/color-and-contrast.md — OKLCH, tinted neutrals, dark mode, contrastreferences/spatial-design.md — Spacing systems, grids, hierarchy, container queriesreferences/motion-design.md — Duration ladder, easing curves, reduced motionreferences/CLAUDE_MD_SNIPPET.md — CLAUDE.md integration guideFor finer-grained design commands (audit, normalize, polish, bolder, harden, and 15 more), consider installing the impeccable plugin alongside FOTW. Impeccable provides actionable design steering commands and a persistent project design context file (.impeccable.md).