Communitygithub.com

suryxnshsingh/hyperframes

Schreibe HTML/CSS und rendere deterministische MP4-Videos mit Heygen HyperFrames; ~450 fertige Bausteine (Übergänge, Kinetic Typography, Untertitel, Diagramme, Karten, 3D), ein /figma-Subskill, das Marken-Tokens und Frames in Videos einbindet, Videos rückwärts analysiert, Präsentationsmodus und Remotion-zu-HyperFrames-Portierung. Verwende es für Launch-Filme, Erklärvideos, Social-Clips, Titelcards oder wenn der Nutzer Video aus HTML statt React möchte.

Was ist hyperframes?

HyperFrames von HeyGen ist ein KI-gestütztes Tool, das es Entwicklern und Designern ermöglicht, Videos direkt aus HTML/CSS zu erstellen und als deterministische MP4-Dateien zu rendern. Es bietet rund 450 vorgefertigte Bausteine wie Übergänge, Kinetic Typography, Untertitel, Diagramme, Karten und 3D-Elemente, die über eine CLI einfach kombiniert werden können. Das Skill unterstützt mehrere Plattformen (Claude Code, Cursor, Codex) und enthält spezialisierte Subskills wie /figma zur Integration von Design-Tokens, /reverse-any-video zur Analyse bestehender Videos, /slideshow für Präsentationen und /remotion-to-hyperframes zur Portierung von Remotion-Projekten. Es ist ideal für Launch-Filme, Erklärvideos, Social-Media-Clips und Titelcards – insbesondere wenn der Nutzer Video aus HTML statt React erstellen möchte.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/hyperframes
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

hyperframes (Live-Upstream-Verweis)

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

1. Bevorzugte Installation (versioniertes Plugin mit automatischem Update)

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# oder pro Projekt:
npx hyperframes skills update

Danach verwende /hyperframes:hyperframes (Router) sowie figma, hyperframes-cli, hyperframes-registry, media-use, reverse-any-video, slideshow, remotion-to-hyperframes.

2. Fallback: Skills direkt live lesen

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

Beginne mit <PATH>/skills/hyperframes/SKILL.md (Render-Vertrag und Arbeitsablauf). Danach das passende Subskill:

  • Figma-Link oder Marken-Tokens → skills/figma/SKILL.md
  • Benanntes visuelles Element (Glitch, Körnung, Diagramm, Karte) → skills/hyperframes-registry/SKILL.md vor manuellem Bauen
  • Musik, Soundeffekte, Voiceover, Avatar, Ausschnitte → skills/media-use/SKILL.md
  • Vorhandenes Video kopieren → skills/reverse-any-video/SKILL.md
  • Deck / Live-Präsentation → skills/slideshow/SKILL.md
  • Portierung von 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. Entscheidung gegen Remotion

Team bereits in React/Remotion → remotion. Produktpromo auf echter Seite mit Shot-Cards → video-shotcraft. Stilisierter Kurzfilm mit Erzählung und Musik → 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.

Verwandte 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