메뉴
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).