mcpField
K
kinetograph-create

kinetograph-create

github.com/0xs4n4tgクリエイティブ・メディア51615 回インストール今日更新
リポジトリ

kinetograph-create について

kinetograph-createは、Kinetographプロジェクトの作成とレジストリ項目の追加を支援するスキルです。新規プロジェクトの初期化を案内し、既存プロジェクトの構成は維持します。

主な機能

  1. 01TSXまたはHTMLプロジェクトの初期化
  2. 02レジストリのコンポーネントとテンプレートの導入
  3. 03再利用可能なスタイルとアセットの追加
  4. 04既存プロジェクト構成の維持

活用シーン

  1. 01Kinetographのアニメーションプロジェクトの開始
  2. 02レジストリから再利用可能なアセットを追加
  3. 03ファイルを移動せず既存プロジェクトを準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/0xs4n4tg/kinetograph --skill kinetograph-create

インストール後、Claude Code で/kinetograph-createを入力して読み込まれたか確認します。

詳細

Kinetograph プロジェクトを作成する

新しいプロジェクト

空のフォルダーで npx kinetograph init [dir] を実行します（--html を指定すると、TSX ではなく HTML ページが作成されます）。生成されたレイアウトはそのままにしてから、npm install を実行します。init はすでに存在するファイルをスキップします。

src/index.tsx     registerRoot and the compositions (starter: composition "Main", 1280x720, 60 frames at 30 fps)
src/scenes/       one file per scene; reusable pieces in src/components/, helpers in src/lib/
html/index.html   with --html: a page with a GSAP timeline, instead of src/
public/           assets for staticFile(): images/, fonts/, audio/, video/
out/              everything generated: renders/, stills/, sheets/

package.json（TSX の場合は still、strip、render、check、HTML の場合は lint の各スクリプトを含み、依存関係は kinetograph のみ）、tsconfig.json（TSX）および .gitignore も作成されます。npx kinetograph strip src/index.tsx で確認してから、kinetograph-markup に進んでください。

既存のプロジェクトでは、独自のレイアウトが維持されます。ファイルを移動しないでください。

  • API は @kinetographdev/core からインポートします。これは kinetograph に付属しています。remotion はインストールしないでください。
  • アセットは staticFile('images/logo.png') で読み込みます。
  • 出力先にコードの隣やプロジェクトのルートは指定しないでください。-o を省略すると、still、strip、onion、render は out/ に書き込み、パスを表示します。
  • 2 つ目のコンポジションは、registerRoot の下にある別の <Composition id> です。--comp <id> で選択します。

コンポーネント、テンプレート、テイスト

レジストリにあるものを書き換えないでください。npx kinetograph add --list で一覧を表示できます（--type component|template|taste で絞り込めます）。npx kinetograph add <name…> で次のものがインストールされます。

  • コンポーネントは src/components/<name>/ に、テンプレート（リール全体）は src/templates/<name>/ に、テイスト（再利用可能なスタイル）は src/tastes/<name>/ にインストールされます。
  • それらのアセットは public/<kind>/<name>/ に、依存するレジストリ項目もインストールされます。

変更したファイルは上書きされません（--overwrite を指定すると上書きされます）。項目に必要な npm パッケージは、--yes を指定した場合（またはターミナルで yes と入力した場合）にのみインストールされます。--json を指定すると、コマンドを表示するだけで実行しません。--dir <folder> でプロジェクトを指定します。インポート文は next: の下に表示される内容を確認してください。

参考リールからテイストを作成するには、kinetograph-taste-clone を使用します（インストール済みの場合は kinetograph-ui リポジトリから利用できます）。

コメント

Markdown 対応