mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-02 20:18:35 +00:00

Files

T

WaterrrForever 3bb26b0f08 docs(skills): make the core set the default install on every surface (#2554 )

* docs(skills): make the core set the default install on every surface

A field test showed an agent with a real 'make videos' intent installing
all 19 skills: at install time, every surface it could read pointed at the
full set, while the core-eager / workflow-on-demand design only exists
inside hyperframes/SKILL.md - unreadable until after the install decision.

Two traps made full-install the documented default:
- The README Quick Start used 'skills add --yes': skills.sh force-detects
  agent environments into non-interactive mode, and a non-interactive run
  without --skill installs all 19. Dropping --yes fixes the human path
  (the picker opens with nothing pre-selected), but not the agent path.
- marketplace.json listed the full 'hyperframes' bundle first, under the
  name an agent installing 'hyperframes' matches; core-skills sat second.

Changes, each behavior verified by an isolated run:
- README Quick Start drops --yes (humans get the picker; verified via a
  pty capture that nothing is pre-selected) and points agents and
  non-interactive runs at 'npx hyperframes skills update', which from a
  clean HOME installs exactly the 8 core skills, refreshes stale ones and
  prunes unpublished ones on an existing machine, and is idempotent.
- CLAUDE.md and the docs install guide lead with the same one-liner;
  --all is reworded to explicit-request-only at every surface.
- marketplace.json puts core-skills first and both descriptions steer the
  default choice; the full entry keeps auto-discovery (no allowlist),
  per the skillsManifest core-pin test (56/56 pass).

* docs(skills): close the same install trap in AGENTS.md

Review follow-up on the core-default change: AGENTS.md still carried a
bare 'npx skills add heygen-com/hyperframes' - no --full-depth, and the
same non-interactive-installs-everything trap the README fix closed.
AGENTS.md is the first file Codex/Cursor-family agents read for repo
intent, so it leaked the full-set default to exactly the readers the
core-default policy targets. It now leads with the same core-set
one-liner and policy line as CLAUDE.md.

2026-07-17 00:49:43 +08:00

10 KiB

Raw Blame History

Hyperframes

Open-source video rendering framework: write HTML, render video.

Skills

This repo ships 19 AI agent skills via vercel-labs/skills. Install them before writing compositions — they encode framework-specific patterns that generic docs don't cover. Default to the core set: the /hyperframes router installs each creation workflow on demand; install all 19 only when the user explicitly asks for the full set.

npx hyperframes skills update                                   # default: installs/refreshes the core set — workflows install on demand
npx skills add heygen-com/hyperframes --full-depth              # interactive picker (terminal only — non-interactive without --skill installs all 19)
npx skills add heygen-com/hyperframes --all --full-depth        # all 19 at once — only on explicit request
npx skills add heygen-com/hyperframes --skill <name> --full-depth  # just one (bare name, no leading slash)

Keep --full-depth: it installs the current main. Without it, skills add fetches the skills.sh registry blob, which lags main by hours (you'd get a stale skill). hyperframes skills update already uses full-depth.

/hyperframes is the entry skill — read it first. It's the capability map for the domain skills below, the intent layer that confirms every creation brief up front, AND the intent router for the creation workflows. The full README skills section mirrors this list; keep them in sync (see "Skill catalog maintenance" below).

Creation workflows

/product-launch-video — any website URL (or a pre-written script / text brief in no-capture mode) → a product launch / promo video, or a site tour / showcase featuring the site's own captured screens; up to ~3 min (sweet spot ~30-90s).
/faceless-explainer — arbitrary text, no URL and no website capture → faceless explainer, up to ~3 min (sweet spot ~30-90s); every visual is LLM-invented (typography / abstract graphics / diagram / data-viz).
/pr-to-video — a GitHub PR (URL / owner/repo#N / "this PR") → code-change explainer, up to ~3 min (changelog / feature reveal / fix / refactor). A PR link, not a product website.
/embedded-captions — an existing talking-head video (MP4) → the same footage with captions / subtitles added (verbatim rail + embedded climax, or pure-cinematic embed); the footage itself is untouched (no NLE-style editing).
/talking-head-recut — an existing talking-head / interview / podcast video (MP4) → the same footage packaged with designed graphic overlays (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, PiP) synced to the transcript; the clip plays unchanged underneath, footage untouched. For plain captions/subtitles → /embedded-captions.
/motion-graphics — a short (typically under 10s) design-led motion graphic, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → /general-video.
/music-to-video — a music track (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
/slideshow — a presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
/general-video — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of companion mode — co-create with the full HyperFrames toolbox; the original hyperframes flow — design → plan → layout → build → validate, any length.
/remotion-to-hyperframes — port an existing Remotion (React) composition to HyperFrames HTML. One-way migration, not creation.

Domain skills (loaded on demand)

Atomic capabilities the creation workflows compose against — pull one when you need that specific layer:

/hyperframes-core — the composition contract: data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, determinism rules. Read before writing composition HTML.
/hyperframes-animation — all animation knowledge: atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP default, plus Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
/hyperframes-keyframes — seek-safe keyframe authoring across runtimes: GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth; plus hyperframes keyframes diagnostics for surfacing and verifying rendered motion.
/hyperframes-creative — non-animation creative direction: frame.md / design.md handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
/media-use — the media OS: resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record; generate via TTS / music / image models when the catalog misses; transcribe, caption, remove backgrounds, and reuse assets across projects. One shared scripts/audio.mjs engine + manifest tracking; keeps search noise on disk.
/hyperframes-cli — CLI dev loop: init, add, lint, check, snapshot, preview, render, publish, doctor, lambda (AWS Lambda cloud rendering).
/hyperframes-registry — install and wire registry blocks and components into compositions via hyperframes add. Covers authoring a new block or component to contribute upstream.
/figma — import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.

Skill catalog maintenance

When adding a new skill, or substantially renaming / repurposing an existing one, update all agent-facing discoverability surfaces in lockstep:

The skill list above (CLAUDE.md) AND the workflow list in the root AGENTS.md (it carries workflows only, no domain-skill section) AND the ## Skills section in README.md AND docs/guides/skills.mdx (rendered at hyperframes.heygen.com/guides/skills). Out-of-date entries silently kill discovery.
The scaffolded project template packages/cli/src/templates/_shared/CLAUDE.md + AGENTS.md — written into every hyperframes init project, so a stale entry there ships to users. The two template files must stay byte-identical.
If the skill changes the routing surface for "make a video" requests, also update the routing table + intent layer in skills/hyperframes/SKILL.md AND that workflow's entry in skills/hyperframes/references/workflow-catalog.md (the input/output/trigger contract the router reads before the workflow is installed) — plus its row in references/route-briefs.md when the route asks questions.
Mirror the Router / Creation workflows / Domain skills grouping across all surfaces so a skill always lives in the same column.
Skill count appears in the README and CLAUDE.md intro lines ("19 AI agent skills…") — update on add/remove. The docs/guides/skills.mdx page and the CLI templates deliberately omit a count to avoid drift; keep them count-free.

The skill's own SKILL.md frontmatter description: is the source of truth for the one-line "use when" blurb; copy from there into the catalog rather than paraphrasing.

Build & Test

bun install     # Install dependencies (NOT pnpm — do not create pnpm-lock.yaml)
bun run build   # Build all packages
bun run test    # Run all tests

Linting & Formatting

Uses oxlint and oxfmt (not eslint, not prettier, not biome).

bunx oxlint <files>        # Lint
bunx oxfmt <files>         # Format
bunx oxfmt --check <files> # Check formatting (CI / pre-commit)

Always lint and format changed files before committing. Lefthook pre-commit hooks enforce this automatically.

Composition Validation

After creating or editing any .html composition:

npx hyperframes lint       # Static HTML structure check
npx hyperframes check      # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)

Both must pass before previewing or considering work complete.

Project Structure

packages/
  cli/                  → hyperframes CLI (create, preview, lint, render)
  core/                 → Types, parsers, generators, linter, runtime, frame adapters
  engine/               → Seekable page-to-video capture engine (Puppeteer + FFmpeg)
  player/               → Embeddable <hyperframes-player> web component
  producer/             → Full rendering pipeline (capture + encode + audio mix)
  shader-transitions/   → WebGL shader transitions for compositions
  studio/               → Browser-based composition editor UI
registry/
  blocks/               → Installable sub-composition scenes (50+)
  components/           → Installable effects and snippets
  examples/             → Starter project templates
docs/                   → Mintlify documentation site (hyperframes.heygen.com)
skills/                 → AI agent skill definitions

Key Conventions

Package manager: bun (not pnpm, not npm for workspace operations)
Commit format: Conventional commits (feat:, fix:, docs:, refactor:, test:)
TypeScript: Avoid any and as T assertions. Prefer type guards and narrowing.
Compositions: HTML files with data-* attributes. Clips need class="clip". GSAP timelines must be paused and registered on window.__timelines.
Frame Adapters: Animation runtimes plug in via the seek-by-frame adapter pattern. GSAP is the primary adapter.
Deterministic rendering: No Date.now(), no unseeded Math.random(), no render-time network fetches.

Documentation

Docs: https://hyperframes.heygen.com/introduction
Catalog (50+ blocks): https://hyperframes.heygen.com/catalog/blocks/data-chart

10 KiB Raw Blame History