Individual skill
hyperframes
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
design-templates/hyperframes/SKILL.md
Source commit e7a18df64d0e5e1161903e93bb5a302229dbeb96
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 106,633
- Repository last updated
- Nov 8, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-design Repository topic
- byok Repository topic
- design-systems Repository topic
- claude-design Repository topic
- hermes-agent Repository topic
- agent-skills Repository topic
- desktop-app Repository topic
- figma-alternative Repository topic
- prototyping Repository topic
- ui-generator Repository topic
- operations Derived category
- writing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesSKILL.mdcore · 28,341 bytesdata-in-motion.mddoc · 1,296 byteshouse-style.mddoc · 4,585 bytespalettes/bold-energetic.mddoc · 417 bytespalettes/clean-corporate.mddoc · 410 bytespalettes/dark-premium.mddoc · 389 bytespalettes/jewel-rich.mddoc · 394 bytespalettes/monochrome.mddoc · 454 bytespalettes/nature-earth.mddoc · 399 bytespalettes/neon-electric.mddoc · 380 bytespalettes/pastel-soft.mddoc · 392 bytespalettes/warm-editorial.mddoc · 411 bytespatterns.mddoc · 2,761 bytesreferences/audio-reactive.mddoc · 3,064 bytesreferences/captions.mddoc · 5,515 bytesreferences/css-patterns.mddoc · 8,312 bytesreferences/dynamic-techniques.mddoc · 6,886 bytesreferences/html-in-canvas.mddoc · 7,326 bytesreferences/motion-principles.mddoc · 3,907 bytesreferences/transcript-guide.mddoc · 8,246 bytesreferences/transitions.mddoc · 11,709 bytesreferences/transitions/catalog.mddoc · 6,290 bytesreferences/transitions/css-3d.mddoc · 421 bytesreferences/transitions/css-blur.mddoc · 1,787 bytesreferences/transitions/css-cover.mddoc · 1,448 bytesreferences/transitions/css-destruction.mddoc · 4,484 bytesreferences/transitions/css-dissolve.mddoc · 2,462 bytesreferences/transitions/css-distortion.mddoc · 1,803 bytesreferences/transitions/css-grid.mddoc · 370 bytesreferences/transitions/css-light.mddoc · 2,376 bytesreferences/transitions/css-mechanical.mddoc · 1,613 bytesreferences/transitions/css-other.mddoc · 838 bytesreferences/transitions/css-push.mddoc · 1,195 bytesreferences/transitions/css-radial.mddoc · 1,060 bytesreferences/transitions/css-scale.mddoc · 715 bytesreferences/tts.mddoc · 2,730 bytesreferences/typography.mddoc · 9,326 bytesscripts/animation-map.mjsruns · 19,405 bytesscripts/contrast-report.mjsruns · 12,192 bytesscripts/package-loader.mjsruns · 8,328 bytesvisual-styles.mddoc · 9,952 bytes
Read excerpt
# 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**: