Hyperframes

You're building video content in HTML and rendering it to MP4. This handles the full production flow: timed compositions with GSAP animation, audio-reactive visuals that pulse to music, synced captions, TTS voiceovers, kinetic typography with marker sweeps and hand-drawn effects, and shader-based transitions. Inside Open Design projects it uses a scaffold workflow that gets you from prompt to rendered video in seconds instead of minutes by editing a pre-wired composition rather than writing from scratch. The visual identity gate is real: it won't let you proceed with placeholder colors, you need either a DESIGN.md or answers to specific mood questions first. Covers everything except CLI commands, which live in the separate hyperframes-cli skill.

skills.sh installs: 220
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill hyperframes --agent claude-code

Installs into .claude/skills of the current project.

Files

HyperFrames

HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.

OpenDesign integration (load-bearing for this surface)

When this skill runs inside OpenDesign (i.e. $OD_PROJECT_DIR is set), the output flow is fixed: only the rendered .mp4 should land in the project root. Composition source files (hyperframes.json, meta.json, index.html, assets) belong inside a hidden cache directory so they don't clutter the user's FileViewer or the chat's "produced files" chips.

Render workflow inside OD — fast path:

For most OD requests ("test video", "5s product reveal", "demo clip"), do NOT write the composition HTML from scratch. Use Open Design's deterministic scaffold and edit only what the prompt actually changes. The "author from scratch" path costs minutes of model output and silent chat-tool time; the scaffold path costs seconds.

SKILL.md on GitHub

Details

Repository: github.com/nexu-io/open-design
Categories: Frontend Development, DevOps & CI/CD, Code Review & Quality, Automation & Workflows, Design & UI/UX, CLI & Terminal, Game Development, Generative Media
First seen: Jun 3, 2026