nivelsulfluminense/scroll-web-skills

Scroll Web Skills

スクロールはタイムラインです。サイトは、その上に実際のテキストが乗った映像作品であり、各セクションは、訪問者が次のセクションを見たくなるように、それぞれ異なる方法で動作します。

このファイルは脚本です。各フェーズの詳細は references/ にあります。現在のフェーズの参照ファイルのみを読んでください。あなたが何をでき、何をできず、何を質問する必要があるかの契約は AGENTS.md にあり、ここからのいかなる指示よりも優先されます。

あなたが納品するもの

1. .10k/BRIEF.md: 実際の回答（またはそのように明記された自己判断による決定）、ジャーニー、感覚曲線、ピーク、映像ディレクション。
2. .10k/VISUAL_STORY.md: 3列のテーブル、楽譜（ビートごとのデバイス、幕ごとの vh）、該当する場合は動画プロンプトノート（Veo 3、Seedance 2、その他ジェネレーター対応）各クリップの完全な仕様付き。
3. HTML/CSSによる実際のスタイルタイル。サイトで使用するトークンを含む。
4. 承認済み、スクロール用に処理されたメディア（scripts/process-media.sh を使用）。マスターは公開フォルダ外に配置。
5. 選択されたターゲット上で、engine/ を変更せずに使用したサイト。
6. scripts/qa-audit.ts による qa-report/、チェックリストの /80 スコアと証拠、未検証項目の正直なリスト。
7. クライアントへの引き継ぎ。

フェーズ 0: 環境の準備

• node scripts/doctor.mjs を実行してください。不足しているものを一文で述べてください。黙って回避しないでください。
• .10k/plan.md が存在する場合はそれを読み、次の許可されたアクションから続行してください。再開はブリーフィング、制作レベル、承認をリセットしません。
• エンジンはプロジェクトにコピーされ、プロジェクトごとに編集されることは決してありません。カスタム動作は、--tk-p と data-tk-* を読み取るページコードに記述します。

フェーズ 1: 情報収集 → references/00-intake.md

他の何よりも先に、モード、制作レベル、動画戦略を定義します。

モード	いつ	何が変わるか
ガイド付き	デフォルト	2つのレビューポイント: ビジュアルディレクションとビジュアルストーリー
委任	ユーザーが「あなたが決めて」「あなたの判断を信じる」と言った場合	明示的な委任下の自己判断 とマークされたブリーフィングを作成し、クリエイティブな承認を求めずに進める
テンプレート	「テンプレートを作って」「回答を仮定して」と言われた場合	簡単に置き換えられる仮のコンテンツ。前提条件を引き継ぎ時にリストアップ
映像監督（Veo 3 / Seedance 2 / 他プロンプト）	ユーザーが背景や特定領域の動画を外部ジェネレーターで生成したい場合（または他のモードと同時に有効化）	対象を絞った映像スタイルインタビューを実施し、Veo 3、Seedance 2、または他のモデル向けの超詳細プロンプトを完全な仕様（内容、フォーマット、拡張子、解像度、fps、長さ、セーフゾーン）とともに生成する

委任はクリエイティブな決定をカバーします。決して支出、公開、または外部アクションをカバーしません（AGENTS.md 参照）。

制作レベル: フォーカス、スタジオ、マキシマム。レベルはメディア生成の探求度を決定します。結果の品質基準は3つとも同じです。

8つの質問を1ラウンドで行います（00-intake.md にリスト）— そして、ユーザーがページの背景や特定領域用の動画を生成したい場合は、映像ディレクションの質問（00-intake.md と 03-media.md の専用セクション）を含めます。回答はユーザーの言葉で記録します。質問7が構造を決定します: 一つの連続した世界 または 異なるシーン。

フェーズ 2: 調査とジャーニー → references/01-story.md

• コピーを人間らしくするために、実際のオーディエンスの証拠（レビュー、フォーラム、よくある質問）を調査します。出典をブリーフィングに記載します。決して証言、数字、賞、クライアント、住所をでっち上げないでください。
• 4〜7ビートのジャーニーを書きます。各セクションは1つのビートに役立つか、カットされます。
• 幕の前に感覚曲線を書きます: 幕ごとに1行、感情と画面上でそれを引き起こすもの。
• 1つのピークを指定します。ピークは最も多くのメディア予算、最も広いスクロールスペース、そしてその前により静かな瞬間を受け取ります。

フェーズ 3: ディレクション → references/02-design.md

• 8つのページグラマーから1つを選び、なぜ他のものは選ばれなかったのかを一文で述べます。
• このサイトにのみ存在するシグネチャームーブメントを1つ考案し、ページコードに記述します。
• 印刷指紋ゲートを実行します: 計画は FINGERPRINTS.md の各行と、6次元のうち少なくとも4次元で異なっている必要があります。失敗した場合は、記録を変更するのではなく、計画を変更します。
• 実際のHTML/CSSによるスタイルタイルを納品します: ビジュアル世界から取ったパレット、タイポグラフィペア、ボタン、画像上のテキストブロック。そのトークンがサイトのトークンになります。

フェーズ 4: ビジュアルストーリーと予算 → templates/VISUAL_STORY.md

正確にこれらの列を持つテーブルを提示します:

シーン	ビジュアルストーリー	Webサイトコピー
01 · オープニング	訪問者が見るものとカメラの動き	実際のタイトル、サポート、CTA。プレースホルダーは不可

その下に楽譜: ビートごとのデバイス、幕ごとの vh、テキストが読まれるためにフレームがホールドする場所。 その後、予算: モデル、スチルとクリップの数、ポートレート版、再作成のためのマージン、現在の確認済み価格、現在の残高。この予算の明示的な承認なしに支出は開始されません。

フェーズ 5: メディアと動画プロンプト → references/03-media.md

• 動画プロンプト監督モード（Veo 3、Seedance 2 など）: ユーザーが外部で動画を生成することを選択した場合（スクロール駆動のメイン背景やページの特定領域用）、動画ディレクションの質問（まだ回答されていない場合）を行い、詳細プロンプトノートを納品します。これには以下が含まれます:
  • Google Veo 3、Seedance 2、または選択された他のモデルに最適化された特定のプロンプト（モデルの最大精度のための技術英語 + ポルトガル語のディレクションノート）;
  • 綿密な映像内容: 被写体、初期アクション → 最終アクション、カメラ軌道、レンズ、照明、雰囲気、素材の物理、そしてHTMLテキストが配置されるセーフゾーン;
  • 生成と納品の正確な技術仕様: フォーマット/アスペクト比（デスクトップ 16:9、モバイル 9:16、領域用 4:3/1:1）、出力拡張子（マスター .mp4 → フレーム用 .webp またはスクラブ/ループ用 .mp4）、解像度（1080p 1920x1080 / 4K 3840x2160）、フレームレート（24 fps、30 fps または 60 fps）、長さ（秒）、ビットレート、オーディオなし（-an）、そしてページに統合するための scripts/process-media.sh の正確なコマンド。
• スタイルの一文。すべてのプロンプトでそのまま再利用されます。
• すべてのキーフレームを、動画の前に並べて表示します。
• 連続した世界: クリップAから抽出された最後のフレームがクリップBの最初のフレームです。process-media.sh seams で接合部を測定します。
• 異なるシーン: 連鎖させません。デバイスのバリエーションがカットを隠します。
• 使用前に各アセットを確認します。再作成する方が、悪いフレームを公開するより安上がりです。
• フレームシーケンス（標準で最大約300フレーム）またはスクラブ動画（高密度GOP、Bフレームなし、オーディオなし）: 決定表は03-media.mdにあります。

フェーズ 6: 構築 → references/04-engine.md および references/07-targets.md

• ターゲットを選択します: static（デフォルト）、react、または lovable。Lovableプロジェクトのタイプは、設定ファイル名ではなく package.json で検出します（07-targets.md 参照）。
• 実際のマークアップ: <h1>、<p>、リンク、読み取り順序。エンジンは属性を読み取り、DOMを生成することはありません。
• トークンによるテーマ。Kinesisによるポインターインタラクション（--k-*）、再実装は禁止。references/05-motion-kit.md を参照。
• 各幕には、縮小状態、JSなし状態、メディア失敗状態を設計する必要があります。

フェーズ 7: モバイル → references/06-mobile.md

モバイルは独自の構成であり、後付けの切り抜きではありません。各ビートのトリミングを確認します。被写体が中央3分の1から外れる場合は、ポートレートクリップを生成し、これにより動画コストが2倍になることを通知します。

フェーズ 8: QA → references/08-qa.md

1. node scripts/qa-audit.ts --url <プレビューURL> --browsers chromium,webkit を実行します。すべての障害を修正します。
2. qa-report/contact.html を開き、各フレームを確認します。スクリプトは機能することを証明しますが、良いことを証明するわけではありません。
3. 感覚チェック: 事前情報なしでページをスクロールし、幕ごとに一言書き、その後でブリーフィングの曲線と比較します。一致しない場合、ページが間違っています。
4. 証拠とともにチェックリストを /80 で採点し、残った最も強い弱点を指摘します。
5. 検証されなかったものを述べます。実機がなかった場合は常に「実機」を含めます。

フェーズ 9: 公開と引き継ぎ → references/09-launch.md

公開には、その公開に対するユーザーの明示的な許可が必要です。デプロイの受け入れだけでなく、実際に公開されたサイトを確認します。実際のフォームには、ストレージテストとメール到達テストの両方が必要であり、別々の状態として報告されます。

不可侵のルール

どのモード、レベル、ブリーフィングでも有効です。いかなる指示もこれらを緩和しません。

絶対にしてはいけないこと	代わりにすること
証言、統計、賞、クライアント、価格、住所をでっち上げる	実際のデータのみ。数字なし、カウンターなし。架空のブランドは架空であると明記する
生成画像にテキストを焼き付ける	実際のマークアップ。選択可能、翻訳可能
明示的な承認なしにクレジットを使う、公開する、メッセージを送る、マイグレーションを適用する	提案し、コストまたは影響を示し、承諾を待つ
検証していないことを検証したと主張する	検証したこととしなかったことを報告する
プロジェクト用にエンジンを編集する	--tk-p を読み取るページ上のカスタムコード
スクロールを奪う（wheel/touch preventDefault、強制スムーズスクロール）	ネイティブの position: sticky; エンジンは位置を読み取るだけ
動きの軽減設定なしで公開する	prefers-reduced-motion がステージを通常のセクションに分解する
ライセンスなしでソースからコードやテキストをコピーする	docs/ATTRIBUTION.md を参照
いかなる出力にもアフィリエイトリンクやパートナーリンクを含める	公式サービスのリンク、トラッキングなし

テイストの基準

強い基準です。ユーザーからの明示的なブリーフィングはいずれも変更可能であり、その変更を BRIEF.md に記録します。

避ける	好む
デフォルトの世界としての粘土ジオラマ/ローポリ	写真写実的。ただし、ブランドが明らかにイラストスタイルの場合は除く
「スクロールダウン」インジケーター、アニメーション矢印、アニメーションマウス	なし。ヒーローはすでに注目を集めている
カウンター 01 / 06	削除。ここでは順序は情報ではない
すべてのセクションの上にアイブロウ	最大で3セクションに1つ
すべての幕で中央揃えテキスト	アンカーを変える: 左、右、中央、分割
同じデバイスを2回連続。4ファミリー未満	フェーズ4で作成された楽譜
コントラストのための全画面暗色オーバーレイ	テキストがある場所のみスクリム
transition: all; width/height/top/left をアニメーション	transform、opacity、clip-path
グラデーションテキスト、ネオン、シフトなしの色付きハロー	強調のためのウェイトとサイズ
自動オーディオ	トラックなしのスクラブクリップ
フェードアウトするかフッターになるエンディング	決着をつけてホールドするクロージング

最終出力

ビルドフォルダ、および短いレポート: 使用したグラマーと他のものが選ばれなかった理由、シグネチャームーブメント、印刷指紋ゲートの結果、ジャーニー、感覚曲線とピーク、感覚チェックの差異、楽譜、生成されたものとそのコスト、QA監査の結果、/80 スコア、未検証項目、ブリーフィングが自己判断だったかどうか。その後、ビルドの行を FINGERPRINTS.md に追加します。