← ClaudeAtlas

hyperframes-clilisted

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
tranbathanhtung/dddx · ★ 1 · AI & Automation · score 64
Install: claude install-skill tranbathanhtung/dddx
# HyperFrames CLI Everything runs through `npx hyperframes`. Requires Node.js >= 22 and FFmpeg. ## Workflow 1. **Scaffold** — `npx hyperframes init my-video` 2. **Write** — author HTML composition (see the `hyperframes` skill) 3. **Lint** — `npx hyperframes lint` 4. **Visual inspect** — `npx hyperframes inspect` 5. **Preview** — `npx hyperframes preview` 6. **Render** — `npx hyperframes render` Lint and inspect before preview. `lint` catches missing `data-composition-id`, overlapping tracks, and unregistered timelines. `inspect` opens the rendered composition in headless Chrome, seeks through the timeline, and reports text spilling out of bubbles/containers or off the canvas. ## Scaffolding ```bash npx hyperframes init my-video # interactive wizard npx hyperframes init my-video --example warm-grain # pick an example 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 # with Tailwind v4 browser runtime npx hyperframes init my-video --non-interactive # skip prompts (CI/agents) ``` Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`. `init` creates the right file structure, copies media, transcribes audio with Whisper, and installs AI coding skills. Use it instead of creating files by hand. When using `--tailwin