Editframe Create

Create Editframe Project

npm create @editframe

This command asks for a project directory name and a template. Unless you pass --skip-skills, it also asks whether to install AI agent skills globally (the default) or into the project only. Or skip the prompts:

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

Edit index.html (or src/Video.tsx for the react template) to build the composition. Changes hot-reload instantly. Then render:

npx editframe render -o output.mp4

Options

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

Templates

Every template ships a package.json, a .gitignore, an AGENTS.md, and src/assets/ for media files. html and react also get a vite.config.ts, with Tailwind through @tailwindcss/vite. html's entry point is index.html plus src/index.js. react's entry point is src/main.tsx (with TimelineRoot) plus src/Video.tsx. nextjs's entry point is src/app/layout.tsx plus src/app/page.tsx.

The nextjs template does not include @editframe/cli. Install it separately (npm install -D @editframe/cli) to use editframe render, editframe transcribe, or other CLI commands in that template.

Agent Skills Installation

installAgentSkills copies six bundled skill directories into .claude/skills/ and .agents/skills/: editframe-composition, editframe-editor-gui, editframe-dev-server, editframe-webhooks, editframe-brand-video-generator, and editframe-motion-design. The same six install for every template, so a nextjs project also gets editframe-dev-server, which covers withEditframe() alongside the Vite plugin. Depending on scope, this rewrites into the project directory or into the home directory. This gives an agent working in the new project immediate composition, editor-gui, and other context, with no separate install step. On success, it prints "Agent Skills Installed". A copy failure is reported but does not fail project creation.

These installed folder names carry an editframe- prefix. The composition, editor-gui, dev-server, and webhooks skills referenced elsewhere in this document (and by other skills' cross-references) are the same content under their unprefixed source names. An agent searching ~/.claude/skills/composition after installation will not find it. Look for ~/.claude/skills/editframe-composition instead.

Next Steps

After creating a project:

• Building compositions (HTML or React syntax): see the composition skill
• Building editor UIs (timeline, scrubber, controls): see the editor-gui skill
• Rendering, previewing, transcribing from the CLI, and the @editframe/api SDK: see the editframe-api skill