hyperframes-cli
HyperFrames CLI dev loop — project scaffolding, validation (lint/inspect), browser preview with live reload, MP4/WebM rendering, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any npx hyperframes command or troubleshooting the build/render environment. For composition authoring see the hyperframes skill; for asset preprocessing (tts, transcribe, remove-background) see the hyperframes-media skill.
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill hyperframes-cli --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# HyperFrames CLI — Dev Loop 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. Render before delivery. --- ## Scaffolding ```bash npx hyperframes init my-video # interactive wizard npx hyperframes init my-video --example warm-grain # pick a template 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 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
- Workflow
- Scaffolding
- Linting
- Visual Inspect
- Previewing
- Rendering
- Troubleshooting
- Other Commands
- Related Skills
npx hyperframes init my-video # interactive wizard npx hyperframes init my-video --example warm-grain # pick a template 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 npx hyperframes init my-video --non-interactive # skip prompts (CI/agents) npx hyperframes lint # current directory npx hyperframes lint ./my-project # specific project npx hyperframes lint --verbose # info-level findings npx hyperframes lint --json # machine-readable
What does the hyperframes-cli skill do?
HyperFrames CLI dev loop — project scaffolding, validation (lint/inspect), browser preview with live reload, MP4/WebM rendering, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any npx hyperframes command or troubleshooting the build/render environment. For composition authoring see the hyperframes skill; for asset preprocessing (tts, transcribe, remove-background) see the hyperframes-media skill.
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill hyperframes-cli --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.