メニュー
Start here for user-facing UI/visual work — layout, visual hierarchy, composition, states, and accessibility — and to verify a rendered change actually looks right.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need a systematic approach to finding and fixing the root cause rather than guessing.
Start here to ship built-and-tested code to its target safely — release steps, rollout, smoke checks, and rollback.
Start here to settle how a non-trivial change will be built — interfaces, contracts, file-level structure, and trade-offs.
Records decisions and documentation. Use when making architectural decisions, changing public APIs, shipping features, or when you need to record context that future engineers and agents will need to understand the codebase.
Start here to document what shipped — READMEs, API docs, ADRs, and usage — once a feature lands or an interface changes.
| name | visual-design |
| description | Start here for user-facing UI/visual work — layout, visual hierarchy, composition, states, and accessibility — and to verify a rendered change actually looks right. |
| context | fork |
| agent | graphic-designer |
Design and verify the user-facing surface. Work from the user's task, design the whole composition and every state, meet accessibility, then LOOK — render it, screenshot it, and judge the real result.
LOOK before declaring done. A passing test and a clean console do not prove it looks right — the screenshot is the test. Judge the whole composition, not just what you changed, and iterate on the screenshot until it's genuinely good.
The UI (built or specified), plus screenshots of the real rendered result at the relevant breakpoints, and a note on the states and accessibility checks covered. Definitions: ../../GLOSSARY.md.
