Communitygithub.com

suryxnshsingh/hyperframes

Escreva HTML/CSS e renderize MP4 determinísticos com HyperFrames da HeyGen; ~450 blocos prontos (transições, texto cinético, legendas, gráficos, mapas, 3D), um sub-skill /figma que extrai tokens de marca e quadros para vídeo, reversão de qualquer vídeo, modo apresentação/slideshow e portabilidade de Remotion para HyperFrames. Use para filmes de lançamento, vídeos explicativos, clipes sociais, cartões de título ou quando o usuário quiser vídeo a partir de HTML em vez de React.

O que é hyperframes?

O skill hyperframes permite que você crie vídeos MP4 de forma determinística escrevendo HTML e CSS, utilizando o mecanismo HyperFrames da HeyGen. Ele oferece cerca de 450 blocos prontos para uso, incluindo transições, texto cinético, legendas, gráficos, mapas e elementos 3D, além de sub-skills especializados como /figma para extrair tokens de marca e quadros diretamente do Figma, reverse-any-video para clonar vídeos existentes, e remotion-to-hyperframes para portar projetos do Remotion. O skill é útil para produtores de conteúdo, designers e desenvolvedores que precisam gerar vídeos de alta qualidade para lançamentos, vídeos explicativos, clipes sociais ou cartões de título, sem depender do React. Ele pode ser instalado como um plugin versionado com auto-atualização via CLI do Claude, ou usado diretamente através de scripts bash para checkout esparso das skills, suportando renderização local ou em nuvem.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

hyperframes (ponteiro ao vivo do upstream)

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

1. Instalação preferida (plugin versionado com auto-atualização)

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

Depois use /hyperframes:hyperframes (roteador), além de figma, hyperframes-cli, hyperframes-registry, media-use, reverse-any-video, slideshow, remotion-to-hyperframes.

2. Alternativa: leia as skills ao vivo diretamente

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

Comece com <PATH>/skills/hyperframes/SKILL.md (contrato de renderização e loop de trabalho). Em seguida, a sub-skill que corresponde:

  • Link do Figma ou tokens de marca → skills/figma/SKILL.md
  • Visual nomeado (glitch, granulação, gráfico, mapa) → skills/hyperframes-registry/SKILL.md antes de construir manualmente
  • Música, efeitos sonoros, narração, avatar, recortes → skills/media-use/SKILL.md
  • Copiar um vídeo existente → skills/reverse-any-video/SKILL.md
  • Deck / apresentação ao vivo → skills/slideshow/SKILL.md
  • Portabilidade de 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. Escolha entre HyperFrames e Remotion

Equipe já em React/Remotion → remotion. Promoção de produto em página real com cartões de cena → video-shotcraft. Curta-metragem estilizado com narração e trilha 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.

Habilidades Relacionadas

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