cinematic-scrub-landing

シネマティックスクラブ・ランディングページ — ゴールデンテンプレート

マウスに反応するヒーロービデオと、5拍子のナラティブアークに沿って閲覧者を案内するページで構成された、ブランドを意識したプレミアムなランディングページを作成します。ユーザーが用意するのは動画と、任意でロゴ、商品写真、ブランドのコンテキストです。このスキルでは、パレットの抽出、タイポグラフィの選定、RTL/LTR、ひな形の構築、全キーフレームを含む動画の再エンコード、マウススクラブ効果、セクションライブラリ、検証を行います。

このスキルがある理由

参考実装は https://github.com/hoodini/bamba にあります。スナック「במבה」のイスラエル向けRTLサイトで、ページ全体を通してカーソルに追従する赤ちゃんの動画と、その下に続く4つの個性的なセクション（明るい黄色のレシピ、クリーム色のノスタルジーアルバム、暗く思索的な価格設定、赤いアクションのフィナーレ）によって、閲覧者を 憧れ → 喜び → ノスタルジー → 思索 → アクション へと導きます。

このスキルのルールはすべて、この実装から抽出したものです。ハードルールのセクションの箇条書きは、いずれも苦労して確立したルールであり、汎用的な「良いコード」の既定値よりも優先されます。

---

セクションギャラリー（作成するもの）

ヒーローはページ上部に配置します。その下には、ナラティブアークに沿うよう、ライブラリから4つのセクションを選んで順番に並べます。それぞれは完全に不透明で（動画が透けず）、固有のブランドアイデンティティを備えています。

拍	種類	参考例
1 — 憧れ	ヒーロー（マウススクラブ動画）
2 — 喜び	Sun — 明るいプライマリーアクセントのグラデーション、浮遊するモチーフのSVG、巨大なゴーストタイポグラフィ、統計カード
3 — ノスタルジー	Album — クリーム色の紙、点描のマイクロパターン、実際の商品写真を使ったポラロイド風ベントー
4 — 思索	Roast — ラジアル状のアクセントグローを配した暗色デザイン。それぞれ異なるビジュアル表現の価格カードが3枚
5 — アクション	Signal — 画面全体に広がる強いアクセントカラー（赤／オレンジ／緑）、巨大な見出し＋CTA、ガラス風のコンテナパネル

テクニカル系／SaaS系のブランドでは、必要に応じてセクションの種類を入れ替えます（下記のセクションライブラリを参照）。ただし、最後は必ずSignalセクションにします。

---

このスキルの使い方

1. アセットを作業用の空のディレクトリに配置します。

   • ヒーロー動画（コンテナ形式は問いません。.mp4、.mov、.webm）
   • ロゴ（SVGを強く推奨。透明背景のPNGも使用できます）
   • 商品／被写体の画像を1～3枚（JPG／PNG。透明背景が理想です）

2. ユーザーに確認します（手短に。デフォルトを提案して先に進みます）。

   • 商品名＋メタタグライン
   • 言語コード（RTL/LTRとフォントの選択に使用）
   • ブランドのコンテキスト（時代、オーディエンス、感情の核、パレットの雰囲気）
   • 任意：具体的なパレットのHEX値、ナラティブアークの各拍

3. 以下のワークフローを順番に実行します。 すべてのフェーズが必須です。ffmpegによる再エンコードを省略しないでください。これによってスクラブが驚くほど滑らかになります。

4. 完了を報告する前に検証します。 フェーズ9には12項目のチェックがあります。すべて実行してください。

---

入力 — ユーザーから収集する情報

PRODUCT_NAME: "<e.g. במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<the meta-message — e.g. 'it's not a snack, it's lifelong memories'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true; everything else = false
HERO_VIDEO_FILE: "<exact filename in cwd — e.g. baby2.mp4>"
LOGO_FILE: "<exact filename — leave blank if none>"
PRODUCT_IMAGE_FILE: "<exact filename — leave blank if none>"
BRAND_CONTEXT: |
  <2-4 sentences: era it evokes, who the audience is, the emotional core,
  the visual identity (warm/cool/playful/serious). Drives palette + motifs.>
PALETTE: "<optional — comma-separated hexes if overriding>"
NARRATIVE_ARC: "<optional — 5 emotional beats; AI proposes if blank>"

同じYAMLブロックとプロンプト本文を含むテキストテンプレートの全体は、references/GOLDEN_PROMPT.md にあります。スキルのランタイムに直接アクセスできない場合は、YAMLに値を入れてClaudeに貼り付けてください。

フェーズ 0 — デザインを計画する（コーディング前に200語以内の概要を出力）

コードを書く前に、以下を出力します。

1. 抽出した5色のパレット：background（最も深いインク色）、cream（温かみのあるオフホワイトのテキスト色。#FFFFFFは絶対に使用しない）、accent（ブランドのメインカラー）、accent2（ブランドのセカンダリカラー）、support（第3のトーン）。PALETTEが指定されていない場合は、ロゴと製品画像から抽出します。パレット全体に統一感を持たせてください。暖色系か寒色系のどちらかに統一し、混在させないでください。暖色系ブランド（食品、自然、ノスタルジー、動物）には、青、ティール、ミント、シアンを使用しません。寒色系ブランド（テクノロジー、金融、医療、SF）には、ごく小さなアクセントを除き、暖色を使用しません。

2. 言語に合わせた3種のタイポグラフィ（ディスプレイ／本文／手書き風アクセント）：

   • he：Rubik（ディスプレイ）＋ Assistant（本文）＋ Suez One（アクセント）
   • en：Anton（ディスプレイ）＋ Inter（本文）＋ Caveat（アクセント）
   • ar：Cairo（ディスプレイ）＋ Tajawal（本文）＋ Reem Kufi（アクセント）
   • es / fr / it / de：Anton または Bebas Neue（ディスプレイ）＋ Inter（本文）＋ Caveat（アクセント）
   • ja：Noto Sans JP weight 900（ディスプレイ）＋ Noto Sans JP（本文）＋ Yusei Magic（アクセント）
   • その他：対象の文字体系に合う Google Fonts を3種類選び、同じく display-black / body-clean / handwritten-script の役割に当てます。

3. ナラティブの流れ — BRAND_CONTEXTに沿った5つの感情的な展開。それぞれをセクションライブラリのセクションタイプに対応させます。

その後、作業を実行してください。確認を求めないでください。

---

フェーズ 1 — アセットの準備（重要なステップ）

1a. ffmpegを確認する

which ffmpeg     # or: Get-Command ffmpeg on PowerShell

インストールされていない場合は、処理を停止してユーザーにインストールを案内します（brew install ffmpeg / Windows: http://ffmpeg.org）。

1b. ヒーロー動画を全フレームキーフレームにして再エンコードする

ブラウザーで瞬時にシークできるのはキーフレームのみです。標準的な動画では約250フレームに1つしかキーフレームがないため、マウスでスクラブするとひどくカクつきます。この1つのコマンドが、プレミアムな仕上がりと素人っぽい仕上がりの差を生みます。

ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4

出力を確認します。hero.mp4は5～50 MBにしてください。50 MBを超える場合は-crf 25で再実行し、80 MBを超える場合は-crf 28で再実行します。音声を削除します（-an）。ヒーロー動画は無音です。

1c. ロゴと製品画像をコピーする

cp <LOGO_FILE>           public/logo.<ext>
cp <PRODUCT_IMAGE_FILE>  public/product.<ext>   # if provided

---

フェーズ 2 — スキャフォールド

npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# Also move the logo + product image into public/

---

フェーズ 3 — Tailwindの設定

tailwind.config.jsを完全に置き換えます。抽出したパレットと言語に適したフォントを使用します。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<ink/dark>',
        cream:      '<warm off-white — NEVER #FFFFFF>',
        accent:     '<primary brand color>',
        accent2:    '<secondary>',
        support:    '<tertiary>',
      },
      fontFamily: {
        sans:    ['<body font>',         'system-ui', 'sans-serif'],
        display: ['<display font>',      'sans-serif'],
        accent:  ['"<handwritten font>"', 'cursive'],
      },
    },
  },
  plugins: [],
}

---

フェーズ 4 — index.html

完全に置き換えます。IS_RTLを尊重してください。ロゴを参照するファビコンのリンクを必ず含めます。

<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<Google Fonts URL for the three chosen fonts>" rel="stylesheet">
    <title><PRODUCT_NAME> — <TAGLINE></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

---

フェーズ 5 — index.css（デザインシステム）

全体を置き換えます。以下の各ユーティリティはすべて重要です。クラス名は先ほど抽出した暖色系パレットを前提としています。寒色系のブランドでは、シャドウの色合いにある「yellow」／「red」を実際のアクセントカラーに置き換えてください。

必ず含めるもの：

• html { scroll-behavior: smooth; } ＋ section[id] { scroll-margin-top: 90px; }。固定ナビゲーションの下にアンカー先のセクションが隠れないようにします。
• body の背景色は background カラー（動画の読み込みに失敗した場合のフォールバック）にします。カーソルは crosshair、デフォルトフォントは本文用のサンセリフ体にします。
• .liquid-glass ／ .liquid-glass-strong — 背景のぼかし＋彩度調整＋内側の明るいボーダー＋マスク付きグラデーションの縁取りハイライト。強調版では、accent を色合いに使った内側のグローを適用します。
• .glass-pill — ナビゲーション項目や小さなバッジ向けの、同じガラス風のスタイルを適用したコンパクトな丸みのあるピル型要素です。
• .cta-primary — ブランドの CTA：linear-gradient(135deg, accent-light, accent, accent-shade) ＋ アクセントカラーのグローシャドウを適用し、ホバー時に強めます。さらに translateY(-1px) で浮き上がらせます。
• .brand-mark — SVG がない場合に使う、小さな正方形または円形のロゴマークです。
• .grid-bg — 暗いセクションの下地に使う、放射状のフェードマスク付きの控えめな 1px グリッドです。
• .reveal ／ .revealed — IntersectionObserver を使ったスクロール表示：opacity 0 → 1 ＋ translateY 28 → 0、cubic-bezier(0.16, 1, 0.3, 1) による 0.9s のアニメーションです。
• .scrim-top ／ .scrim-bottom — ヒーロー専用のグラデーションオーバーレイです。
• セクションごとの背景。色ではなく雰囲気にちなんだ名前を付けます。
  • .sun-section — 明るいプライマリアクセントのグラデーション＋控えめなドット模様（「喜び／袋を開ける」場面）。
  • .album-section — 温かみのあるオフホワイトの紙、アクセントカラーの放射状の色合い＋微細なドット模様、縁をフェードさせるマスクです。
  • .roast-section — 暗い背景に放射状のアクセントカラーと、反対側の角に配置した accent2 のグロー、マスク付きのグリッド模様です。
  • .signal-section — 強いアクセントカラー（多くの場合、赤／オレンジ／緑）を全面に適用した、アクションの締めくくり用の背景です。
• .polaroid — 白いカード。パディングは 14px 14px 44px 14px、柔らかな多層シャドウを適用し、ホバー時に translateY(-6px) rotate(0) まで持ち上げます。.polaroid-tape` は、上部中央に絶対配置する黄色／アクセントカラーのテープ片です。-4° 回転させ、両側に破線のヒントを付けます。
• .stamp — アクセントカラーの破線ボーダーを持つピル型要素。大文字表記にし、文字間隔を 0.18em にします。
• .ribbon — 下部が三角形の clip-path と濃いドロップシャドウを使った、価格／人気バッジです。
• .highlight-circle — インラインの <span> を囲むように ::after で描く、手描き風の楕円です。アクセントカラーの 3px ボーダーを回転させて使います。大見出しの中で最も重要な単語ひとつに適用します（各見出しにつき最大ひとつ）。
• 装飾モチーフのフィルター：drop-shadow を使った .peanut-svg ／ .<motif>-svg。
• prefers-reduced-motion: reduce を尊重し、メディアクエリ内でリビールアニメーションとスムーズスクロールを無効にします。

---

フェーズ 6 — App.tsx のアーキテクチャ

アーキテクチャは変更できません。最初から正しく実装してください。

6a. インポート

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …plus 4-8 brand-thematic icons (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';

6b. App.tsx 内で定義する再利用可能なコンポーネント

• useReveal<T>() — ref を返す IntersectionObserver フックです。初回の交差時に revealed クラスを追加します（しきい値は 0.15）。
• GlassCard — リビールフックを備えたラッパーです。任意の strong prop を指定でき、className を受け取ります。
• Motif — BRAND_CONTEXT に合わせたテーマの装飾 SVG コンポーネントです（食品ならピーナッツ、動物なら足跡、テクノロジーなら回路、自然なら葉、飲料ならしずく、エネルギーなら稲妻）。暗いセクションまたは明るいセクションごとに 3～6 か所、低い不透明度で浮かべます。
• ScrollToTopButton — RTL では固定位置を bottom-6 left-6、LTR では bottom-6 right-6 にします。window.scrollY > window.innerHeight * 0.6 のときに表示し、スムーズスクロールでページ上部に戻ります。言語に合わせた短いラベル（「לראש」／「Top」／「أعلى」／「Inicio」）を使います。

6c. マウススクラブ効果（要）

const videoRef = useRef<HTMLVideoElement>(null);
const stateRef = useRef({ targetTime: 0, isSeeking: false });

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleLoaded = () => {
    const mid = video.duration / 2;
    video.currentTime = mid;
    stateRef.current.targetTime = mid;
  };

  const handleSeeked = () => {
    const s = stateRef.current;
    s.isSeeking = false;
    if (Math.abs(s.targetTime - video.currentTime) > 0.01) {
      s.isSeeking = true;
      video.currentTime = s.targetTime;
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    const s = stateRef.current;
    const d = video.duration;
    if (!d || isNaN(d)) return;
    const normalized = e.clientX / window.innerWidth;
    // If subject moves "backwards" relative to cursor and feels wrong, optionally
    // use `1 - (e.clientX / window.innerWidth)` instead — ASK the user first.
    s.targetTime = Math.max(0, Math.min(d, normalized * d));
    if (!s.isSeeking) { s.isSeeking = true; video.currentTime = s.targetTime; }
  };

  video.addEventListener('loadedmetadata', handleLoaded);
  video.addEventListener('seeked', handleSeeked);
  window.addEventListener('mousemove', handleMouseMove);
  return () => {
    video.removeEventListener('loadedmetadata', handleLoaded);
    video.removeEventListener('seeked', handleSeeked);
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

isSeeking ガードは非常に重要です。これがないと、ブラウザーがデコードするよりも速く mousemove が発生し、シークキューがあふれて目に見えるカクつきが生じます。

6d. クリック可能なスクロールスパイナビゲーション

const navItems: { label: string; target: string }[] = [
  { label: '<demo>',     target: 'top'     },
  { label: '<recipe>',   target: 'recipe'  },
  { label: '<moments>',  target: 'moments' },
  { label: '<family>',   target: 'family'  },
  { label: '<contact>',  target: 'contact' },
];

const scrollToSection = (target: string) => {
  setMenuOpen(false);
  if (target === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
  document.getElementById(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

すべてのナビゲーション項目に onClick={() => scrollToSection(target)} を設定します。ナビゲーション内の CTA ボタンでも scrollToSection('contact')（または最後の場面の id）を呼び出します。

6e. ルート JSX レイアウト — Z-INDEX の落とし穴（違反禁止）

return (
  <div className="relative">                              {/* NO bg-* class on this wrapper */}
    <ScrollToTopButton />
    <video ref={videoRef} src="/hero.mp4" muted playsInline preload="auto"
           className="fixed inset-0 h-full w-full object-cover -z-20" />

    <nav className="fixed top-0 inset-x-0 z-50 ...">{/* nav */}</nav>
    {menuOpen && <div className="fixed top-24 inset-x-4 z-40 ...">{/* mobile menu */}</div>}

    <section className="relative h-screen overflow-hidden">{/* HERO — video shows through */}</section>
    <section id="recipe"   className="sun-section ...">{/* OPAQUE — own identity */}</section>
    <section id="moments"  className="album-section ...">{/* OPAQUE */}</section>
    <section id="family"   className="roast-section ...">{/* OPAQUE */}</section>
    <section id="contact"  className="signal-section ...">{/* OPAQUE — the action finale */}</section>
    <footer  className="bg-background py-8 ...">{/* mini-footer */}</footer>
  </div>
);

外側の <div> に背景色を設定してはいけません。 ラッパーに bg-background ／ bg-cream ／ bg-white を指定すると、-z-20 の動画の上に色が塗られ、ヒーローのスクラブが機能しなくなります。フォールバックとして bg-background を持つのは body だけです。これはリファレンスビルドで最も多かった間違いです。公開前に必ず確認してください。

---

フェーズ 7 — セクションライブラリ（ヒーローの後に4～5個選択）

ヒーローはセクション1です。その後、このライブラリから4つ選び、NARRATIVE_ARC の流れに沿って並べます。同じパターンを繰り返してはいけません。 各セクションは独自の背景を持つ完全に不透明なデザインです。動画が透けて見えるのはヒーローだけです。

タイプ A — 「Sun」（明るいメインアクセント）

メインカラーの大きなグラデーション背景。低い不透明度で浮かぶモチーフ SVG。隅には巨大で薄くフェードしたゴーストの数字／単語（例：創業年を不透明度6％、260pxで表示）。見出しパネル：強い影を付けた、クリーム色がかった対照的な角丸カード。中には見出し、-2°回転させたアクセントカラーの筆記体の単語をアイブロウとして配置し、最後の単語を .highlight-circle で囲んだ大きなディスプレイブラックの見出しを入れます。見出しの横には実際の製品写真を傾けて配置し（6°、ドロップシャドウ）、ホバー時に傾きを戻します。その下には3枚の統計カードを横一列に並べます。それぞれクリーム色の角丸（[28px]）で、わずかに異なる角度（-1.5°、0.8°、-0.6°）に回転させます。各カードには、巨大なディスプレイブラックのアクセント2数字（88～110px）、右上の小さなラベルバッジ、本文、出典を含むフッターを配置します。下部にはテーマに沿ったアイコンを添えた、対照的な大きなテキストパネルを2つ配置します（1つはダーク、もう1つはアクセント2カラー）。

タイプ B — 「Album」（懐かしさを感じさせるクリーム色の紙）

縁をマスクした、控えめなドットの微細パターンを持つクリーム色の紙の背景。隅には accent2 カラーで、巨大で薄くフェードした手書き文字を配置します（不透明度4～6％）。見出しパネル：影付きの純白の角丸カード。その横には引用カードを配置します。ダークな背景にアクセントカラーの引用アイコン、フォントアクセント（手書き風）の推薦文、下線付きの出典を入れ、-2°ほど傾けます。本文はポラロイド風のベントーグリッドです。大きな注目ポラロイド（md:col-span-2 md:row-span-2、-1.5°回転）には、モチーフを四隅にあしらったグラデーションフレームとタグバッジの中に PRODUCT_IMAGE を配置します。さらに小さなポラロイドを4枚加え、それぞれテーマに沿ったアイコンをグラデーション上に載せた画像エリアを設けます。すべてに黄色／アクセントカラーのテープを付け、手書き風のキャプションを添え、少しずつ異なる角度に回転させます。

タイプ C — 「Roast」（思索的なダーク）

対角の隅に accent と accent2 の放射状の光彩を配し、マスクしたグリッドテクスチャを重ねたダークな背景。非常に低い不透明度で浮かぶモチーフ SVG。見出しパネル：liquid-glass-strong の角丸パネルと、アクセントの光彩をまとった見出し。サイドラベル：テーマに沿ったアイコンと1行のフレーズを備えた glass-pill。本文には視覚的な処理がそれぞれ異なる価格カードを3枚配置します（この多様性は不可欠です。同一のカードを3枚並べてはいけません）。

1. ライトカード — クリーム色の紙にアクセントの枠線を付け、テキストはピーナッツブラウンのダークカラーにします。右上に破線スタンプのバッジ、クラシックな価格数字、ダークな CTA ボタンを配置します。
2. ハイライトカード — アクセントカラーのグラデーション背景にし、少し大きくします（上方向に持ち上げるため上部に負のマージンを設定）。右上に .ribbon、大きな accent2 の価格数字、強い光彩を持つ accent2 の CTA を配置します。
3. ダークカード — accent2 の縁取りを施したダークな背景に、光彩を持つ accent2 の数字、モチーフアイコン、cta-primary ボタンを配置します。

Type D — 「シグナル」（最後のアクション）

画面全体に広がる強いアクセントカラー（赤、オレンジ、緑など、ブランドの「進む」色）を使い、対角の隅にアクセント2の大きなぼかしオーブを2つ配置します。テキストの背後には、中央に巨大なアクセント2の楕円形のぼかしを配置します。モチーフのSVGを約30％の不透明度で浮かべます。単一のコンテナパネル（アクセント色を帯びた、暗い半透明の背景ぼかし）には、-2°に傾けた.stampバッジのアイブロウ、表示サイズに応じて60→148pxに変化する巨大なレスポンシブ見出し（ディスプレイブラック体と手書き風の行を途中に組み合わせ、最後を短い単語で締めます）、その下に2行のサブタイトルを配置します。大きなプライマリーCTAボタン（クリーム色の背景にアクセントカラーのテキスト）には、小さく点滅するインジケーターを付けます。任意で、アウトライン付きのセカンダリーリンクを配置します。下部には、ロゴの左右に水平の区切り線を添えて（「by 」）配置します。

Type E — 「ワークショップ」／「仕様」（技術向け）

技術系／SaaS／B2Bなど、「仕組み」が展開の一部となる場合に使います。背景は暗色にし、左右を交互に入れ替えた2列の行を配置します。一方の列には、番号付きアイブロウ、見出し、本文を置き、もう一方にはコード／図／スクリーンショットを含むガラス風カードを置きます。縦方向には十分な余白を設けます。BRAND_CONTEXTが技術系の場合は、BまたはCの代わりに使用します。

最後の展開がアクションになるよう、必ずType D（シグナル）で締めくくってください。 技術系のSaaSページにも必要です。温かみのあるフィナーレを、寒色系のもの（濃い青または紫）に置き換えつつ、構成は維持します。

---

フェーズ8 — 厳守すべきルール（矛盾する「ベストプラクティス」より優先）

1. 外側のラッパー <div> に背景色を設定しないでください。 bg-background を指定するのは body だけです。それ以外に設定すると、動画が隠れます。
2. ヒーロー動画は position: fixed; -z-index: 20 にします — -g 1 -keyint_min 1 で再エンコードしてください。
3. ヒーロー以外の各セクションは、それぞれ独自の背景クラスを持つ完全な不透明表示にします。 すべてのセクションで「ヒーローを少し見せる」ために部分的なスクリーンを使わないでください。それは単調さをアートに見せかけているだけです。
4. 各セクションに独自のビジュアルアイデンティティを持たせます。 背景、配色の強調、レイアウトパターンをそれぞれ変えてください。5つのセクションを、1つのカードグリッドのバリエーション違いのように見せてはいけません。
5. セクションの順序は、ナラティブの流れに沿って決めます。 BRAND_CONTEXT が確立する感情から始め、アクションで締めくくります。
6. 背景が複雑でも、見出しは読みやすくします。 浮かせて配置するテキストブロック（見出し、引用、サブタイトル、カーソルの合図、バッジ）はすべてパネルで囲みます。暗いセクションには liquid-glass-strong、明るいセクションには白またはクリーム色のカード、小さな合図には glass-pill を使います。複雑なテクスチャの上にテキストをむき出しで配置しないでください。
7. 見出しの最大サイズ：ヒーローは 78px 以下（製品や被写体が見えるようにします）。セクション見出しは 108px 以下。最後の CTA は 148px 以下（ほかの要素が競合しないようにします）。
8. 配色の一貫性：ブランドカラーが暖色系なら、ほんのわずかなアクセントを除いて寒色を使いません。寒色系なら、ほんのわずかなアクセントを除いて暖色を使いません。テキストに #FFFFFF を使わないでください — 必ずプロジェクトの cream 値を使います。
9. ロゴの扱い：ロゴファイルはそのまま使います。反転、色付け、トリミングをしたり、競合する色のボックスで囲んだりしないでください。サイズ：ナビゲーションは h-9／ヒーローのクレジットは h-12／最後の CTA のクレジットは h-16／ミニフッターは h-6。
10. 生成したグラデーションより、実際の製品写真を優先します。 PRODUCT_IMAGE_FILE が提供されている場合は、目立つように使ってください。メインのポラロイド、ヒーローのサイドアクセント、さらに／または料金カードのいずれかに使用します。
11. ナビゲーションバーはクリック可能で、スクロール位置を追跡できるようにします。 { label, target } アイテムを使い、各セクションへスムーズスクロールさせます。ナビゲーションバーの下に隠れないよう、section[id] に scroll-margin-top: 90px を設定します。
12. トップへ戻るボタンは、ビューポートのスクロール量が 60% を超えた後に表示します。RTL では左下、LTR では右下に固定し、言語に合った短いラベルを付けます。
13. RTL レイアウト：ヒーローのテキストパネルは右下に配置します。進行方向の矢印は ArrowLeft にします。カーソルの合図は左下に配置します。モバイルメニューの項目は右揃えにします。
14. LTR レイアウト：ヒーローのテキストパネルは左下に配置します。進行方向の矢印は ArrowRight にします。カーソルの合図は右下に配置します。
15. ファビコンにはロゴを使います。index.html で <link rel="icon" type="image/svg+xml" href="/logo.svg" /> を設定してください。apple-touch-icon も追加します。
16. 装飾モチーフの SVG — BRAND_CONTEXT をテーマにした、ファイル内 React コンポーネントを1つデザインします（ピーナッツ、肉球、回路、葉、しずく、稲妻、雪の結晶）。暗い／明るい各セクションに、透明度を低くして3〜6個配置します。
17. ゴーストタイポグラフィ：少なくとも1つのセクションの隅に、透明度を低く（4〜8%）した巨大な単語または数字を配置します。創業年、感情を表す一語、ブランド名などが使えます。サイズは 200〜300px とし、透かしのように感じられる程度に薄くします。
18. 手書き風のアクセント：各見出しの上にあるセクションの小見出し（「המתכון」／「the recipe」／「el origen」）を、アクセントカラーのスクリプトフォントで -2° 傾けて配置します。最後の CTA の見出しでは、リズムを変えるため、中央の行にもスクリプトフォントを使います。
19. シンプルなピル型ラベルの代わりにスタンプバッジを使い、「設立 X 年」「YYYY 年創業」「オリジナル」「期間限定」などを表します。破線の枠線、大文字、字間を広げたスタイルにします。
20. 各セクション見出しで、最も重要な単語を1つだけ円で囲みます。手描き風の赤い楕円を使います。各見出しにつき1つまでです。
21. 料金カードは見た目を変えます。 ライト、アクセントを強調したもの、ダークの3種類にし、それぞれ異なるスタイルにします。強調カードは大きくし、リボンを付けて発光させます。
22. ノスタルジックな思い出カードにはポラロイドのパターンを使います。白いカード、黄色またはアクセントカラーのテープ、わずかな傾き、手書き風のキャプション、グラデーションの画像領域を使います。ホバー時には傾きを 0° に戻し、浮き上がらせます。
23. CTA にはブランドの CTA グラデーションとグロー（cta-primary クラス）を使います。必ず矢印アイコンを付けます。最優先のアクションには、必ず小さく点滅するインジケーターも付けます。
24. 作成後に npx tsc --noEmit を実行します。 出力がゼロで、成功しなければなりません。続けて npm run dev を実行し、サーバーが問題なく起動することを確認します。両方が成功するまでは完了したとしないでください。
25. ユーザーが依頼していない機能を追加しないでください — お問い合わせフォーム、メール登録、アナリティクス、Cookie バナー、言語切り替え、ダークモード切り替えは不要です。仕様どおりに仕上げます。
26. すべてのコピーは LANGUAGE に統一します。 ヘブライ語のページに英語の定型文を混ぜたり、その逆をしたりしないでください。LANGUAGE 以外で許可されるテキストは、ブランドマーク、CSS のフォントファミリー名、TypeScript／React の識別子だけです。
27. ブランドの声が明示的に求めていない限り、コードやコピーに絵文字を使いません。
28. コードにコメントを追加しません — isSeeking ガードのように、明白でない理由を説明する場合を除きます。

---

フェーズ 9 — 実行と確認

1. npx tsc --noEmit → 出力がないことを確認します。
2. npm run dev → Vite がエラーなしで ready in <ms> と報告することを確認します。
3. ローカル URL を開きます。
4. ヒーローの確認 — ページが読み込まれ、ヒーローが表示されること、マウスを動かすと映像がカクつかず滑らかにスクラブされることを確認します。カーソルに対して被写体が「逆向き」に動いて違和感がある場合は、1 - (e.clientX / window.innerWidth) に切り替える前にユーザーに確認します。
5. セクションの独立性確認 — ヒーローをスクロールして通過すると、それぞれ独自の不透明な背景を持つ 4 つのセクションが表示され、ヒーロー動画が透けて見えないことを確認します。後続のセクションの背景にヒーローの被写体が見える場合、外側のラッパーに bg- クラスが付いています。そのクラスを見つけて削除します（厳守ルール #1）。
6. ナビゲーションバーのクリックテスト — 各ナビ項目をクリックし、ナビゲーションバーに隠されることなく、正しいセクションまでスムーズにスクロールすることを確認します。ナビゲーションバーの CTA ボタンは、最後のアクションセクションまでスクロールします。
7. トップへのスクロールテスト — ビューポートの 60% を超えてスクロールすると、浮動ボタンが左下（RTL）または右下（LTR）に表示されることを確認します。クリックすると、トップまでスムーズにスクロールし、ボタンがフェードアウトします。
8. ロゴの確認 — ファビコンがタブに表示され、ナビゲーションバー／ヒーロー／最後のセクション／ミニフッターのロゴが適切なサイズで表示され、反転や色かぶりがないことを確認します。
9. アセットの確認 — 商品画像が提供されている場合は、サムネイルだけでなく、目立つサイズ（主役のポラロイドまたはヒーローのサイドアクセント）で少なくとも 1 回表示されることを確認します。
10. レスポンシブ表示の確認 — 360px、768px、1280px で横スクロールやテキストの重なりがなく、md 未満ではナビゲーションがハンバーガーメニューに折りたたまれることを確認します。
11. モーションの低減 — 開発者ツールで prefers-reduced-motion: reduce を設定して再読み込みします。スクロール時の表示アニメーションは（アニメーションなしで）即時に切り替わり、スムーズスクロールも即時に移動することを確認します。
12. いずれかの確認に失敗した場合は、完了を報告する前に修正してください。ユーザーに修正を委ねてはいけません。

表示された開発 URL、選んだパレットと弧、使用したセクションの種類を報告します。

---

参考実装

https://github.com/hoodini/bamba の Bamba（במבה）サイト — 5 つすべてのセクション、マウスでスクラブする赤ちゃんの背景、クリック可能なナビゲーションバー、本物の Osem ブランドアセットを備えた、イスラエルのスナック菓子の RTL ヘブライ語ランディングページです。このスキルで曖昧な点があれば、このリポジトリを正解とします。

Claude に貼り付けて使える形式にした、この SKILL.md と同じ内容の全文テンプレートは references/GOLDEN_PROMPT.md にあります。スキルの実行環境が利用できない場合は、代わりにこちらを使用してください。

---

代わりに他のスキルを使用する場合

• parallax-landing-page — スクロールに連動し、ページ自体は固定され、5 つのテキストシーンがフレームのスクラブに合わせてクロスフェードします。「スクロールで動画をスクラブし、ページは動かさない」という要件の場合に使用します。
• video-to-landing-page — Apple 風のスティッキーヒーローで、スクロールに合わせて動画のフレームが等間隔の JPEG 抽出画像を通過します。下部にセクションが続く単一のヒーローです。
• video-edit — 字幕付け、トランスクリプトに基づく編集、SNS 向けの短尺動画作成に使用します。ランディングページ向けではありません。
• hyperframes — HTML 動画コンポジションを作成します（逆方向、つまり HTML → MP4）。
• このスキル（cinematic-scrub-landing） — 固定されたページ全体の動画背景をマウス操作でスクラブし、その下に 4〜5 個の不透明なブランドセクションが縦にスクロールするストーリーの流れを作ります。ヒーローがカーソルに反応し、下のページでストーリーを伝えることをユーザーが望んでいる場合に選びます。