ブランドキットは何をしますか？

クライアントごとに再利用可能なキットを studio/brands/<slug>/ に作成します:

studio/brands/<slug>/
├── brand.json     色（役割別）、フォント、ロゴ、声、事実、チーム、提供物、証言（+ 計算チェック）
├── assets.json    アセットライブラリのインデックス（各画像の内容、品質、ソース）
├── assets/        人物/ 提供物/ 証言/ 場所/ 作品/ 証拠/
├── swatch.png     色の確認用画像1枚
├── logo/          実際に使用されるロゴファイル
└── source/        生のスキャン出力（site.json, probe.json, candidates.json, コンタクトシート）

ストーリーボード と レンダリング スキルは colors, fonts, logo, computed を読み取ります。ライティング スキルは voice と facts を読み取ります。スキーマと役割のルール: references/brand-schema.md

スクリプトが計測を行い、Claudeが判断を行います。スクリプトのJSONとコンソールの要約を読み取ってください — 生のHTML/CSSを読んだり、色を見つけるために全ページのスクリーンショットを撮ったりしないでください。スクリプトはスタジオルートから実行します (node .claude/skills/brand-kit/scripts/...)。

ステップ0 — 既存のキットはありますか？

新しいものを作成する前に、既存のキットの中からブランドを探します: ユーザーの言葉を各 studio/brands/*/brand.json の slug, name, aka, および sources 内のウェブサイトと照合します（例: 「Stargate」、「Sanjay Aggarwal Classes」、「stargate.net.in」は同じキットです）。一致するものがなければ、新しい短いケバブケースの slug を選びます。

承認済みキット: brand.json から回答し、swatch.png を表示 — スキャン不要、スクリプト不要です。「Stargateの色は何ですか？」といった単純な質問には、そのまま答えてください。ユーザーが更新やリフレッシュを依頼した場合のみ再構築します。
下書きキット: 既存のスウォッチでステップ7（承認）に進みます。再スキャンはしません。
アセットライブラリのない承認済みキット（assets.json がない）: ステップ5のみ実行し、再承認します。ストーリーボードは画像が必要なときにこれを要求します。
リフレッシュ: ステップ1から再実行し、ユーザーが手動で設定したもの（from: "user"）は保持し、version を上げます。

ステップ1 — ソースを収集する

利用可能なものをすべて、以下の権威の順に使用します:

ユーザーの指示（「私たちの青は #1F3C88 です」）— 常に優先されます。
ブランドガイド/ロゴファイル — ユーザーが提供するか、ビデオの assets/ に置いたもの。
ウェブサイト。

結果を変える可能性があり、利用できないものがあれば一度だけ尋ねます。通常は「ロゴファイルまたはブランドガイドはありますか？なければウェブサイトから取得します。」だけです。これでブロックしないでください。

ステップ2 — ウェブサイトをスキャンする

静的スキャン（常に実行）: node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json CSSの色（サイト vs フレームワークのカウント、ブランドCSS変数）、フォント、ロゴ候補、メタ、連絡先、見出しを取得します。
レンダリングプローブ（組み込みブラウザが利用可能な場合 — 実際に画面に表示されるものを測定するため、より正確です）: サイトを開き、javascript_tool で scripts/browser-probe.js の内容を実行します。JSONを source/probe.json に保存します。背景色（画面領域別）、テキスト色（テキスト量別）、ボタン色、見出しおよび本文フォント、ロゴ画像を報告します。

静的スキャンでサイトの色が見つからず（完全にJSレンダリングされたサイト）、ブラウザも利用できない場合は、ロゴに依存し、その旨を伝えます。

ステップ3 — ロゴ

最適な候補を選びます（score、alt、サイズ、プローブの logos）。SVGまたは最大のPNGを優先し、他に何もなければファビコンを避けます。その後:

node .claude/skills/brand-kit/scripts/logo-palette.mjs studio/brands/<slug>/logo <logo-url-or-path> [...]

これによりファイルが保存され、各ファイルの実際の色がシェア別（透明ピクセルは無視）とそのトーン（どの背景が必要か）が報告されます。ロゴではないと判明したダウンロードファイルは削除します。ファビコンや写真しかない場合は、ユーザーに伝え、適切なロゴファイルを依頼します。

ステップ4 — 役割を決定する

brand.json を入力します（形式はスキーマリファレンスに従います）。判断ルール:

ブランドカラーはブランド由来のものであり、プラグイン由来ではありません。 framework の色やテーマのデフォルトは、プローブがそれらが実際にページを支配していることを示さない限り無視します。
プライマリ = ロゴの主要なクロマチックカラーであり、サイト（ヘッダー、大きなブロック、ブランド変数）によって確認されます。ロゴとサイトが一致しない場合は、ロゴを優先し、その旨を記録します。
アクセント = プライマリと異なる場合のサイトの主要なボタン/CTAの色。それ以外の場合はロゴの2番目の色。それもなければ、派生させ（補色または暖かいコントラスト）、derived とマークします。
セカンダリ は、ブランドが明確に2番目の色を使用している場合のみ設定します。無理に入力しないでください。
背景、表面、インク、ミュート は、サイトの実際の背景色とテキスト色から、画面に合わせて調整します: 純粋な#000テキスト → プライマリに近い色調のほぼ黒で問題ありません。
ハイライト（オプション）: マーカースワイプ用の明るく彩度の高い色。ブランドにそれがある場合、または自然に適合する場合。
フォント はプローブ（または静的スキャン）から: 見出し = タイトルが使用しているもの、本文 = ランニングテキスト。
声と事実 はサイトの見出し、メタ、連絡先から: キャッチフレーズ、呼称、デフォルトのCTAと連絡先詳細、トーンワード、避けるべき主張（証明不可能な最上級、サイトが実際に表示していない数字）。すべての事実にはソースと日付が含まれます。

status: draft, version: 1（または上げる）、updated: <今日> を設定します。

ステップ5 — アセットライブラリ

ブランド独自の画像を一度収集し、すべてのビデオがテキストのみのシーンではなく実際の人物、製品、証拠を使用できるようにします。あらゆるビジネスで機能します — 種類は一般的です:

種類	カバー内容
`people`	創業者、チーム、スタッフ、専門家（医師、シェフ、教員、コンサルタント…）
`offering`	製品、サービス、コース、メニューアイテム、パッケージ、プラン
`testimonial`	顧客の写真、レビューのスクリーンショット、結果/成果証明画像
`place`	施設、店舗、クリニック、教室、オフィス、イベント
`work`	ポートフォリオ、ギャラリー、プロジェクト、ビフォーアフター
`proof`	賞状、証明書、パートナー/クライアントロゴ、プレス掲載

node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> （見逃してはいけないページには --pages url1,url2 を追加）。すべての種類にわたってページを選択し、各画像の最大バージョンをダウンロードし、アイコン/重複/小さなファイルを削除し、source/candidates.json（サイズ、品質、推測される種類、alt、近くのテキスト）と 1枚のコンタクトシート source/candidates-sheet.png を書き込みます。
シートを一度見ます。candidates.json のテキスト（名前、引用、キャプション）を使用して被写体を特定します。ビデオで実際に使用できるものを保持します。プレースホルダー、他のブランドの素材、ほぼ重複はスキップします。
assets.json を書き込みます（形式はスキーマリファレンスに従います）: 保持する各画像について、その candidate ID、ターゲット file（<kind>/<descriptive-name>.jpg）、kind、subject、1行の description、画像にテキスト/価格が印刷されている場合は bakedText（true）、焼き付けられたラベルや境界線を削除するためのオプションの crop、および source。説明に時間に敏感なもの（価格、日付）を記載します。
node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> — 選択されたファイルを assets/ にコピー/クロップし、サイズと quality（full ≥ 700 px、card ≥ 300 px、それ以下は avatar-only）を記録し、候補を削除します。
対応する テキスト事実 を brand.json に追加します（各々にソース+日付）: team（名前、役割、資格、アセットID）、offerings（名前、詳細、アセットID）、testimonials（名前、短い逐語引用、詳細、アセットID）、該当する場合は proof。保存する前に、ページテキストに対して主張を検証します — 引用は逐語です。

顧客の写真の使用権をクライアントに確認するようユーザーに伝えます。

ステップ6 — ビルドとチェック

node .claude/skills/brand-kit/scripts/build-kit.mjs studio/brands/<slug>

オンカラー、ティントスケール、コントラストチェック、Googleフォントの可用性を計算し、computed に書き込み、swatch.png をレンダリングします。修正可能なすべての警告を修正し（muted/ink の明度を調整、フォントを最も近いGoogleフォントに交換し、オリジナルは original に保持）、クリーンになるか、残ったものが説明されるまで再実行します。修正せずに受け入れた警告はすべて usage の1行ルールになります（例：「アクセントは塗りつぶし色です。白いテキストにアクセントを決して使用しないでください」）。これにより、ストーリーボードとレンダリングステージがそれを尊重します。その後、swatch.png を一度見ます — このスキルが表示する必要のある唯一の画像です。

ステップ7 — 承認

ユーザーにスウォッチと短い要約を表示します:

各役割 → 16進数、色名、由来（derived はフラグ）
フォント（および代替があれば）
使用されたロゴファイルと必要な背景
キャッチフレーズ、デフォルトCTA、連絡先、回避リスト
アセットライブラリ: 種類別の数、低解像度または焼き付け価格のあるもの、権利に関する注意
残っている警告

ユーザーが要求した変更を適用し（ユーザー設定値には from: "user"）、build-kit.mjs を再実行し、承認されたら status: approved を設定してもう一度再実行し、スウォッチが最終ステータスを表示するようにします。

引き継ぎ

キットが承認されたら、進行中のビデオがある場合は brief.md に brand: <slug> を入れ、どのステージがそれを使用するかをユーザーに伝えます。短い閉めの言葉で: キットパス、プライマリ/アクセントの16進数、フォント。

ブランドキット