zooqueen
62bbc7766c
Every SKILL.md already declared the new name — name: frames, frames-cli, frames-core, and so on — but the directories were never moved, so the tree carried frames-* in content and hyperframes-* on disk. Everything that resolves a skill by path missed: the core-skill list, the plugin marketplace pin, and the docs the CLI reads at runtime. Eight tests failed on main because the files they open do not exist. The directories now match what the files say they are, and the guide the claude-design contract reads takes the name that contract already used.
3.7 KiB
init, capture, skills
Scaffolding commands. Use these instead of creating files by hand — they set up the right file structure, copy media, run transcription, and install AI coding skills.
init
npx @hanzo/frames init my-video # TTY: interactive wizard
npx @hanzo/frames init my-video --example warm-grain # pick an example
npx @hanzo/frames init my-video --example blank --resolution portrait
npx @hanzo/frames init my-video --video clip.mp4 # with video file
npx @hanzo/frames init my-video --audio track.mp3 # with audio file
npx @hanzo/frames init my-video --example blank --tailwind # Tailwind v4 browser runtime
npx @hanzo/frames init my-video --non-interactive --example blank # CI/agents — flag-only
Default depends on TTY: in a terminal, the CLI prompts for example/options. Outside a TTY (CI, agents, piped output) it auto-switches to non-interactive and requires --example (the CLI errors with a usage example if missing). Pass --non-interactive to force flag-only mode even on a TTY.
Templates: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.
Other useful flags:
--resolution— preset:landscape(1920×1080),portrait(1080×1920),landscape-4k,portrait-4k,square(1080×1080),square-4k. Aliases:1080p,4k,uhd,1080p-square,4k-square.--skill=<slug>— record the owning authoring workflow (e.g.product-launch-video) inframes.json, so every later render of this project — re-renders,npm run render,--batch— is attributed to it on anonymous telemetry without re-passing the flag. Creation workflows set this automatically; you rarely pass it by hand.--skip-skills— temporarily ignored:initalways checks AI coding skills against GitHub while the skills.sh registry catches up. To opt out (CI/tests), set theFRAMES_SKIP_SKILLS=1env var instead.--skip-transcribe— don't auto-transcribe--audio/--videowith Whisper.--model,--language— Whisper model / language for the auto-transcription.
When using --tailwind, invoke the frames-core (Tailwind reference) skill before editing classes or theme tokens. The scaffold uses Tailwind v4 browser runtime patterns, not Studio's Tailwind v3 setup.
When --audio or --video is supplied, init transcribes the file with Whisper. For voice/model selection see the media-use skill.
capture
npx @hanzo/frames capture https://stripe.com # scaffold from a website
npx @hanzo/frames capture https://linear.app -o linear-video # custom output directory
npx @hanzo/frames capture https://example.com --json # JSON output for agents
npx @hanzo/frames capture https://example.com --skip-assets # skip image/SVG download
npx @hanzo/frames capture https://example.com --max-screenshots 12
npx @hanzo/frames capture https://example.com --timeout 60000 # page-load timeout in ms
Captures a live URL as an editable Frames project: screenshots become layered scenes, assets are downloaded locally, and the result is a normal project you can lint / preview / render. Use this when the user supplies a URL as the starting point for a video.
skills
npx @hanzo/frames skills # install Frames skills for AI coding tools
One-time setup that adds the Frames skill pack (frames-core, -creative, -animation, -cli, -registry, -media, plus the product-launch-video and frames orchestrators) to the local AI coding environment so agents follow the framework conventions. Re-run after major Frames upgrades.