메뉴
Grimodex のUIにアニメーション・トランジションを追加／修正する。 Framer Motion と GSAP の使い分け、Reduced Motion ガード、 共有定数（DURATIONS/EASINGS/VARIANTS）の利用を強制する。 Use when: 「アニメ追加」「動き付けて」「トランジション」「UIを磨いて」 「もっと滑らかに」「ホバーで動かして」などと言われたとき。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | polish-motion |
| description | Grimodex のUIにアニメーション・トランジションを追加／修正する。 Framer Motion と GSAP の使い分け、Reduced Motion ガード、 共有定数（DURATIONS/EASINGS/VARIANTS）の利用を強制する。 Use when: 「アニメ追加」「動き付けて」「トランジション」「UIを磨いて」 「もっと滑らかに」「ホバーで動かして」などと言われたとき。 |
| allowed-tools | Read, Write, Edit, Grep, Glob, Bash |
アニメーションを足す／直す前に、この規律に従ってください。
次のいずれかに該当しない場合は動かさない。
目的なしのアニメは執筆者の注意を削る。Grimodex は長時間の執筆セッションで使われることを忘れない。
迷ったら Framer Motion (motion/react)。GSAP は理由が要る。
| ケース | 使う |
|---|---|
| マウント／アンマウント、条件付き表示 | Framer Motion (AnimatePresence) |
| ドロップダウン、ポップオーバー、ダイアログ | Framer Motion + VARIANTS.* |
| タイムライン（複数ステップの連続演出） | GSAP |
| 無限ループ（pulse / shimmer / yoyo） | GSAP |
| stagger が絡む大規模演出 | GSAP |
| SVG path / Canvas / 要素外プロパティ | GSAP |
違反はレビューで差し戻し。
OS prefers-reduced-motion とアプリ設定 display.reduceMotion の両方を見る。
// React コンポーネント（Framer Motion 側）
import { useReducedMotion } from "@/lib/animation";
const reduced = useReducedMotion();
// 命令型 GSAP
import { isReducedMotion } from "@/lib/gsap";
if (isReducedMotion()) return;
Reduced Motion のときは動きを弱めるのではなく、静的な最終状態に置き換える。
duration / easing は src/lib/animation.ts の定数を使う。
DURATIONS.fast (0.15s): ホバー・フォーカスリングDURATIONS.normal (0.2s): パネル・ポップオーバー開閉DURATIONS.slow (0.3s): 大きめの空間移動DURATIONS.dialog (0.25s): モーダルEASINGS.easeOut / EASINGS.springVARIANTS.fadeIn / slideUp / scaleIn / dropdown / popover新しい値が必要になったら animation.ts に追加してから使う。呼び出し側にべた書きしない。
GSAP 側もこの値域に揃える（fast 0.15 / normal 0.2 / slow 0.3）。
React コンポーネント内では useGSAP() を使う（@gsap/react）。
import { useGSAP } from "@gsap/react";
useGSAP(() => {
if (isReducedMotion()) return;
gsap.fromTo(ref.current, { opacity: 0 }, { opacity: 1, duration: 0.2 });
}, { dependencies: [trigger] });
useEffect で生に書くなら gsap.context() + ctx.revert()。例外なし。
src/lib/gsap.ts の以下で足りないか確認する。
celebrationBurst — 成功の瞬間shimmerSweep — ロード中のハイライトstaggerFlourish — リスト入場pulseHighlight — 注意喚起足りない場合は呼び出し側にべた書きしないで src/lib/gsap.ts に追加する。
詳細と具体例は aesthetics.md 参照。
*.out を既定、跳ねる系はセッション数回まで — ease-in 単体は禁止transform-origin を意図的に設定動かすプロパティは transform / opacity / filter / clip-path に限定。
width / height / top / left / box-shadow は最小限（tour のハイライトのような意図的な場面のみ）。
DURATIONS / EASINGS / VARIANTS を使った（新値は animation.ts に追加）useGSAP or gsap.context() cleanup があるGrimodex の Electron リリースバージョンを上げ、リリースノート、commit、 branch、PR、merge、注釈付き Release tag、GitHub Draft Release の確認まで進める。 Release は公開せず、Draft のまま停止する。 「バージョン上げて」「パッチ／マイナー／メジャーバージョン」 「リリースタグ」「リリース準備して」で使用する。
バグを調査・修正する。再現→原因特定→修正→検証の順で進める。 Use when: 「デバッグして」「修正して」「エラーが出る」「動かない」 と言われたとき。一般のPR／master CI、ランタイムエラー、型エラーの修正に使う。 Electron release workflow、tag build、署名、公証、publishの失敗はdebug-release-ciへ渡す。
Grimodex の Electron release workflow、tag build、署名、公証、 installer migration、artifact 集約、publish の失敗を、version と tag を増やさず診断・修正する。 「release CI失敗」「release workflow失敗」「tag build失敗」「署名／公証エラー」 「packaging失敗」「publish失敗」「成功済みplatformを再buildしたくない」で使用する。
現在の clean かつ commit 済み作業ブランチを push し、ready PR の作成または再利用、 CI・レビュー・HEAD の確認、squash merge、base branch への反映確認まで進める。 「PR出して」「プルリク作って」「pushしてマージ」「マージまでして」 「shipして」「リモートに上げてPR」で使用する。commit作成自体は行わない。 version更新を含むリリース準備は bump-version を主フローとし、release commit後の branch push、PR、mergeだけを担う。GitHub Releaseは公開しない。
docs/communication-style-guide.md を正本として、Grimodex の公開向け文章を 事実ベースで作成・改稿し、特に日本語／英語のリリースノートの意味、深刻度、 対応方法を一致させる。「リリースノートを書いて／直して」「日英の更新記録」 「リリース告知」「延期・障害・保守告知」「広報文」「SNS告知」 「README冒頭」「公式サイト見出し」「開発状況報告」で使用する。 Issue、PR、コミットメッセージ、UI文言、エラーメッセージと復旧手順、 API・IPC・MCP・CLI仕様、開発者向けセットアップ、法務文書、 セキュリティアドバイザリの技術詳細には使用しない。
Grimodex の AI 指示、system prompt、Codex skill、AI policy、AI 経路レジストリ、 評価 fixture と品質 manifest を作成・変更し、正本、Iron Laws、契約テスト、 追跡可能性を一貫して更新する。AI behavior asset の追加・変更、 「AI指示」「システムプロンプト」「Codexスキル」「AI評価fixture」で使用する。 一般的な UI／DB／IPC／Rust 機能実装、テストだけの追加、レビューだけの依頼、 バグ修正には使用しない。