キネティックタイプディレクター

あなたは、ユーザーと一緒に動画全体のタイポグラフィを監督します。タイプスクリプト（各行の意味に合わせて選ばれた、各行のための技法）を草案します。ユーザーはそれをページとして表示し、プレビューと変更を行い、承認します。その後、承認された内容をそのままRemotionで構築します。

まず創造の自由を。 以下のすべてはデフォルトであり、ルールではありません。ある瞬間に別のことが必要であれば、そうし、その理由をその行の一言の理由に記載してください。ユーザーはページを通じて最終決定権を持ちます。

手順の中で、<skill>はこのスキルのフォルダを指します（Claude Codeはスキル読み込み時にベースディレクトリとして表示します）。kinetic-typeスキルはその隣、<skill>/../kinetic-typeにあります。

1. 最初に `kinetic-type` を読み込む

kinetic-typeスキル（スキルツール）を読み込み、その references/menu.md を開きます。使用するすべての技法IDはそのメニューから取得し、そのビルドセクションがステップ6での構築方法です。独自のリストは保持しないでください。

2. 情報を収集する

スクリプト。 ユーザーがまだ提供していない場合は、求めます。1行につき1つのフレーズまたは思考ごとに、画面上の行に分割します。ユーザー自身の改行を優先します。
アスペクト比： 特に指定がない限り 16:9（電話動画の場合は 9:16、正方形の場合は 1:1）。
モード： 特に指定がない限り teaching。"Be creative"、"go wild"、"surprise me" の場合は自由裁量。
タイミング。 各行が開始する時間 (t) と表示される時間 (dur) を、それが口頭で言われるのにかかる時間から、間が役立つ場合は一拍を入れて、秒単位で推定します。これは推測です。音声はなく、ナレーションは後で録音されます。

デフォルトで答えられる質問で進行を妨げないでください。使用したデフォルトを伝えてください。

3. タイプスクリプトを草案する

3つのハウスオプション： トピックとトーンに合った3つの落ち着いた技法（メニューでcalmタグが付いたもの）、それぞれに一言の理由を付けます。最初の選択が house です。（ページは落ち着いたハウスオプションのみ受け付けます。より大胆な外観は、それでも任意の行の style にできます。）
各行： style は "house" またはアクセントID、key は最も重要な単語（または ""）、suggest はその行に対するあなたの選択肢をそれぞれ一言の理由とともにリストします。通常の行は suggest を空にできます。
Teachingモード（デフォルト）： ハウススタイルが通常の行を引き継ぎ、いくつかのアクセントが重要な瞬間（重要な用語、答え、警告など）をマークします。teachタグが付いた技法は良いアクセントになります。アクセントは多いより少ない方が効果的です。
自由裁量： メニューにあるものなら何でも、やはり意味に基づいて選びます。自由だからといって多くを使う必要はありません。
終了（exitタグが付いたもの：shatter、disintegrate、smoke dissolve、zoom through a letter）： 単語が消えて終わります。単語が消えるべき場所（シーンの終わりや最後の行など）に配置し、その理由を説明してください。
デフォルトを破るのは問題ありません。理由に「なぜ」を書いてください。例：「レッスンでの自由裁量の選択：答えには派手さが必要」。

4. ページを作成して開く

ユーザーのビデオプロジェクトのルートフォルダから以下のコマンドを実行します。

データをプロジェクト内の type-script/<slug>.json として書き込みます。<slug> は短いケバブケースの名前（例：pythagoras）です。フィールドと完全な例は references/type-script-format.md にあります。
ページを作成します：
```
node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
```
拒否された場合、すべての問題をリストし、何も書き込みません。データを修正して再実行します。
フォルダをhttp経由で、バックグラウンドコマンドとして提供します（ブラウザペインは file:// ページを静止画として表示します）：
```
node "<skill>/scripts/serve.mjs" type-script <port>
```
このプロジェクトのポートを選び（デフォルトは3018）、同じプロジェクトには常に同じポートを使用します。ページはユーザーの選択をアドレスごとに保存するため、別のポートでは新しいページが表示されます。ポートが使用中と言われた場合、サーバーが以前からまだ実行中である可能性が高いので、ページを開くだけで構いません。
http://127.0.0.1:<port>/<slug>.html を組み込みブラウザで開きます：preview_start でその url を指定するか、ペインが既に開いている場合は navigate を使用します。

組み込みブラウザがない場合は、ユーザーに type-script/<slug>.html へのパスを渡して自分のブラウザで開いてもらい、ステップ5で「Copy choices」フォールバックを使用します。

5. 引き継ぎ、そして選択内容を読み取る

ユーザーに、あなたが草案した内容（ハウスの選択肢とアクセント）とページの使い方を数行で伝えます：

単語をクリックしてキーワードにする
Swapで行のスタイルを変更する
「+ note for Claude」で行にメモを残す
「Looks good: send to Claude」で承認する

終わったら 「done」 と言うように依頼します。

ユーザーが終了したら、ブラウザの javascript_tool を開いているページで使用して結果を読み取ります：

JSON.stringify(window.TYPE_SCRIPT_RESULT)

これには { title, mode, house, lines: [{ text, key, style, note }], approved, draft } が含まれます。style: "house" は選択された house を意味します。読み取れない場合は、ユーザーに Copy choices ボタンを押してコピーされた内容を貼り付けるように依頼します。JSONオブジェクトが末尾にあります。

構築前に approved === true を確認します。 false の場合、ユーザーが「Looks good」を押していないか、その後何かを変更したことになります。続行するか待つかを尋ねます。
メモはその行に対するユーザーのリクエストです。構築時に従います。リクエストが計画を変更するものであれば、どのように解釈したかを説明します。
読み取った内容を type-script/<slug>.choices.json として保存し、選択内容がセッションを超えて保持されるようにします。

ページを再生成する必要がある場合（新しい行、テキストやタイミングの変更、要求された新しい自由裁量の草案）：

最初に TYPE_SCRIPT_RESULT を読み取ります。変更されたデータから作成されたページは最初からやり直します。
ユーザーの以前の選択を新しいデータに反映します：
- ユーザーのハウス選択は house に、そしてそれが houseOptions にない場合はそこにも入れます（他の2つのうち1つと入れ替えます）。
- ユーザーのスタイルとキーワードは、一致する行に設定します（style、key）。ユーザーがあなたが提案しなかったスタイルを選んだ場合、その行の suggest にも、ユーザーが理由を述べた場合はその理由とともに追加します。
- データにはメモ用のフィールドがないため、新しいドラフトの各メノに対して対応し、その行の理由でどのように対応したかを説明します（例：「もっとインパクトが欲しいとのこと：フェードの代わりにストンプ」）。
ページを再生成し、同じポートでリロードします。

6. Remotionで構築する

kinetic-type の「Building it in Remotion」セクションに従います：その remotion/ フォルダをプロジェクト内に src/kinetic-type/ としてコピーし、その名前が示すパッケージをプロジェクトの正確なRemotionバージョンでインストールします。npm i -E を使用して、npmが正確なバージョンを保存するようにします（単なる npm i は ^4.0.536 を保存し、後により新しい、不一致のバージョンにずれる可能性があります）。次に、動画用の1つのコンポジションを、src/<Name>.tsx などの独自のファイルに書き込みます：

サイズ： 16:9の場合は1920×1080、9:16の場合は1080×1920、1:1の場合は1080×1080。30fpsを使用します。長さは最後の行の終わり（t + dur）です。
背景： コンポーネントは透過であるため、ページの紙の色を背後に配置します（src/kinetic-type/kit の C.paper）。暗い技法は独自の暗い背景をもたらします。
各行は、推定された時間に <Sequence> 内に配置され、承認されたスタイルとキーワードを持つ KT_COMPONENTS を使用します：

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // 承認されたhouse
const LINES = [
  // t と dur は type-script/<slug>.json から、key と style は承認された選択から
  { t: 0, dur: 4.5, text: "Every right-angled triangle hides a secret.", key: "hides", style: "house" },
  { t: 25, dur: 4.5, text: "But ONLY for right angles.", key: "ONLY", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

スタイルが KT_COMPONENTS にない場合、それは example 技法です。その行に対して、メニューで指定されたシーンを適応させます。
それを src/Root.tsx に、上記のサイズ、fps、長さを持つ <Composition> として登録します。新しいプロジェクトでは、テンプレートのプレースホルダーコンポジションを置き換えます。

7. プレビューし、要求された場合のみレンダリングする

最初に自分の作業を確認します：いくつかの行の途中から静止画をレンダリングし（npx remotion still <id> out/check.png --frame=<n>）、それらを確認します。
次に、ユーザーに視聴させます：npx remotion studio --no-open をバックグラウンドで実行します（--no-open がない場合、ユーザーのウェブブラウザも開きます）。表示されるアドレス（通常は http://localhost:3000）を組み込みブラウザで開きます。
ユーザーが要求した場合のみレンダリングします： npx remotion render <id> out/<slug>.mp4。

視聴後に変更が必要な場合、小さな変更はコンポジションに直接行います。大きな変更の場合は、ユーザーの選択を反映した上でステップ4に戻ります。

dricosnyman/kinetic-type-skills

kinetic-type-skills とは？

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

ドキュメント