1仕組みと動作原理
「実行可能なコードを内包する」タイプのSkill：SKILL.mdには3つの技術（CSSグラデーションキーフレーム、Three.jsによるGLSLフラグメントシェーダー、Canvas 2Dパーティクル）の完全な実行可能実装がインライン化されており、エージェントは成果物にコピーするだけですぐに利用可能——機能は外部サービスではなくインラインコードによって実現されます。
skills/motion-background/SKILL.md
This skill is self-contained: every technique below ships its own runnable code — CSS, GLSL, and canvas — with no external dependencies beyond Three.js where a shader is involved.
設計ルールには「グラデーションで十分な場合はCSSをデフォルトにする」と規定——コスト階層（無料のCSS < CPU負荷のcanvas < GPU負荷のshader）に基づいて技術を選定し、コードブロックそのものを資産として扱います。
シームレスなループ再生は厳密な技術要件：CSSは始点と終点のキーフレームの一致に依存し、canvas/JSはloop phase=(t%PERIOD)/PERIOD×2πでsin/cosを駆動して周期末尾で正確に巻き戻し、shaderはノイズのスクロールをノイズ空間内の閉じた円として設計します。
skills/motion-background/SKILL.md
Any motion built only from `sin`/`cos` of `phase` (or integer multiples) loops seamlessly.
リファレンスにあるオーロラのuPhase円周トリック（vec2(cos(uPhase), sin(uPhase))が2πで原点に戻る）により、「見た目の継ぎ目のなさ」を運任せではなく決定論的な数学として実現しています。
パフォーマンスとアクセシビリティをコードレベルの規律として徹底：devicePixelRatioを最大2に制限、120点超のパーティクル間接続ではO(n²)から空間ハッシュへ切り替え、prefers-reduced-motionでは静止フレームへフォールバック、visibilitychangeとIntersectionObserverで画面外や非表示時に描画を一時停止します。
skills/motion-background/SKILL.md
honor `prefers-reduced-motion`, and pause when offscreen or the tab is hidden.
SKILL.mdの5つのコアテクニック第5節とリファレンスのattachLifecycleコントローラーでrunningトグルを統合。「静止フレームを1枚描画して停止」することで、reduced-motionユーザーに対しても静止背景を確実に提供します。
納品規約＝単一ファイルHTML：背景、フォアグラウンドテキストのサンプル、単一のアニメーションドライバー、決定論的フレームキャプチャ用の?t=N freeze harnessをすべてインライン化し、ブラウザで開くだけで即座に動作します。
skills/motion-background/SKILL.md
A motion background ships as **one `.html` file that opens directly in a browser** — markup, the background, and (for shader/canvas) Three.js or canvas JS from CDN, all inline.
freeze harnessはURLの?t=Nパラメータを使用してCSSのanimation-delay/play-stateやシェーダーのuTimeを指定時刻に固定し、ヘッドレススクリーンショットによる決定論的な検証を可能にします。
自己完結型の検証ループ：リポジトリのscripts/にseek-shot.sh（npx playwrightで?t=Nフレームをキャプチャ）とcontact-sheet.sh（ffmpegでコンタクトシートを作成）が用意されており、SKILL.mdは開始・中間・終了の3フレームをキャプチャして品質、アーティファクト、ループの継ぎ目を検証することを要求します。
skills/motion-background/SKILL.md
**Packaged helper** (`scripts/`): `scripts/seek-shot.sh anim.html 0 1.5 3` freezes the `?t=N` harness and screenshots each moment; `scripts/contact-sheet.sh sheet.png frame-*.png` tiles them for one-glance review. See `scripts/README.md`.
本リポジトリで最も「エンジニアリング化」されたSkillです。納品は目視に頼らず、決定論的なフレームキャプチャとコンタクトシート検査によって保証されます。scripts/はリポジトリルートに配置されています（Skillディレクトリ内ではなく、リポジトリ全体で共有される資産）。
詳細な実装はreferences/background-recipes.mdに集約：マルチblob CSSメッシュ（blur＋screenブレンド）、マウス視差と真のシームレスループを備えた完全なオーロラ、グリッド最適化とマウス反発を備えた星座フィールド、閉じたパスのノイズスクロール、統合ライフサイクルマネージャーを網羅しています。
skills/motion-background/SKILL.md
references/background-recipes.md — fuller drop-in implementations: a richer multi-blob CSS mesh with blur, the complete Three.js aurora shader with mouse parallax and a true seamless-loop time wrap
SKILL.mdには「必要十分なバージョン」、recipesには「本番対応バージョン」（エクスポート可能な関数やクリーンアップ処理を含む）を収録した、2段階の深度設計となっています。
2コア機能
01CSSメッシュグラデーション背景（JS不要、background-positionキーフレーム、継ぎ目のないループ、reduced-motion時のアニメーション無効化）
02GLSLオーロラ/ノイズグラデーションシェーダー（Three.jsフルスクリーンクアッド、fbm値ノイズ、uTime駆動）
03Canvasパーティクルコンステレーション（距離連線、境界跳ね返り、O(n²)から空間ハッシュへの最適化ガイダンス）
04決定論的なシームレスループ：phase巻き戻し＋周期関数駆動＋整数ノイズグリッドスクロール
05reduced-motion/画面外/非表示タブ向けの省電力：静止フレームへのフォールバック＋IntersectionObserver/visibilitychangeによる一時停止
06パフォーマンス上限設定：devicePixelRatio min(dpr, 2)、モバイル向けパーティクル数削減
07納品検証：単一ファイルHTML＋?t=N freeze harness＋seek-shot/contact-sheetフレームキャプチャコンタクトシート検証ループ
08リファレンスの本番向けレシピ：視差オーロラ、マウス反発コンステレーション、ライフサイクルマネージャー、ノイズフロースクロール
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | three.js（交付 HTML 运行时依赖；仅 shader 路线，CDN 或 bundler 引入） |
| cli | npx playwright screenshot（验证闭环；seek-shot.sh 内部调用，首次运行自动拉取 Chromium） |
| cli | ffmpeg（contact-sheet.sh 依赖，本地拼图） |
| cli | 仓库 scripts/seek-shot.sh、contact-sheet.sh（POSIX bash 本地工具） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: SKILL.mdはエージェントに対しリポジトリ内スクリプトの実行を指示：`scripts/seek-shot.sh anim.html <t...>`（内部でnpx playwrightを実行）
- 网络端点: 外部ネットワークアクセスの宣言: Skill自体の実行パスに外部へのネットワーク送信はなし（スクリーンショットの対象はローカルのfile:// HTML）。Playwrightの初回実行時にChromiumをダウンロードする可能性あり（seek-shot）
- 本地工作目录: ファイルの読み書きと成果物の出力: 作業ディレクトリに成果物bg.htmlを出力（単一ファイル出力規約）
監査ノート： 挙動＝ローカル読み書き＋ローカルCLI：エージェントはインライン化されたコードに基づいて単一ファイルHTMLを出力（ローカル書き込み）し、リポジトリ付属のbashスクリプト（Playwrightでローカルのfile://をキャプチャ、FFmpegで結合）を用いて検証します。認証情報の読み込み、自発的な外部ネットワーク通信、破壊的な操作はありません。留意点：①納品されたシェーダーページをブラウザで開く際、CDNからthree.jsを読み込むため、サプライチェーン依存はユーザーのブラウザ側に生じます（バージョン固定が望ましい）。②Playwrightの初回実行時にChromiumバイナリをダウンロードします（初回のみ、ローカル）。③リポジトリルートのscripts/を含めずにSkillディレクトリ単体のみを導入した場合、seek-shot/contact-sheetへの参照が孤立します（リポジトリ全体を含めて導入する必要があります）。黄色（定常的な外部ネットワーク通信なし）およびオレンジ色の基準には該当しません。
5二重目の独立検証
- [ok] 脚本引用真实性 — SKILL.md 引用的 scripts/seek-shot.sh、contact-sheet.sh、scripts/README.md 在仓库根存在；seek-shot.sh 输出 frame-<t>.png 与 SKILL.md 用法一致。
- [ok] 『no external dependencies beyond Three.js』反查 — SKILL.md/recipes 未出现其他 import/外部 URL 请求（CDN 仅以文字提及 three.js）；CSS/canvas 路线零依赖属实。
- [ok] 无凭证/无隐藏网络调用 — token/curl/exec 类扫描零命中；playwright 只访问 file:// 本地页；唯一网络相关=playwright 首跑下载 Chromium（一次性工具安装）与交付页打开时 CDN 加载。
- [discrepancy] 打包粒度风险（scripts/ 不在 skill 目录） — skill 自述依赖的验证脚本位于仓库根 scripts/；若通过 skills.sh 只安装单个 skill 目录（不含 repo 根），scripts/ 引用与 .claude-plugin 打包关系悬空——从源码无法确认各安装方式的粒度，展示层应提示按整 repo/pack 安装。
- [ok] 代码正确性抽查（无缝循环/暂停逻辑） — phase 回卷公式、首尾关键帧一致、uPhase=2π 圆环回原点、IntersectionObserver running 逻辑在 SKILL.md 与 recipes 中一致；未发现逻辑矛盾。
6結論
最適な用途： ランディングページ、ログイン画面、空状態向けに「繊細なループアニメーション背景」を作成したいエージェントやフロントエンド開発者に最適。CSS/canvas/shaderの3段階のコピペ可能なコードと検証ワークフローが必要な場合や、特にreduced-motion対応とバッテリー効率が求められる本番サイトに適しています。
不向きな用途： 外部サービスを利用して背景アセットを生成する必要があるシナリオ（純粋なローカルコード路線のため非対応）；ブラウザやPlaywrightが存在しない純粋なバックエンド環境で完全な検証を実行するユースケース（検証をスキップして成果物のみ納品することは可能）；複雑な3Dシーンやモデル背景を求める要件（本Skillはフルスクリーンクアッドシェーダーと2Dパーティクルのみ対応）。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload motion-background.tar.gz
sha256:
Option B · Copy Guide for Agent6e74dc92e650a613…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.