메뉴
Verify UI changes by rendering and looking — screenshot, browser, or running app — never by reading the markup and imagining it. Use after any change to components, styles, layouts, templates, charts, emails, or generated documents/images.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Resolve ambiguous requests by investigating, choosing the best-supported reading, and stating the interpretation — instead of guessing silently or blocking on questions. Use whenever a request has multiple plausible readings or an unstated parameter (which file, which env, how thorough, what format).
Treat any change to a public or shared interface — exported functions, HTTP endpoints, CLI flags, config formats, event/message schemas, DB schemas — as a contract change with consumers you can't see. Use before modifying anything other code depends on.
When recommending between options, match the strength of the claim to the strength of the evidence — commit when evidence is clear, say it's a coin flip when it is. Use whenever the user asks "which should I use", "what's the best way", "A or B?", or you're proposing a design choice.
Fast recon before changing unfamiliar code — instructions → manifest → tree → trace one flow end-to-end → git archaeology → imitate the newest precedent. Use when starting in a repo or module you haven't touched this session, or before designing against an existing architecture.
Async/concurrent/streaming discipline — five questions (overlapping runs, check-then-act, mutation across await, response ordering, cancellation), idempotent retries, shared-state audit, race amplification. Use for async fan-out, streams/SSE, jobs, caches, or flaky timing-smell bugs.
Externalize working state to files so long tasks survive context compaction and interruption. Use at the start of any task likely to exceed ~30 minutes or span many files, and again whenever a major phase completes or the plan changes.
| name | verify-ui-visually |
| description | Verify UI changes by rendering and looking — screenshot, browser, or running app — never by reading the markup and imagining it. Use after any change to components, styles, layouts, templates, charts, emails, or generated documents/images. |
Code that compiles tells you nothing about what the user sees. "The JSX looks right" is the UI equivalent of "should work" (see verify-before-done).
mcp__chrome-devtools__take_screenshot, or the project's snapshot setup), open the generated PDF/image/email HTML. Reading the diff is not seeing the output.Rule: a UI change reported as done carries either a screenshot-verified claim or a stated inability to verify. Never the silent middle.