1仕組みと動作原理
カラーパレットは主観的な議論を数量的規律で代替する：主色1 ＋ 強調色1 ＋ ニュートラル2〜3。コントラストと階層は色相の乱立ではなく明度／彩度で構成する。
skills/color-motion/SKILL.md
Limit hues. A strong motion palette is **1 primary + 1 accent + 2-3 neutrals**.
ここでの目的：「配色が綺麗かどうか」を実行可能な構築ルールに落とし込む。次段では、ダークテーマにおける強調色になぜ最大彩度ではなく中・低彩度＋高明度を用いるべきかを詳解する。
補間は必ず知覚的均等色空間（OKLCH/OKLab/Lab）で行う——sRGBの線形補間は中間点がグレー／濁りに沈む。
skills/color-motion/SKILL.md
Linearly interpolating two colors in sRGB passes through a desaturated, often gray or muddy midpoint (blue->yellow goes through gray; blue->red through muddy purple).
ここでの目的：最も一般的な症状である「グラデーションの濁り」のメカニズムを示し、CSSの `linear-gradient(in oklch, …)` や @property 登録（次項参照）に直接対応づける。
「高級感」のあるグラデーションはインスピレーションではなく配合式：複数放射グラデーションの重ね合わせ ＋ ノイズ粒子 ＋ 8〜20秒の低速ドリフト。
skills/color-motion/SKILL.md
- **Animate slowly**: drift gradient positions over 8-20s with `ease-in-out alternate`. Slow is premium; fast gradient motion looks like a screensaver.
ここでの目的：「高級感」を3つの実行可能なアクション（遅さ・重ね合わせ・粒子付加）に定量化し、周期の範囲と根拠（高速＝スクリーンセーバー感）を提示する。
色が瞬間的に変化せず滑らかにトゥイーンするには、@property による登録が必須（未登録のCSSカスタムプロパティは離散的な急激変化となる）。
skills/color-motion/SKILL.md
`@property` registration is what makes the color actually interpolate (unregistered custom properties jump instantly).
ここでの目的：極めて一般的なCSSの落とし穴を解説し、そのままコピー可能な登録と transition のスニペットを提供。これは「単一HTMLファイル納品」を成立させる技術的前提でもある。
カラーグレーディングは順序が重要：露出／ホワイトバランス → コントラスト → 中間調／彩度 → スプリットトーニング → 全体統一。順序が変われば結果も変わる。
skills/color-motion/SKILL.md
Apply grading operations in this order; reordering changes the result:
ここでの目的：カラーグレーディングを「スライダー操作」から依存関係のあるパイプラインへ昇格させ、定番のシネマティックレシピ（ティールシャドウ ＋ オレンジハイライト、節度を保持）を提示する。
レンダーのカラーマネジメントは「プレビューは正常だが書き出しが薄い/白茶ける」原因を、映像素材ではなく4段階のガンマ不整合（作業スペース、埋め込みタグ、プレイヤーの解釈、システムディスプレイ）に帰属させる。
skills/color-motion/SKILL.md
the cause is a gamma/transfer mismatch across four stages — AE working space, the render's embedded tag, the player's interpretation, and the display/OS gamma — not the artwork.
ここでの目的：問題の切り分け思考（素材ではなく伝送経路に起因）を提供し、検証可能な数値的手法（50%グレーパッチを配置し、書き出し後に128→150+へ持ち上がっていれば過剰なブライト化を証明）と ffprobe によるタグ検査をセットにする。
検収環境としてQuickTimeを避ける：Chrome/Premiere/Resolveを正とする。
skills/color-motion/SKILL.md
**Never grade or approve to QuickTime** — Chrome, Premiere, or Resolve is the correct reference for web delivery.
ここでの目的：「同じファイルなのに2箇所で見え方が異なる」際の判定基準をWeb納品側のプレイヤーに明確に委ね、QuickTime基準でグレーディングした結果ブラウザで破綻する事態を防ぐ。
納品ループは「単一HTMLファイル ＋ 静止フレームスクリーンショット」：?t=N の負の遅延でアニメーションを指定秒に固定し、フレーム単位でバンディングや中間点の濁りを検証して反復修正する。
skills/color-motion/SKILL.md
**Verify loop — render → freeze → screenshot → check:**
ここでの目的：「アニメーション系ビジュアル生成物をエージェントがどう検証するか」を確定的なフローに変換する。その後 npx playwright で撮影（external_deps 参照。本skillがオレンジ判定となる要因）。
2コア機能
01カラーパレット構築：OKLCH表記、同等の視覚的重量を持つ色相回転、主色色相へのニュートラルの微小チント
02グラデーションレシピ集：2ストップ／メッシュ（複数放射）／円錐／ドリフトアニメーション／バンディング除去用粒子ノイズ
03知覚的補間とパレットコード：culori / d3-interpolate / @property の3つの実装アプローチ
04カラーグレーディング順序チェックリストと実装レイヤー（CSS filter 高速版 / GLSL スプリットトーニング）
05動画／レンダーカラーマネジメント：意思決定ツリー、AEプロジェクトおよび出力モジュール設定、プラットフォーム別書き出しカラータグ、QuickTimeガンマ回避
06数値検証：50%グレーテストパッチ法 ＋ ffprobe による color_primaries/color_transfer/color_space 検査
07スタンドアロンHTML納品規約（単一ファイル、単一アニメーション駆動、freeze harness、reduced-motion）
08検収ループ：レンダリング → 静止 → スクリーンショット → バンディング/中間点濁り検査 → その場で反復再撮影
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx playwright screenshot（冻结帧截图，验收回路唯一命令） |
| cli | 打包助手 scripts/seek-shot.sh 与 scripts/contact-sheet.sh（仓库根，不在本 skill 目录；内部同样走 playwright 截帧 + ffmpeg 拼图） |
| package | culori（感知插值示例与色相路径控制） |
| package | d3-interpolate / d3-scale-chromatic（Lab/HCL 插值与色阶量化） |
| network | 交付 HTML 的可选 CDN 引用（仅当需要 JS 插值库时才引；属产物期由浏览器加载） |
| cli | ffprobe / ffmpeg（校验内嵌色彩标签 color_primaries / color_transfer / color_space） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx playwright screenshot --wait-for-timeout=500 "file://$PWD/color.html?t=
- 网络端点: 外部ネットワークアクセスの宣言: npx パッケージ解決：playwright が未インストールの場合は npm registry から playwright パッケージを取得（初回は Chromium バイナリもダウンロード）
- 本地工作目录: ファイル読み書きおよび成果物出力: frame-mid.png / frame-0.png などのスクリーンショットファイルがカレント作業ディレクトリに書き込まれる（playwright による出力であり、skill コードによるものではない）。
監査ノート： オレンジ判定（要確認）のトリガーは「サードパーティのリモートパッケージ／イメージへの依存」：SKILL.md の検収ループで `npx playwright screenshot …` が直接指定されており、ローカルに playwright がキャッシュされていない場合は npm registry からパッケージを取得し、初回実行時に Chromium バイナリをダウンロードする（同リポジトリ内の logo-animation、remotion-video と同様の判定基準）。認証情報の読み取り、環境変数、業務API、TLSダウングレード、回避行為は一切含まれず、トリガー条件は明確（playwright 未インストール／未キャッシュ時のみネットワーク取得が発生し、事前インストール後は完全ローカル実行）。なお、本文中で参照されている scripts/seek-shot.sh および contact-sheet.sh はリポジトリのルートに位置し本skillディレクトリ外であるため、判定基準に従い risks への記載にとどめ評価レベルの変更は行わない。
5二重目の独立検証
- [ok] npx playwright 是否真的写在 SKILL.md（橙档关键证据） — SKILL.md 的 Verify loop 步骤 4 之后给出该命令原文（含 --wait-for-timeout=500 与 file://$PWD/color.html?t=8）；同段第 3 步要求检查 banding 与浑浊中点。命令是验收回路的组成部分，不是可选项。
- [discrepancy] 正文引用的 scripts/ 助手是否随本 skill 目录分发 — SKILL.md 写「**Packaged helper** (`scripts/`)」，但 pin 目录下 skills/color-motion/ 只有 SKILL.md、references/、0 字节 README —— `scripts/` 实际在**仓库根**（scripts/README.md 自述为 verify-loop toolkit）。因此只装单个 skill 目录的镜像包里该引用悬空；同名写法也出现在 logo-animation、motion-background、remotion-video。对 pin commit 有效，属真实出入。
- [ok] 是否有其他隐藏的执行路径（下载/接口调用） — 全目录搜 curl/wget/fetch/XMLHttpRequest/api/child_process/process.env：零命中；唯一网络相关字符串是 npx 与交付 HTML 的 CDN 说明。
- [ok] culori / d3-interpolate 是否只是代码示例而非被执行的依赖 — 两处 import 均在 references/palettes-and-interpolation.md 的 Perceptual interpolation in code 小节内，作为给实现者抄的片段；skill 无 package.json、无安装步骤、不解析这些模块。
- [unlocatable] 颜色管理结论（QuickTime gamma、四段链路）是否可在源码内验证 — 这些是有明确立场的技术断言，但 pin 仓库内没有引用来源、没有测量脚本或样本文件；本次只读侦查也不运行渲染。文中给出的自证方法（50% 灰补丁回读、ffprobe 查 tag）用户可自行复现，故不视为空口断言，但数值本身未在本次核对。
- [ok] iart.ai 链接的性质 — reference 页脚为署名/营销链接（utm_source=github&utm_content=skill_footer），无跟踪脚本、不参与执行。
6結論
最適な用途： モーショングラフィックスの配色やグラデーション背景の作成、真に滑らかなカラー遷移（ボタン状態、テーマ切り替え、ローダー）が必要な場面、「グラデーションの濁り／バンディング」の修正、AE書き出し後の白茶けやクロスプラットフォームでの色の不一致の解決、書き出しカラータグ決定に適している。また、スクリーンショット検収が可能なスタンドアロンHTMLのカラーサンプル納品パイプラインにも最適。
不向きな用途： 不向きな用途：① 厳密なオフライン環境でnpmパッケージを取得できない環境（検収ループが失敗するか、playwright の事前インストールが必要）；② HDR／広色域の完全なカラーサイエンスが必要な場合（Rec.709/sRGBおよびPQ/HLGの書き出しヒントレベルまでに限定）；③ skill自体にフレーム切り出しスクリプトが同梱されていることを期待する運用（本ディレクトリ内に scripts/ は存在しない）；④ 実際の動画レンダリングやエンコード機能が必要な場合（after-effects / remotion カテゴリの領域であり、本skillは色決定と検証のみを対象とする）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload color-motion.tar.gz
sha256:
Option B · Copy Guide for Agentcb1e39e4a0e5b855…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.