theatrejs

v2026.09.24

Theatre.js アニメーションツールキットリファレンス。 @theatre/core / @theatre/studio / @theatre/r3f / @theatre/dataverse。 getProject, Sheet, Sequence, Object, val, onChange, prop-types(number / rgba / compound / image)。 studio initialize / extend / transaction / scrub / createPane。 SheetProvider, editable, useCurrentSheet, useVal, usePrism, useAtom。 keyframe アニメーション、audio sync、state JSON、React Three Fiber 統合。

GitHub
安装命令
npx skhub add fandhe-ai/theatrejs
Markdown
SKILL.md

ディレクトリ構成

skills/theatrejs/
  SKILL.md
  references/
    concepts/
      README.md
      overview.md
      getting-started.md
      project.md
      sheet.md
      sheet-object.md
      sequence.md
      prop-types.md
      studio.md
      state.md
    core/
      README.md
      get-project.md
      project.md
      sheet.md
      sequence.md
      object.md
      types.md
      val.md
      on-change.md
      dataverse.md
    studio/
      README.md
      studio-initialize.md
      studio-extend.md
      studio-transaction.md
      studio-scrub.md
      studio-selection.md
      studio-create-pane.md
      studio-get-studio-project.md
      studio-create-content-of-save-file.md
      studio-ui.md
      keyboard-mouse-controls.md
      authoring-extensions.md
    r3f/
      README.md
      SheetProvider.md
      editable.md
      PerspectiveCamera.md
      OrthographicCamera.md
      useCurrentSheet.md
      refreshSnapshot.md
      extension.md
      useVal.md
      usePrism.md
      useAtom.md
    manual/
      README.md
      projects.md
      sheets.md
      objects.md
      prop-types.md
      sequences.md
      assets.md
      audio.md
      advanced.md
  samples/
    README.md
    basic-animation-setup.md
    react-three-fiber-integration.md
    audio-sync.md
    studio-editing-workflow.md
    html-dom-animation.md
  scripts/
    README.md
    install.md
    setup.md
    animation.md
    studio.md
    r3f.md
    theatric.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

  1. 下記マッピング表でタスクに対応するカテゴリを探す
  2. そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
  3. 該当ページの .md を Read して詳細を確認する

タスク → カテゴリ マッピング

タスクカテゴリ参照 README
Theatre.js の概念・全体像を把握したいconceptsreferences/concepts/README.md
セットアップ手順・はじめての実装を知りたいconceptsreferences/concepts/README.md
Project / Sheet / Sequence / Object の概念を理解したいconceptsreferences/concepts/README.md
state JSON の構造・シリアライズを知りたいconceptsreferences/concepts/README.md
getProject でプロジェクトを作成・取得したいcorereferences/core/README.md
Sheet / Sequence / Object の API シグネチャを調べたいcorereferences/core/README.md
prop-types(number / rgba / compound / image)を定義したいcorereferences/core/README.md
val / onChange でポインター値を読み取り・購読したいcorereferences/core/README.md
@theatre/dataverse の Atom / prism / Ticker を使いたいcorereferences/core/README.md
Studio を初期化・拡張したいstudioreferences/studio/README.md
Studio でトランザクション・スクラブ操作をしたいstudioreferences/studio/README.md
Studio の選択状態・カスタムペインを操作したいstudioreferences/studio/README.md
Studio の保存ファイルをエクスポート・カスタム永続化したいstudioreferences/studio/README.md
Studio のキーボード・マウス操作を調べたいstudioreferences/studio/README.md
Studio 拡張機能(ツールバー・ペイン)を作成したいstudioreferences/studio/README.md
React Three Fiber シーンをアニメートしたいr3freferences/r3f/README.md
SheetProvider / editable でオブジェクトを編集可能にしたいr3freferences/r3f/README.md
useCurrentSheet / useVal / usePrism / useAtom を使いたいr3freferences/r3f/README.md
R3F カメラ(PerspectiveCamera / OrthographicCamera)をアニメートしたいr3freferences/r3f/README.md
プロジェクト・シート・オブジェクトの手動設定手順を知りたいmanualreferences/manual/README.md
シーケンス再生・ループ・ポジション制御を知りたいmanualreferences/manual/README.md
アセット(画像・テクスチャ)を props に使いたいmanualreferences/manual/README.md
音声をアニメーションと同期したいmanualreferences/manual/README.md
カスタム rafDriver で外部レンダーループと連携したいmanualreferences/manual/README.md
典型的な使い方を知りたいsamplessamples/README.md
インストール・CLI コマンドを知りたいscriptsscripts/README.md
发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

2026年9月24日

分类

未分类

许可证

未指定

源路径

skills/theatrejs

默认分支

main

最新提交

f360956

Tree SHA

7af33bc