アクティベーション契約
モーションデザイナーのショーリール言語で表現されたWebサイト/ランディング（任意のスタック）またはコードレンダリング動画（ショーリール、プロモーション、ローンチクリップ）に使用します。フルブリードのフラットカラーカット、極太ワイドな大文字、モノクロHUDコーナー、ビートに同期したキネティックモーション、または3Dリソグラフシェーダーが特徴です。ダッシュボード、ドキュメントサイト、フォーム主体のアプリには使用しません。
ハードルール
- 以下のパスはすべてこのスキルのフォルダ（
SKILL_DIR）からの相対パスです。ツールはnode "$SKILL_DIR/assets/palette/palette.mjs" …のように実行します。 - ユーザーの言語で応答します。サイト/動画のコピーはプロジェクトの言語で記述します。
- デザインやコードの前に、必ずインテークを完了します。カラーコードをハードコードしてはいけません。色は
palette.mjsのロールトークン（ink、bone、action、machine、on-*、hud-on-*）から取得します。 - フィールド上のテキストには
on-<field>を使用します。forbiddenPairsの組み合わせをテキスト/背景としてレンダリングしてはいけません。 - シーンごとに1つのシグネチャームーブ。ラウドとクワイエットを交互に配置。同じロールのフィールドを3つ連続してはいけません。キーポーズは1ビート以上保持。イージングファミリは1つに統一。
- Web：transform/opacityをアニメーション。
prefers-reduced-motionを尊重（静的エンドステート、ループなし、ピン留めなし）。オフスクリーンのCanvasは一時停止。ピン留めは1024px以上のみ。375pxでオーバーフローしないこと。 - testimonial、metrics、clientをでっち上げてはいけません。既存のコンテンツを維持します。
- アンチスロップリスト（
references/design-system.md§8）を拒否します。
決定ゲート
| 状況 | アクション |
|---|---|
| タイポグラフィ主導、フラットカラーカット | スイス・キネティック：design-system.md、assets/web、assets/video |
| 3D、触覚的、ポスター/印刷風 | リソ・シェーダー：shader-print.md、assets/shader/ |
| 両方 | ハイブリッド：フラット領域（on-* トークン）のキネティックタイポグラフィの背後にシェーダーフィールド |
| ブランドカラーが既知 | `palette.mjs --brand "#HEX" --format css |
| プリセット | --list（名前、タグ、スウォッチを表示）→ --preset <name> |
| おまかせ | README、コピー、CSS、ユーザーの言葉から業界/ムードを推測 → --surprise --mood "<tags>" --seed <n>。理由を説明。--exclude <name> で1回再ロール可能 |
| Webサイト | references/web-techniques.md を参照。assets/web/* をスタックに適応 |
| 動画 | assets/video/reel-template/ をコピー。references/video-pipeline.md を参照 |
| サイト + 動画 | 動画をストーリーボードとして先に作成し、同じシーンからサイトを構築 |
実行手順
- 出力形式（サイト/動画/両方）とスタックを検出。既存のコンテンツとブランドアセットを読み込みます。
- インテーク：1ターンにつき1つの質問。スタイル（スイス・キネティック / リソ・シェーダー / ハイブリッド / おまかせ）、次にパレット（ブランドカラー / プリセット / おまかせ）。
- フォントはプリセットの
fontPairingまたはdesign-system.md§2 から。BPM：120推奨（30fpsと60fpsで1ビートあたり整数フレーム。60fpsでは144/150も可）。他のテンポではビートをフレームに丸めます。 - 正規のリズム（§7）に従い、シーンテーブル
# | シーン | フィールドロール | シグネチャームーブ | ビート数を作成。 - 該当するアセットから構築。
- QA：Web →
assets/qa/qa-screenshots.js（1440 + 390、オーバーフロー、コンソール）。アニメーションが落ち着いた後にのみ判定。動画 → テストフレーム、フルレンダリング、ffprobe、コンタクトシート。 - 結果と検証できなかった点（例：オーディオは常に確認しない）を報告。
出力契約
以下の内容を返します：パレット（+ おまかせの理由）とコントラストサマリー、シーンテーブル、作成/変更したファイル、QAエビデンスパス、既知の制限事項。
リファレンス
references/design-system.md— ロール、タイポグラフィ、タイミング、イージング、ムーブ、リズム、アンチスロップ。references/palettes.md— インテーク、プリセット、トークン形式。references/web-techniques.md— GSAP/Lenis/canvas、アクセシビリティ、パフォーマンス。references/video-pipeline.md— 決定論的Canvas→ヘッドレスブラウザ→ffmpeg、オーディオ。references/shader-print.md— WebGL2レイトレーシング、3インクハーフトーン、版ズレ。