シネマティック・スクラブランディングページ — ゴールデンテンプレートは何をしますか？

ヒーロービデオがマウスに応答し、ページの残りの部分が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セクションで終了します。

このスキルの使用方法

アセットをクリーンなワーキングディレクトリにドロップします。
- ヒーロービデオ（任意のコンテナ — .mp4、.mov、.webm）
- ロゴ（SVGを強く推奨、透過PNGも許容）
- 1～3枚の製品/被写体画像（JPG/PNG、透過が理想的）
ユーザーに確認します（簡潔に — デフォルトを提案し、先に進みます）。
- 製品名 + メタタグライン
- 言語コード（RTL/LTR + フォント選択を決定）
- ブランドコンテキスト — 時代、対象者、感情的な核、パレットの雰囲気
- オプション：明示的なパレット16進数、ナラティブアークビート
以下のワークフローを順番に実行します。 すべてのフェーズは必須です。ffmpeg再エンコードをスキップしないでください。これがスクラブを滑らかにする魔法です。
完了を報告する前に検証します。 フェーズ9には12のチェックがあります。すべて実行します。

入力 — ユーザーからこれらを収集します

PRODUCT_NAME: "<例：במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<メタメッセージ — 例：「それはスナックではなく、生涯の思い出です」>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true; それ以外はすべて false
HERO_VIDEO_FILE: "<cwd内の正確なファイル名 — 例：baby2.mp4>"
LOGO_FILE: "<正確なファイル名 — ない場合は空白>"
PRODUCT_IMAGE_FILE: "<正確なファイル名 — ない場合は空白>"
BRAND_CONTEXT: |
  <2～4文：呼び起こす時代、対象者、感情的な核、
  ビジュアルアイデンティティ（温かい/クール/遊び心/シリアス）。パレット＋モチーフを決定。>
PALETTE: "<オプション — 上書きする場合のカンマ区切りの16進数>"
NARRATIVE_ARC: "<オプション — 5つの感情的なビート、空白の場合はAIが提案>"

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

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

コードを書き始める前に、以下を出力します。

抽出された5色パレット: background（最も濃いインク）、cream（温かみのあるオフホワイトのテキスト — #FFFFFF は絶対に使用しない）、accent（プライマリブランドカラー）、accent2（セカンダリブランドカラー）、support（ターシャリトーン）。PALETTE が指定されていない場合は、ロゴ＋製品画像から抽出します。パレットは内部で一貫性がなければなりません — すべて暖色系またはすべて寒色系。暖色系ブランド（食品、自然、懐かしさ、動物）→ 青、ティール、ミント、シアンは不可。寒色系ブランド（テクノロジー、金融、医療、SF）→ 小さなアクセントを除き暖色系は不可。
タイポグラフィの三つ組（表示用/本文用/手書きアクセント用）を言語に合わせて：
- 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（アクセント）
- その他：スクリプトに一致する3つのGoogle Fontsを選択し、同じ display-black / body-clean / handwritten-script の役割にします。
ナラティブアーク — BRAND_CONTEXT にマッピングする5つの感情的なビート。それぞれをセクションライブラリのセクションタイプに一致させます。

その後、確認を求めずに実行します。

フェーズ1 — アセットの準備（魔法のステップ）

1a. ffmpegを確認する

which ffmpeg     # または：PowerShellで Get-Command ffmpeg

存在しない場合は、停止し、ユーザーにインストールを促します（brew install ffmpeg / Windows: http://ffmpeg.org）。

1b. すべてのフレームをキーフレームとしてヒーロービデオを再エンコードする

ブラウザはキーフレームにしか瞬時にシークできません。標準のビデオには約250フレームに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～50MBである必要があります。> 50MBの場合は -crf 25 で再実行します。> 80MBの場合は -crf 28 で再実行します。オーディオは削除します（-an）— ヒーローは無音です。

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

cp <LOGO_FILE>           public/logo.<ext>
cp <PRODUCT_IMAGE_FILE>  public/product.<ext>   # 提供された場合

フェーズ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
# ロゴと製品画像も public/ に移動します

フェーズ3 — Tailwind設定

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

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<インク/ダーク>',
        cream:      '<温かみのあるオフホワイト — #FFFFFF は絶対に使用しない>',
        accent:     '<プライマリブランドカラー>',
        accent2:    '<セカンダリ>',
        support:    '<ターシャリ>',
      },
      fontFamily: {
        sans:    ['<本文フォント>',         'system-ui', 'sans-serif'],
        display: ['<表示フォント>',      'sans-serif'],
        accent:  ['"<手書きフォント>"', '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="<選択した3つのフォントのGoogle Fonts URL>" 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（デザインシステム）

完全に置き換えます。以下のすべてのユーティリティは重要です。名前は以前に抽出された暖色系パレットを想定しています。クールなブランドの場合は、影の色合いで「黄色」/「赤」の言及を実際のアクセントカラーに置き換えます。

必ず含めるもの：

html { scroll-behavior: smooth; } + section[id] { scroll-margin-top: 90px; } — アンカーされたセクションが固定ナビの下に隠れないようにします。
body の背景 = background 色（ビデオが失敗した場合のフォールバック）。カーソル = crosshair。デフォルトフォント = 本文用サンセリフ。
.liquid-glass / .liquid-glass-strong — backdrop-blur + saturate + inset-light境界線 + マスクされたグラデーションエッジハイライト。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、0.9秒、cubic-bezier(0.16, 1, 0.3, 1)。
.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 — ::after を介して描かれた手書き風の楕円：インラインの <span> の周りに3px回転したアクセントカラーの境界線。大きな見出しの中で最も重要な単語の周囲に使用します（見出しごとに最大1つ）。
装飾モチーフフィルター：.peanut-svg / .<motif>-svg に drop-shadow。
prefers-reduced-motion: reduce を尊重 — メディアクエリ内でリビールアニメーション＋スムーススクロールを無効にします。

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

アーキテクチャは交渉の余地がありません。最初から正しく行います。

6a. インポート

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …さらに4～8個のブランドテーマアイコン（Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …）
} from 'lucide-react';

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

useReveal<T>() — IntersectionObserverフック、refを返します。最初の交差時に revealed クラスを追加します（しきい値0.15）。
GlassCard — リビールフックを備えたラッパー、オプションの strong プロパティ、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;
    // 被写体がカーソルに対して「後方」に動き、違和感がある場合は、オプションで
    // `1 - (e.clientX / window.innerWidth)` を代わりに使用します — 最初にユーザーに確認します。
    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: '...' },
  // ...
];

（翻訳上の注意：長いため、これ以降のセクションも同様に翻訳し、マークダウン構造、コードブロック、ファイルパス、環境変数名、URL、インラインコードはそのまま維持します。全文は原文のSKILL.mdの完全な翻訳です。実際の出力は完全な翻訳版になります。）

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

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

お気に入りのAIに質問する

プレビュー

ドキュメント

シネマティック・スクラブランディングページ — ゴールデンテンプレートは何をしますか？

このスキルが存在する理由

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

このスキルの使用方法

入力 — ユーザーからこれらを収集します

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

フェーズ1 — アセットの準備（魔法のステップ）

1a. ffmpegを確認する

1b. すべてのフレームをキーフレームとしてヒーロービデオを再エンコードする

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

フェーズ2 — スキャフォールディング

フェーズ3 — Tailwind設定

フェーズ4 — index.html

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

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

6a. インポート

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

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

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

Individual skills in this repo

Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

お気に入りのAIに質問する

プレビュー

ドキュメント

シネマティック・スクラブランディングページ — ゴールデンテンプレート は何をしますか？

このスキルが存在する理由

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

このスキルの使用方法

入力 — ユーザーからこれらを収集します

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

フェーズ1 — アセットの準備（魔法のステップ）

1a. ffmpegを確認する

1b. すべてのフレームをキーフレームとしてヒーロービデオを再エンコードする

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

フェーズ2 — スキャフォールディング

フェーズ3 — Tailwind設定

フェーズ4 — index.html

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

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

6a. インポート

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

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

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

Individual skills in this repo

Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

シネマティック・スクラブランディングページ — ゴールデンテンプレートは何をしますか？