Communitygithub.com

evgenspm/launchfilm

ブランド情報取り込み:ローンチ動画、製品ビデオ、プロモーション向けに、ユーザーのリポジトリ(Tailwind設定、CSS変数、shadcnトークン、next/font、ロゴSVG)から実際の製品カラー、フォント、ロゴ、角丸、テーマを取得し、ライブWebサイトとスクリーンショットも参照して、films/<slug>/brand.json を各値の出典元とともに生成します。

launchfilm とは?

このスキルは、製品ビデオやプロモーション制作におけるブランド情報の取り込みを自動化します。ユーザーのコードリポジトリからTailwind設定、CSS変数、shadcn UIトークン、next/fontによるフォント情報、ロゴSVGを抽出し、さらにライブWebサイトや提供されたスクリーンショットから不足情報を補完して、統一されたbrand.jsonファイルを生成します。対応プラットフォームはClaude Code、Cursor、CodexなどのAIエージェントであり、ブランド情報の整合性を保証します。ロゴや色を推測することはなく、取得に失敗した場合はユーザーに明示的に確認するため、不正確なブランド表現を防ぎます。このスキルは、新規動画作成時やブランド変更時、ユーザーが「自分のブランド/色/ロゴを使って」と指示した際に使用します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/evgenspm/launchfilm/tree/HEAD/skills/brand-intake

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

brand-intake:本物のトークンから、brand.json へ

動画は製品のように見える必要があるため、トークンは製品から取得され、決して好みから取得されません。ソースの優先順位に従い、最初に値を生成できたソースで停止し、各値の出典元を記録します。

  1. ユーザーのリポジトリ(最善:正確なトークン、実際のフォント名、実際のロゴファイル)。
  2. ライブURL(計算済みスタイル、メタタグ、ヘッダーSVG)。
  3. ユーザーが提供するスクリーンショット(ピクセルサンプリング)。
  4. 不足しているものがあればユーザーに確認。決して推測しないでください。

出力(パスは launch-video/ からの相対パス):films/<slug>/brand.json、films/<slug>/BRAND-SOURCES.md、およびロゴファイルはそのまま public/films/<slug>/brand/ にコピー(シーンが staticFile() で読み込めるようにするため)。 抽出レシピ:references/sources.md。 フィールドマッピング、フォントフォールバック、コントラスト計算:references/brand-json.md。

手順

  1. プロダクトルートを見つける。 launch-video/ がプロダクトリポジトリ内にある場合、リポジトリルートは1階層上です。そうでない場合は、URLとスクリーンショットを要求します。スタックをメモします:package.json の依存関係(tailwindcssバージョン、next、@fontsource/*、shadcn)。
  2. リポジトリから色を取得。 優先順位:CSS内のTailwind v4 @theme 変数、Tailwind v3 tailwind.config.{js,ts,cjs,mjs} の theme.extend.colors、globals.css 内のshadcnトークン(--background、--foreground、--primary、--muted、--card、--accent)、その他の :root カスタムプロパティ。HSL/OKLCH/RGBを6桁の16進数に変換します。マーケティングサイトが使用するテーマ(ダークまたはライト)を使用し、両方を混在させないでください。
  3. リポジトリからフォントを取得。 next/font/google または next/font/local のインポート、@fontsource* の依存関係、@font-face、body/html/h1 の font-family、Tailwind fontFamily。実際に使用されているファミリー名とウェイトを記録します。
  4. リポジトリからロゴを取得。 最初にSVGを探します:public/logo*.svg、public/*mark*.svg、app/icon.svg、public/favicon.svg、src/assets/*logo*、src/components/*Logo*(インラインJSX SVG:<svg> を抽出)、次にPNG ≥ 512 px(apple-touch-icon.png は180 px:マーク用の最終手段。ワードマークには使用しないでください)。変更せずに public/films/<slug>/brand/ にコピーします。
  5. 角丸とテーマ。 --radius またはTailwind borderRadius;テーマ:背景の相対輝度 < 0.2 の場合はダーク。
  6. ライブURLからギャップを埋める(references/sources.md § ライブURL):theme-color meta、og:image、link rel=icon、ヘッダーのインラインSVG、body、プライマリボタン、h1 の計算済みスタイル。
  7. スクリーンショットからギャップを埋める: 指定されたポイント(ページ背景、本文テキスト、プライマリボタン、カード)のピクセルをサンプリングします。ピクセル座標を BRAND-SOURCES.md に記述します。
  8. 名前、タグライン、URL: package.json の name/description、サイトの <title>、ヒーローの h1、og:description、READMEの最初の行から取得します。ユーザー自身の言葉を使用し、ここで新しいタグラインを作成しないでください(ストーリーがコピーを担当します)。
  9. 出荷またはロードできないフォントを、役割に応じて出荷可能なOFLフォントにマッピング(brand-json.md § フォント)し、その旨を明記します。
  10. コントラストチェック(brand-json.md § コントラスト):背景上のfgは ≥ 4.5:1 必須(目標7:1)、背景上のアクセントは ≥ 3:1。数値を記述します。アクセントが基準を満たさない場合→形状にはそのまま使用し、その上のテキストには fg を選択します。
  11. brand.json を書き込み、次に schemas/brand.schema.json が存在する場合は検証します: npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.json
  12. BRAND-SOURCES.md を書き込み:値ごとに1行→出典元(ファイル:行、URL + セレクタ、またはスクリーンショット + x,y)。
  13. ユーザーに 6行のサマリー(名前、テーマ、6色見本(16進数)、フォント、ロゴファイル、マッピングまたは確認したもの)を表示します。

ハードストップ(パイプラインを続行しない)

状況対応禁止事項
リポジトリ、サイト、スクリーンショットのいずれにもロゴファイルがない「ロゴをSVG(推奨)または背景透過の512 px以上のPNGで送ってください」と依頼するロゴを描画、トレース、生成、または近似する
ロゴが小さなファビコンとしてのみ存在するより大きなファイルを依頼する32 pxのファビコンをヒーローマークにアップスケールする
色が取得できない(リポジトリにアクセス不可、サイトがブロックされている、スクリーンショットがない)URLまたは2~3枚のスクリーンショット、あるいは16進数カラーコードを依頼する「素敵な」色やデフォルトパレットを選択する
パレットの競合(アプリ vs マーケティング)動画がどちらを使用すべきか確認し、デフォルトでマーケティングサイトを使用するそれらをブレンドする
ロゴが存在しないためユーザーがテキストワードマークを希望する明示的な「はい」がある場合のみ許可:表示フォントのプロダクト名、fg色それをロゴとして提示する

ルール

  • ロゴファイルはバイト単位でコピーしてください。ユーザーから依頼がない限り、ロゴの色を変更したり、トリミングしたり、「クリーンアップ」したりしないでください。
  • ユーザーの確認なしに、他の会社のロゴやユーザーの顧客のロゴを使用しないでください。
  • リポジトリへの再配布を禁止するライセンスのソース(Fontshare FFLフェースであるSatoshiやGeneral Sans、Apple SF Proなど)からフォントを取得しないでください:それらをマッピングします(brand-json.md § フォント)。
  • brand.json は、公開プロダクト名とURL以外の機密情報や個人データを保持しません。
  • 再実行時は、ソースが変更されたフィールドのみ上書きします。ユーザーが手動で編集したフィールドは保持します(最初に差分を確認)。
  • 下流のスキルは brand.json のみを読み取ります。シーン内にブランドの16進数値をハードコードしないでください [craft/06#grade-discipline]。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

evgenspm/launchfilm

QA a rendered launch film before anyone ships it. Use for "QA the video", "check the render", "is it ready to post", "review the film", "why does it look cheap", "check the captions/safe zones/loudness", after every render and before package. Reads the CLI's automatic report (`npx launchfilm qa <slug>`), contact sheets and stills at key timestamps, then checks text-at-time readability, contrast, platform safe zones, loudness (−14 LUFS, −1.5 dBTP), ffprobe encode specs, black and frozen frames, cuts on the beat, and the 12 amateur tells as blocking checks. Writes qa/<slug>/QA.md where every line cites a file or a measured number; a check that was not run says NOT CHECKED, never PASS. Use scene-build to fix picture problems it finds, sound to fix the mix, launch-film for the whole pipeline, reference-study for reference videos.

evgenspm/launchfilm

Launch video, launch film, product video, product launch, promo, teaser, trailer, demo video, Product Hunt video, X / LinkedIn launch clip, reel, hero loop, motion graphics, "make a video for my product", Remotion film. Router and gated pipeline for making a pro product-launch film with the launchfilm studio in ./launch-video: brief, brand intake, story and storyboard (user approves), sound, scene build, frame QA, render per platform preset, package, post copy, one-time credit note. Use this first for any request to make, remake or revise a launch or product film; it calls the sibling skills (brand-intake, story, sound, scene-build, recipes, film-qa, launch-post). Do not use it to study a reference video (use reference-study), to browse recipes only (use recipes), or for generic Remotion questions unrelated to a launch film.

evgenspm/launchfilm

Write the launch post that goes with the film: X / Twitter post, LinkedIn post, Product Hunt tagline, description and maker comment, written in the founder's own voice, concrete, no AI slop ("excited to announce", em dashes, buzzwords). Triggers: write the tweet, launch post, LinkedIn post, Product Hunt copy, PH tagline, maker comment, caption for the video, announcement copy. Use after the film is rendered (or when the user asks for post copy for an existing film); starts from `npx launchfilm post <slug>` and the film's BRIEF.md and STORYBOARD.md, writes out/<slug>/POST.md. Never posts anything. Not for the film's own on-screen script or VO (story).

evgenspm/launchfilm

Find launchfilm recipes (published launch films studied frame by frame and written down as text, some with ready Remotion code) and build the user's film from 1 to 3 of them. Use for "use a template", "start from a recipe", "make a 30s launch film from recipe <id>", "something like this style", "show me options", "which recipe fits a 30 s vertical launch", "remix recipe X with our brand", or when a storyboard needs a proven hook, feature beat, logo reveal or end card. Searches recipes/CATALOG.md or recipes/index.json, scores and picks 1 to 3, shows each with its source link, reads the recipe.md beat sheet, then scaffolds with `npx launchfilm new <slug> --recipe <id>`: ready code when Recipe.tsx exists, else TODO scenes built from the beat sheet with studio presets, keeping the recipe's timings, springs and sounds re-timed to the user's length and beat grid. Use reference-study to make a new recipe, story for the storyboard, scene-build for scenes, launch-film for the whole pipeline.

関連スキル