1仕組みと動作原理
After Effectsからプロダクトへの架け橋として位置付け：ベクターアニメーションをJSONまたはzipコンテナにエンコードし、ランタイム側で再生することで解像度やプラットフォームから切り離す
skills/lottie-animation/SKILL.md
The bridge from After Effects to product: vector animation shipped as JSON (or zipped `.lottie`), tiny and resolution-independent, played by a runtime on web, iOS, Android, and React Native.
フォーマットの選択基準を明確化：.lottie（zipコンテナ、通常60〜80%軽量、複数アニメーションやテーマを同梱可能）を優先。lottie-webはレガシーな.jsonとSVGレンダラーを組み合わせる場面のみで使用する。
再生制御はフレーム・セグメント・モードの3点セットをコアAPIとし、load/complete/frameイベントを用いてステートマシン型のオーケストレーションを行う
skills/lottie-animation/SKILL.md
dotLottie.setSegment(30, 90); // constrain playback to a frame range (e.g. a "loading" loop)
checkedセグメントを再生し、completeをリッスンした後にsetSegmentでidleループに戻すといった、プロダクション品質のステートマシン実装パターンを提供する。
アニメーションライブラリ不要のスクロール駆動：autoplay:falseとスクロール進捗のフレームマッピング（0..1をclampしてtotal-1を乗算）、またはlottie-interactivityによる宣言的設定
skills/lottie-animation/SKILL.md
dotLottie.setFrame(p * (total - 1));
GSAPを導入することなくLottieでスクロールインタラクションを実現する手法であり、gsap-webに対する差別化要素となっている。
実行時テーマ切り替えの2つのアプローチ：.lottie内蔵の名前付きテーマ（setTheme/loadTheme、再エクスポート不要）と、layers[].shapes[]を手動走査してカラー値を書き換える脆弱なパッチ処理
skills/lottie-animation/SKILL.md
load the JSON, walk `layers[].shapes[]` and patch `c.k` color arrays (normalized 0–1 RGBA), then init the player with the modified object. Brittle
推奨される手法（themes）と最終手段を明確に区別し、脆弱なパッチ処理が通常の手法として誤用されるのを防ぐ。
エクスポート側のチェックリストを提供：Bodymovinのエクスポート手順、AEエクスプレッション、および大半のエフェクトが未サポートである既知のギャップを提示し、プレビューでは正しいのにプロダクト上で崩れる主因を解明
skills/lottie-animation/references/integration-and-export.md
**Expressions** — not evaluated by runtimes. Bake expression-driven motion to keyframes (Bodymovin can pre-render some) or remove. Heavy-expression rigs are the #1 source of "looks wrong in product".
移植不可能な機能を項目ごとに列挙して代替案を提示することは、このパイプラインにおいて最も見落とされやすく、かつ最も価値の高い部分である。
2コア機能
01Web統合の2系統（@lottiefiles/dotlottie-webネイティブおよびdotlottie-reactラッパー）
02再生制御とイベント（play/pause/stop/setSpeed/setMode/setFrame/setSegmentおよびload/complete/frame）
03スクロールおよびインタラクション駆動（手動の進捗マッピング、またはlottie-interactivityのscroll/hover/click/cursorモード）
04実行時のテーマ設定とカラー変更（内蔵テーマ優先、手動パッチは最終手段）
05モバイル環境への対応（lottie-ios / lottie-android / lottie-react-nativeにおける同等の進捗・セグメント概念）
06最適化チェックリスト（.lottie優先、IntersectionObserverによる遅延再生/一時停止、レンダラー選定、AEコンポジションの軽量化、複数エクスポートを回避する実行時カラー変更）
07フレーム単位のフリーズ検証ハーネス（?t=NをsetFrameに渡し、終了フレームの基準としてtotalFramesを読み取る）
08AE未サポート機能リストと代替策（エクスポート前のセルフチェック）
09ビルド不要（ゼロビルド）納品（バンドラー不要で、ランタイムを読み込む単一HTML）
10アクセシビリティ基準：prefers-reduced-motion環境下ではループの自動再生を行わず、静止フレームまたは再生コントロールを提供する
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | @lottiefiles/dotlottie-web（首选现代运行时：canvas 加 WASM） |
| package | @lottiefiles/lottie-interactivity（声明式交互模式） |
| package | lottie-web（遗留 .json 加 SVG 渲染器路径） |
| network | 交付页从 CDN 取 dotLottie 运行时（产物期引用，不判级；正文未点名具体域） |
| package | 移动端运行时：lottie-ios / lottie-android / lottie-react-native |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言: 実行時の外部通信はゼロ。本文の例に含まれるfetch("/icon.json")はローカルアセットを取得する相対パスであり、外部送信には非該当
- 本地工作目录: ファイル読み書きおよび成果物出力: 本スキルディレクトリ内へのディスク書き込みはゼロ。納品物は自己完結型の単一.html（ランタイム＋canvas＋相対パスの.lottie/.jsonまたはdata URL）
監査ノート： 。評価判定はスキル自体のディレクトリ（skills/lottie-animation/ = SKILL.md + 0バイトのREADME.md + references/integration-and-export.md、findで全件照合済み）のみに基づいて実施：スクリプトなし、認証情報なし、ディスク書き込みなし、実行時の外部通信なし（fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( に対するトークンスキャンにおいて、唯一の該当は本スキルreferences内のfetch("/icon.json")であるが、これはローカルアセットを取得する相対パスであり外部通信ではない）。本文中に言及されているnpmパッケージ（ユーザープロジェクト側で導入）やCDNランタイム（成果物内で参照され、特定のドメインに固定されていない）は評価判定に影響しない。
5二重目の独立検証
- [unlocatable] .lottie 比 .json 小 60–80% 这一数字 — SKILL.md 写 .lottie often 60–80% smaller，但源码内无基准、无样例文件（本 skill 目录不含任何 .lottie/.json 资产），属外部经验值，记为文档声明，不作已验证事实。
- [ok] 唯一的 fetch( 命中是否构成外发 — references/integration-and-export.md 的 const json = await fetch("/icon.json").then((r) => r.json()); 使用相对路径，取同源本地资产（用于手动改色），不构成网络外发；该写法位于 Manual color patching (last resort) 小节，正文亦标注为脆弱手段。
- [ok] 运行时 API 名称是否自洽（setFrame/setSegment/setMode/totalFrames） — SKILL.md 的 Playback control 段、Quick reference 表、冻结 harness 段与 references 第 1、3 节对同一组方法名（setFrame/setSegment/setSpeed/setMode/setTheme/totalFrames/play/pause/stop）表述一致，并明确区分 lottie-web 的 goToAndStop(N, true) 等价写法。
- [discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根；且本 skill 的冻结单位是帧（?t=42），而 seek-shot.sh 把 ?t= 当秒数传参——即使路径正确，语义也需按帧自行换算。
6結論
最適な用途： 最適な用途：① デザイナーが作成したAEアニメーションをWeb / iOS / Android / React Nativeに実装する納品フロー。② ループイラスト、オンボーディング画面、空状態（Empty State）、アイコンマイクロインタラクション、ステートマシン型再生（ローディングから成功への遷移など）。③ スクロール、ホバー、クリック、カーソル追従で制御するベクターアニメーション。④ 単一のアニメーション資産を使い回すための実行時テーマ/カラー切り替え。⑤ リリース後の崩れを未然に防ぐためのAEエクスポート前セルフチェックリストの策定。
不向きな用途： 非推奨の用途：① コードネイティブな制御を必要とする複雑なタイムラインやスクロール連動ストーリーテリング（gsap-webを推奨）。② CSS/SVGの手書きのみで完結する軽量なアイコンアニメーション（svg-animationを推奨）。③ ランタイムファイルの持ち込みや読み込みが困難なオフライン環境。④ ベイク処理されていない大量のAEエクスプレッションや未サポートのエフェクトに依存しているアセット（プロダクション環境で確実に描画が崩れるため、本スキルでは自動修復できず再作成を促すのみとなる）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload lottie-animation.tar.gz
sha256:
Option B · Copy Guide for Agentd36e9095939adbd5…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.