メニュー
Use when browser work needs UI transitions, scroll choreography, GSAP, Motion, canvas, WebGL, responsive motion, or reduced-motion behavior.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when a user explicitly requests an independent review, challenge pass, or second opinion on a rendered website or animation artifact. Produces one bounded evaluator report and evidence verdict; it never auto-starts another build pass.
Use when a website task involves visual direction, existing-project discovery, animation, browser verification, or delivery and the smallest bounded route is not yet explicit.
Use when a user gives one sentence, a vague idea, or a loose brief and wants a finished website route. Turns "I want something like X" into an explicit bounded route, a verified artifact, and an honest handoff without autonomous review loops.
Use when claiming a visible, responsive, interactive, scroll-led, canvas, WebGL, or animated browser result is complete and fresh evidence is needed.
Use when website or browser-motion work is being delivered, packaged, released, transferred to another contributor, or described as complete.
Use when a landing page, portfolio, product story, or editorial site lacks a clear visual premise, hierarchy, material direction, or meaningful critique target.
| name | motion-choreography |
| description | Use when browser work needs UI transitions, scroll choreography, GSAP, Motion, canvas, WebGL, responsive motion, or reduced-motion behavior. |
Motion is useful only when it clarifies hierarchy, a narrative beat, feedback, or state. Choose the smallest lane that owns the behavior: CSS for polish, UI motion for component state, a scroll system for choreography, and canvas/WebGL for a real scene.
Give each node one transform owner. If effects must combine, split wrappers rather than letting CSS, a motion library, scroll code, and a render loop write the same property.
For meaningful motion, define trigger, enter, active, exit, cleanup, mobile alternative, and a prefers-reduced-motion route. Mobile is a smaller story, not a compressed desktop timeline.
Use ../../references/motion-choreography.md for routing and ../../templates/motion-brief.md before building non-trivial behavior.
