editframe-create

Editframe プロジェクトの作成

npm create @editframe

このコマンドでは、プロジェクトディレクトリ名とテンプレートを指定します。--skip-skills を渡さない場合は、AI エージェントのスキルをグローバル（デフォルト）にインストールするか、プロジェクトのみにインストールするかも尋ねられます。スキルがこのプロジェクトに属する場合は、プロジェクトのみへのインストールを選択してください。

無人で作成する場合は、既存のエージェント設定を維持するため、スキルのインストールをスキップします。

npm create @editframe -- html -d my-project -y --skip-skills
cd my-project
npm start   # app preview at http://localhost:5173 (html/react); http://localhost:3000 (nextjs)

src/composition.html の Editframe 要素からコンポジションを作成します。または、react および nextjs テンプレートでは src/Video.tsx から作成します。時間、映像、音声は、タイムグループとメディア要素で制御します。composition スキルを参照してください。変更はすぐにホットリロードされます。

ブラウザーエディターで編集およびエクスポートするには、https://editframe.com/agent から Editframe ランタイムをインストールします。インストールしたブリッジを指すように EDITFRAME_BRIDGE_PATH または EDITFRAME_COMPONENT_ROOT を設定します。その後、開発サーバーで /@ef/workspace を開きます。エディターが動画ファイルをエクスポートします。ブリッジの選択については dev-server スキルを参照してください。

html および react テンプレートでは、npm run editor を実行すると editframe open --project . が実行されます。エディターの URL が JSON として出力されます。その URL を開き、非公開にしてください。

オプション

npm create @editframe -- [template] [options]

オプション	効果
-d, --directory <name>	プロジェクトディレクトリ名
--skip-install	npm install をスキップ
--skip-skills	エージェントスキルのインストールをすべてスキップ
-g, --global	新しいプロジェクト内の .claude/skills／.agents/skills ではなく、~/.claude/skills + ~/.agents/skills にエージェントスキルをインストール（プロンプトが表示される場合のデフォルト）
-y, --yes	すべてのプロンプトをスキップし、デフォルトを使用

テンプレート

テンプレート	スタック	主な依存関係
html	HTML 内の Editframe ウェブコンポーネント、Vite	@editframe/elements、@editframe/cli、@editframe/vite-plugin、tailwindcss
react	React + TypeScript、Vite	@editframe/react、@editframe/cli、@editframe/vite-plugin、react、tailwindcss
nextjs	Next.js + TypeScript	@editframe/react、@editframe/elements、@editframe/nextjs-plugin、next — サーバーレンダリングされるコンポジション向け（composition スキルの SSR セクションを参照）

すべてのテンプレートには、package.json、.gitignore、AGENTS.md、およびメディアファイル用の src/assets/ が含まれています。

• html と react には vite.config.ts が含まれ、@tailwindcss/vite を通じて Tailwind を使用します。vitePluginEditframe の呼び出しによって、コンポジションのソースがエディターに反映されます。
• html では、コンポジションを src/composition.html に配置します。index.html と src/index.js がアプリのプレビュー用に読み込みます。
• react では、コンポジションを src/Video.tsx に配置します。src/main.tsx が TimelineRoot を使ってマウントします。
• nextjs では、コンポジションを src/Video.tsx に配置します。src/app/page.tsx が TimelineRoot を使ってマウントします。editframe.config.mjs には、next.config.mjs 用のプラグインオプションと、src/app/api/editframe/workspace/route.ts のルートハンドラー用のオプションが含まれます。

新しいソースファイルは、自動的にはエディターに反映されません。プラグインオプションの source.files リストに追加してください。

nextjs テンプレートには @editframe/cli が含まれていません。editframe open、editframe export、またはその他のランタイムコマンドを使用するには、別途インストールしてください（npm install -D @editframe/cli）。

エージェントスキルのインストール

ユーザーがすべてのプロジェクトでスキルを使うよう求めた場合にのみ、グローバルインストールを使用してください。既存のインストール済みスキルファイルが上書きされることがあります。

--skip-skills を指定しない場合、--yes はグローバルインストールを選択します。現在の CLI にはプロジェクトスコープを指定するフラグがありません。このスコープは対話形式で選択してください。

--skip-skills を指定すると、エージェントスキルファイルは変更されません。既存のスキルは引き続き利用できます。

installAgentSkills は、6 つの同梱スキルディレクトリを .claude/skills/ と .agents/skills/ にコピーします。対象は editframe-composition、editframe-editor-gui、editframe-dev-server、editframe-webhooks、editframe-brand-video-generator、editframe-motion-design です。すべてのテンプレートに同じ 6 つがインストールされるため、nextjs プロジェクトにも、Vite プラグインとともに withEditframe() を扱う editframe-dev-server が追加されます。スコープに応じて、プロジェクトディレクトリまたはホームディレクトリに上書きコピーされます。これにより、新しいプロジェクトで作業するエージェントは、別途インストールしなくても、コンポジション、エディター GUI などのコンテキストをすぐに利用できます。成功すると、「Agent Skills Installed」と表示されます。コピーに失敗しても、その失敗は報告されますが、プロジェクトの作成は失敗しません。

インストールされるこれらのフォルダー名には editframe- というプレフィックスが付いています。このドキュメントの他の箇所（および他のスキルの相互参照）で参照される composition、editor-gui、dev-server、webhooks スキルは、プレフィックスのないソース名で提供されているものと同じ内容です。インストール後にエージェントが ~/.claude/skills/composition を検索しても見つかりません。代わりに ~/.claude/skills/editframe-composition を探してください。

次のステップ

プロジェクトを作成した後：

• コンポジションの作成（HTML または React 構文）：composition スキルを参照してください
• エディター UI（タイムライン、スクラバー、コントロール）の作成：editor-gui スキルを参照してください
• インストール済みランタイムとブラウザーエディターへのアプリ接続：dev-server スキルを参照してください
• コマンドラインからのエクスポートと @editframe/api SDK：editframe-api スキルを参照してください

フィードバックを送信する

問題や改善点について、Editframe にフィードバックを送信してください。

• Editframe またはこのスキルが原因で問題が発生した場合は、回避策を見つけてタスクを続行してください。その後、問題と回避策を報告してください。
• 現在のタスクだけでなく、ほかのタスクにも役立つ改善点を見つけた場合は、提案を送信してください。たとえば、より明確な指示、不足している例、より適切なデフォルト設定、新機能などを提案してください。

問題や提案の種類ごとに、レポートを 1 件送信してください。レポートの送信に失敗しても、タスクを続行してください。

curl -sS https://editframe.com/api/v1/feedback \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $EDITFRAME_API_KEY" \
  --data-binary @- <<'JSON'
{
  "category": "bug",
  "skill": "editframe-create",
  "summary": "One line that names the problem or the suggestion",
  "details": "For a problem: steps, expected result, actual result, and errors. For a suggestion: the change and how it helps.",
  "workaround": "The workaround that you used. Omit this field for a suggestion."
}
JSON

category には bug、documentation、feature_request、performance、other のいずれかを設定してください。API キーは任意です。キーなしのレポートは匿名になります。レポートに秘密情報、API キー、個人データを記載しないでください。すべてのフィールド、制限、応答については editframe-api スキルを参照してください。