mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 10:06:21 +00:00
WaterrrForeverandClaude Opus 4.8
3b3ece81d1
Make /hyperframes the single entry skill and bring the docs back in sync with the #1349 skills refactor. Skills: - Rename hyperframes-read-first -> hyperframes so the leaderboard-tracked /hyperframes is the entry/router skill; description leads with "READ THIS FIRST" to preserve the read-first intent. Update all references across CLAUDE.md, AGENTS.md, CLI templates, test script, and workflow SKILLs. Docs (closes the quickstart confusion in #1428): - quickstart + prompting: replace the dead standalone runtime slash commands (/gsap /lottie /three /waapi /animejs /css-animations /tailwind) with the real surface; document the picker as required core skills (8) vs optional workflows, with --all as the install-everything shortcut. - frame-adapters: map every runtime to /hyperframes-animation. - packages/cli: /tailwind -> /hyperframes-core; rewrite the skills-include blurb around the current domain skills. - copilot-cli/pipeline/migrating-to-lambda: /hyperframes is the router; the composition contract lives in /hyperframes-core. Fix a dead /gsap example. - antigravity: stop listing gsap/ and tailwind/ as separate skill dirs. - contributing/catalog: /contribute-catalog -> /hyperframes-registry. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
52 lines
3.2 KiB
Markdown
52 lines
3.2 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
npx hyperframes init my-video # TTY: interactive wizard
|
||
npx hyperframes init my-video --example warm-grain # pick an example
|
||
npx hyperframes init my-video --example blank --resolution portrait
|
||
npx hyperframes init my-video --video clip.mp4 # with video file
|
||
npx hyperframes init my-video --audio track.mp3 # with audio file
|
||
npx hyperframes init my-video --example blank --tailwind # Tailwind v4 browser runtime
|
||
npx hyperframes 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`.
|
||
- `--skip-skills` — don't install AI coding skills after scaffold.
|
||
- `--skip-transcribe` — don't auto-transcribe `--audio` / `--video` with Whisper.
|
||
- `--model`, `--language` — Whisper model / language for the auto-transcription.
|
||
|
||
When using `--tailwind`, invoke the `hyperframes-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 `hyperframes-media` skill.
|
||
|
||
## capture
|
||
|
||
```bash
|
||
npx hyperframes capture https://stripe.com # scaffold from a website
|
||
npx hyperframes capture https://linear.app -o linear-video # custom output directory
|
||
npx hyperframes capture https://example.com --json # JSON output for agents
|
||
npx hyperframes capture https://example.com --skip-assets # skip image/SVG download
|
||
npx hyperframes capture https://example.com --max-screenshots 12
|
||
npx hyperframes capture https://example.com --timeout 60000 # page-load timeout in ms
|
||
```
|
||
|
||
Captures a live URL as an editable HyperFrames 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
|
||
|
||
```bash
|
||
npx hyperframes skills # install HyperFrames skills for AI coding tools
|
||
```
|
||
|
||
One-time setup that adds the HyperFrames skill pack (`hyperframes-core`, `-creative`, `-animation`, `-cli`, `-registry`, `-media`, plus the `product-launch-video` and `hyperframes` orchestrators) to the local AI coding environment so agents follow the framework conventions. Re-run after major HyperFrames upgrades.
|