Communityコーディング&開発github.com

reels-maker / リールスタイル作成

動画リールのルック(外観)を、実際に制作する前に複数提案し、比較・選択できるようにするスキルです。3つの異なるルックを同じ開始フレーム・同じ文言で静止画として並べ、内容ではなく見た目で判断できるようにします。過去に提示したすべてのルックをログに記録し、再利用を制御。シリーズ用に一つのルックを意図的に固定することも可能です。

リールスタイル作成 とは?

このスキルは、「どんな見た目にしよう」「選択肢をくれ」「前回と違う雰囲気に」「安っぽく見える」といった要望や、新しいリール・シリーズの開始時に活用します。reel-intake のブリーフが確定した後、テストストリップ(試作)の前段階で実行します。 仕組みとしては、まずブリーフやブランド情報、過去のルックログを読み込み、5つの異なる発想起点からルック案をスケッチ。その中から最も異なる3つを選び、それぞれのルックを同一の開始フレーム・同一の文言でHTML上に構築し、静止画としてレンダリング。それらを横一列に並べた比較シートを作成します。各ルックは、媒体、レイアウト、テクスチャ、動きなど6つの特性のうち少なくとも3つで他の2つと異なり、かつ少なくとも1つはそのトピックの通常の見た目を破る必要があります。 すべての静止画に対してプローブツールで文字の安全領域をチェックし、過去に提示したルックと完全に重複しないようルックログと照合。選択後は結果(採用・不採用・本人のコメント)をすべてログに記録します。シリーズモードでは最初のエピソードで選ばれたルックが固定され、以降はスキップされます。 対応プラットフォーム: Claude Code(または同等のエージェント)。ツールキットはGitHubリポジトリ(thativanng/reels-maker)として提供され、HTMLテンプレートとNode.jsツールで構成されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/thativanng/reels-maker/tree/HEAD/skills/reel-style

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

ドキュメント

リールスタイル:3つのルックを横並びに、同じ組み合わせは二度と使わない

キットが置いてある場所: このスキルのコマンドはすべて reels-maker フォルダ(template/ と tools/ を含む github.com/thativanng/reels-maker のクローン)から実行します。プロジェクトにない場合は、先にそのリポジトリの SETUP.md に従ってセットアップしてください。

なぜこれが必要か: 「Xについてのリールを作って」と依頼すると、エージェントは毎回同じルック(自分のデフォルト、あるいは直近で承認されたルック)に流れがちです。そして、事前に提示されなかったルックは、完成したフィルムで初めて目にすることになり、「安っぽく見える」という理由で最初からやり直しになります。静止画3枚なら数分のコストで済みますが、間違ったルックで作ったフィルム一本は丸ごと無駄になります。

1 · スケッチの前に読むもの

  • 署名済みブリーフ: プラットフォーム、アスペクト比、視聴者一人、メッセージ、ブランド、そして「私にとって安っぽく見えるもの」への回答(厳格な制約)。
  • ルックログ(.reels/looks-log.md、プロジェクト内)。フォーマットは references/looks-log.md を参照。存在しない場合は作成します。
  • ブランド情報。 ブランドがある場合、3つのルックはブランドの色とフォントを共有し、骨格(媒体、レイアウト、テクスチャ、動き)で差異をつけます。ブランドがない場合は、すべての要素で差異をつけます。

2 · 5つをスケッチし、3つを残す

まず5つの一行コンセプトを、それぞれ異なる出発点から書きます:

  1. 主題自身の世界(サプライチェーンがテーマなら倉庫の木箱)
  2. 視聴者が感じるべき感情
  3. 観客:期待に応えるか、意図的に裏切るか
  4. このトピックの他の動画がどんな見た目か、それを逆転させる
  5. 変わったフォーマット(レシート、カウントダウン、手紙、巨大な一文字)

最も異なる3つを残します。各ルックは、references/axes.md に定義された6つの特性のうち少なくとも3つで他の2つと異なり、かつ常に媒体またはレイアウトで異なる必要があります。少なくとも1つはそのトピックの通常の見た目を破るものでなければなりません。 同じレイアウト形状の2つのルックは1つとカウントします。ブリーフでレイアウトが指定されている場合(reel-intake F4)、3つすべてがそのレイアウトを維持し、媒体と他の少なくとも2つの特性で差異をつけます。

次に、以下の2つのリストと照合します:

  • 避けるべきデフォルトルック(references/axes.md)。キット自身の template/starter.html もその一つであり、これは骨組みであり、ルックとして使ってはいけません。
  • ルックログ。 ログ内のいずれかのルックと媒体、レイアウト、パレットがすべて一致するルックを再提示してはいけません。ただし、本人が依頼した場合は除きます。却下されたルックは制約条件となります。本人が選んだルックは、本人が「前回と同じ」と依頼した場合のみ、新しい3つに加えて4番目のオプションとして再提示されます。

3 · 3つの静止画を制作する

  • template/starter.html をルックごとに1回ずつ、リールのフォルダ(reels/<name>/look-a.html、look-b.html、look-c.html)にコピーし、隣に reel.json を配置します。3Dルックの場合は template/film.html も同様にコピーします。フォントと format.json はキットのルートから読み込まれるため、コピーしたファイルはそのまま動作します。変更するのはルックのみ:CSSトークン、レイアウト、背景、タイプ。すべての静止画は同じ開始ビート・同じ文言を使用します。
  • 各ルックをブリーフで指定されたフォーマットで1枚ずつレンダリングし、名前を付けて横に並べます:
    node tools/stills.mjs --page reels/<name>/look-a.html --format 9:16 --out reels/<name>/out/looks/a 1.5
    node tools/stills.mjs --page reels/<name>/look-b.html --format 9:16 --out reels/<name>/out/looks/b 1.5
    node tools/stills.mjs --page reels/<name>/look-c.html --format 9:16 --out reels/<name>/out/looks/c 1.5
    python3 tools/sheet.py reels/<name>/out/looks/sheet.jpg 3 360 --labels "A · Ledger,B · Dock,C · Receipt" reels/<name>/out/looks/a/t001.50.jpg reels/<name>/out/looks/b/t001.50.jpg reels/<name>/out/looks/c/t001.50.jpg
    
  • プローブツールですべての静止画をチェックします:文字がセーフゾーン内に収まっているか(node tools/probe.mjs --page reels/<name>/look-a.html --format 9:16 "1.5" "sel:.title,.line,.kicker,.cap" "safe" → inside: true。プローブは文字自体を測定するため、フレームからはみ出る文字は不合格となります)。
  • シートに名前と各ルックの一行説明を表示します(例 A · Ledger: タイプ主体、明るい紙、落ち着いた印象)。動きのエネルギーに関する行も追加します(静止画では動きがわからないため)。本人が見る前に1つをおすすめしてはいけません。先におすすめすると、本人の判断が固定されてしまいます。

4 · 選択とログ

  • 本人が1つを選ぶか、またはミックス(「Aのレイアウトで、Cのパレット」)を指定します。ミックスは新しいルックとみなされ、制作前に静止画として提示します。
  • すべてをログに書き込みます: 提示したすべてのルック(6つの特性と静止画)、どれが選ばれ、どれが却下されたか、そして本人の評価(本人の言葉で)。
  • その後、film-engine が選択されたルックで10秒のテストストリップを制作し、本制作前に本人の承認を得ます。選択されたルックの静止画は、カバーの最初のドラフトにもなります。

シリーズモード

ブリーフに「シリーズ」と指定された場合、最初のエピソードで選ばれたルックがログにシリーズルックとして固定されます。以降のエピソードでは3つの静止画をスキップし、そのルックを維持します。バリエーションは内部(主題、開始画像、ビートの順序)で表現します。シリーズの途中で新しいルックが必要な場合は、新しいシリーズとして扱います。

ストーリーが旅である場合

ボクセルウォーク(voxel-walk スキル)は、ブリーフが旅(キャリア、または開始から終了までのプロセス)である場合にのみ、3つのルックの1つとして使用できます。デフォルトにはならず、他のルックと同じルール(他の2つと異なること、ログの適用)に従います。

正直な限界

  • ボクセルウォークのみがエンドツーエンドで構築・検証されています。他のすべてのルックはブリーフから新規に構築されます。新しいルックの最初のフィルム制作には時間がかかり、完全なフィルム監査を受けます。
  • 静止画は色、タイプ、レイアウトを示します。テンポは示しません。動きの判断は10秒のテストストリップで行います。

クレジット

「5つを異なる経路からスケッチし、外れ値を残し、同じレイアウトは1つとカウントする」というルールは、HyperFrames のピッチラウンド(heygen-com/hyperframes, Apache-2.0)を基に改変しています。デフォルトルックに名前を付け、試した内容を記録するというアイデアは、Anthropic のフロントエンドデザインスキル(paraphrased)から来ています。同じシーン、異なるルック、横並び、という方法は、スタイルフレームにおける一般的なモーションスタジオのプラクティスです。

Individual skills in this repo

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

thativanng/reels-maker

The gates every code-rendered film passes before anyone sees it. A 40 fps collision pass (no mover touches a solid or another mover), pixel probes (nothing sits over or behind a face, a head, a subtitle or the frame edge), then an independent auditor (a fresh agent) who reads frame sheets at ≥2 fps and signs off. The builder never signs off their own film. Use it before sending ANY render, after every fix round, and whenever someone says "check the film", "audit this", "is it ready", or "why does this frame look wrong".

thativanng/reels-maker

Build and render a film, reel or animation as code. One HTML page draws any frame on demand with window.seek(t), and a headless browser renders every frame at 2x into an MP4 with sound. Use it whenever someone wants a video made with code rather than a video generator, says "make a film / reel / animated explainer / career video", "render this to MP4", "turn this page into a video", or needs the finishing steps (audio cues, loudness, colour-safe encode, phone preview). It is style-agnostic and renders 9:16, 4:5, 1:1 or 16:9. It runs after reel-intake (the brief) and reel-style (the look), builds on template/starter.html or a style pack such as voxel-walk, and passes film-audit before anything is shown to anyone.

thativanng/reels-maker

The interview before any video is built. It reads what the person already gave (source text, CV, links, brand files), then asks the rest in a few short rounds of numbered questions with a recommended answer marked, always including the format (platform, reel or video, ratio, layout, length, sound). It ends in a one-screen brief that splits "you said" from "I assumed", plus a storyboard, and builds nothing until the person says yes. Use it whenever someone asks for a reel, a video, an explainer, a career film, an animation or a "make a video about X", before film-engine or any style pack, and again when a request changes its purpose, platform or audience mid-way.

thativanng/reels-maker

The voxel career-film style. A blocky 3D version of the person walks, without ever vanishing, through one scene per role. Their outfit changes as they walk, each scene rises out of the floor ahead of them, and a dark banner tracks year, company and role. Use it when someone wants their career, a journey or a "how I got here" told as a short 3D film for LinkedIn or a portfolio, says "make my career film", "turn my CV into a video", "voxel film", or wants a new chapter added to an existing one. It runs on film-engine (render, audio, finish) and must pass film-audit before anything is sent.

関連スキル