Communitygithub.com

suryxnshsingh/hyperframes

Write HTML/CSS and render deterministic MP4 with HeyGen's HyperFrames; ~450 ready blocks (transitions, kinetic type, captions, charts, maps, 3D), a /figma sub-skill that pulls brand tokens and frames into video, reverse-any-video, slideshow/present mode, and Remotion-to-HyperFrames porting. Use for launch films, explainers, social clips, title cards, or when the user wants video from HTML rather than React.

What is hyperframes?

hyperframes is a Claude Code agent skill that write HTML/CSS and render deterministic MP4 with HeyGen's HyperFrames; ~450 ready blocks (transitions, kinetic type, captions, charts, maps, 3D), a /figma sub-skill that pulls brand tokens and frames into video, reverse-any-video, slideshow/present mode, and Remotion-to-HyperFrames porting. Use for launch films, explainers, social clips, title cards, or when the user wants video from HTML rather than React.

Works with✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/hyperframes
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

hyperframes (live upstream pointer)

Upstream: https://github.com/heygen-com/hyperframes · docs: https://hyperframes.heygen.com · catalog: https://hyperframes.heygen.com/catalog

1. Preferred install (versioned plugin with auto-update)

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# or per-project:
npx hyperframes skills update

After that use /hyperframes:hyperframes (router), plus figma, hyperframes-cli, hyperframes-registry, media-use, reverse-any-video, slideshow, remotion-to-hyperframes.

2. Fallback: read the live skills directly

bash ~/.claude/skills/design-engineer/scripts/upstream.sh hyperframes     # sparse checkout: skills/, docs/guides, README, AGENTS

Start with <PATH>/skills/hyperframes/SKILL.md (render contract and work loop). Then the one sub-skill that matches:

  • Figma link or brand tokens → skills/figma/SKILL.md
  • Named visual (glitch, grain, chart, map) → skills/hyperframes-registry/SKILL.md before hand-building anything
  • Music, SFX, voiceover, avatar, cutouts → skills/media-use/SKILL.md
  • Copy an existing video → skills/reverse-any-video/SKILL.md
  • Deck / live presentation → skills/slideshow/SKILL.md
  • Porting Remotion/Lottie/Three/Manim → skills/remotion-to-hyperframes/SKILL.md

3. CLI (Node 22+)

npx hyperframes init my-video && cd my-video
npx hyperframes add data-chart
npx hyperframes preview
npx hyperframes render

4. Choosing against Remotion

Team already in React/Remotion → remotion. Real-page product promo with shot cards → video-shotcraft. Stylized short film with narration and score → lemo-opuscar.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

suryxnshsingh/design-engineer

Orchestrator for frontend and design-engineering work. Read this first whenever a task involves UI design, design systems, visual polish or AI-slop review, diagrams, videos or promos, 3D (Three.js or Blender), or Penpot/Figma files. It routes to the right specialist skill (impeccable, ui-ux-pro-max, diagram-design, hyperframes, remotion, video-shotcraft, lemo-opuscar, img2threejs, blender-mcp, penpot), chains them for multi-step jobs, and keeps every one on its latest upstream.

suryxnshsingh/video-shotcraft

Make cinematic product promo videos of a real web app in Remotion: captures the real pages, picks from ~124-150 shot recipe cards, offers the Ink Press template, beat sync and Freesound sound design. Use for "make a promo/launch video of my site/app", single shot-card effects, or finding/aligning SFX for an existing product video. Always fetches latest.

Related Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community