Communitygithub.com

suryxnshsingh/hyperframes

Escribe HTML/CSS y renderiza MP4 deterministas con HyperFrames de HeyGen; ~450 bloques listos (transiciones, tipografía cinética, subtítulos, gráficos, mapas, 3D), un sub-skill /figma que extrae tokens de marca y frames en video, reverse-any-video, modo presentación/diapositivas, y portabilidad de Remotion a HyperFrames. Úsalo para videos de lanzamiento, explicativos, clips sociales, tarjetas de título, o cuando el usuario quiera video desde HTML en lugar de React.

¿Qué es hyperframes?

HyperFrames es un potente skill para agentes de IA (como Claude Code, Cursor o Codex) que permite crear videos MP4 deterministas escribiendo HTML y CSS, sin necesidad de React. Ofrece alrededor de 450 bloques visuales listos para usar, que incluyen transiciones, tipografía cinética, subtítulos, gráficos, mapas y elementos 3D. Incluye sub-skills especializados como /figma para extraer tokens de marca y frames directamente desde Figma, reverse-any-video para clonar videos existentes, modo slideshow/presentación para decks en vivo, y un portador de Remotion a HyperFrames. Es ideal para videos de lanzamiento, explicativos, clips para redes sociales, tarjetas de título o cualquier proyecto que requiera generar video desde HTML de forma rápida y reproducible.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/hyperframes
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

hyperframes (puntero upstream en vivo)

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

1. Instalación preferida (plugin versionado con actualización automática)

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# o por proyecto:
npx hyperframes skills update

Después de eso usa /hyperframes:hyperframes (router), además de figma, hyperframes-cli, hyperframes-registry, media-use, reverse-any-video, slideshow, remotion-to-hyperframes.

2. Alternativa: leer los skills en vivo directamente

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

Empieza con <PATH>/skills/hyperframes/SKILL.md (contrato de renderizado y bucle de trabajo). Luego el sub-skill que coincida:

  • Enlace de Figma o tokens de marca → skills/figma/SKILL.md
  • Visual con nombre (glitch, grano, gráfico, mapa) → skills/hyperframes-registry/SKILL.md antes de construir manualmente
  • Música, SFX, locución, avatar, recortes → skills/media-use/SKILL.md
  • Copiar un video existente → skills/reverse-any-video/SKILL.md
  • Presentación / deck en vivo → skills/slideshow/SKILL.md
  • Portar 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. Elección frente a Remotion

Equipo ya en React/Remotion → remotion. Promoción de producto en página real con tarjetas de toma → video-shotcraft. Cortometraje estilizado con narración y banda sonora → 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.

Skills relacionados

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