Communitygithub.com

nexu-io/hyperframes

Crear composiciones de video, animaciones, tarjetas de título, superposiciones, subtítulos, voces en off, visuales reactivos al audio y transiciones de escena en HTML de HyperFrames. Úselo cuando se le solicite construir cualquier contenido de video basado en HTML, agregar subtítulos o leyendas sincronizados con audio, generar narración de texto a voz, crear animaciones reactivas al audio (sincronización de ritmo, resplandor, pulso impulsado por música), agregar resaltado de texto animado (barridos de marcador, círculos dibujados a mano, líneas de ráfaga, garabatear, dibujo esquemático) o agregar transiciones entre escenas (fundidos cruzados, cortinillas, revelados, transiciones de sombreado). Cubre la autoría de composiciones, temporización, medios y el flujo de trabajo completo de producción de video. Para comandos CLI (init, lint, preview, render, transcribe, tts) consulte la habilidad hyperframes-cli.

¿Qué es hyperframes?

HyperFrames es una habilidad para agentes de IA que permite la creación de composiciones de video completas directamente en HTML, todo dentro del ecosistema HyperFrames. Es ideal para desarrolladores y creadores de contenido que desean generar contenido de video programático, como animaciones, tarjetas de título, superposiciones, subtítulos sincronizados con audio, narraciones de texto a voz, visuales reactivos al audio (sincronización de ritmo, resplandor, pulso) y transiciones de escena (fundidos, cortinillas, revelados). La habilidad es útil porque simplifica el flujo de trabajo de producción de video, permitiendo a un agente de IA generar composiciones complejas basadas en HTML que de otro modo requerirían herramientas de edición de video tradicionales. Funciona mediante la composición de archivos HTML de HyperFrames que definen la composición, la temporización y los medios, y se integra con comandos CLI como init, lint, preview y render para gestionar el ciclo de vida del proyecto. Está diseñada para usarse con Claude Code y otros agentes de IA que puedan interpretar y generar archivos HTML de HyperFrames.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nexu-io/open-design/tree/main/design-templates/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

¿Qué hace hyperframes?

Crear composiciones de video, animaciones, tarjetas de título, superposiciones, subtítulos, voces en off, visuales reactivos al audio y transiciones de escena en HTML de HyperFrames. Úselo cuando se le solicite construir cualquier contenido de video basado en HTML, agregar subtítulos o leyendas sincronizados con audio, generar narración de texto a voz, crear animaciones reactivas al audio (sincronización de ritmo, resplandor, pulso impulsado por música), agregar resaltado de texto animado (barridos de marcador, círculos dibujados a mano, líneas de ráfaga, garabatear, dibujo esquemático) o agregar transiciones entre escenas (fundidos cruzados, cortinillas, revelados, transiciones de sombreado). Cubre la autoría de composiciones, temporización, medios y el flujo de trabajo completo de producción de video. Para comandos CLI (init, lint, preview, render, transcribe, tts) consulte la habilidad hyperframes-cli.

Individual skills in this repo

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

nexu-io/chat-motion-overlay

Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.

nexu-io/create-video-storyboard

Use this plugin when the user wants a video concept, storyboard, shot list, prompt pack, or render-ready motion brief for a product, campaign, or explainer.

nexu-io/design-brief

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".

nexu-io/fal-lip-sync

Create talking head videos and lip sync audio to video via fal.ai. Useful for explainer avatars, multilingual dubbing previews, and social cuts.

nexu-io/frontend-design

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

nexu-io/hatch-pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.

nexu-io/pptx-html-fidelity-audit

Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.

nexu-io/remotion

Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.

nexu-io/social-media-dashboard

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.

nexu-io/sora

Generate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration.

nexu-io/ui-ux-pro-max

Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.

nexu-io/video-hyperframes

Hyperframes / Remotion-compatible continuous frame animation with autoplay support.

nexu-io/video-shortform

Short-form video generation skill — 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.

nexu-io/video-template-frame-bold-poster

Use this plugin when the user wants a "Bold Poster Frame" HyperFrames motion video — A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.

nexu-io/video-template-frame-bold-signal

Use this plugin when the user wants a "Bold Signal Frame" HyperFrames motion video — Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

nexu-io/video-template-frame-build-minimal

Use this plugin when the user wants a "Build Minimal Frame" HyperFrames motion video — Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

nexu-io/video-template-frame-creative-voltage

Use this plugin when the user wants a "Creative Voltage Frame" HyperFrames motion video — Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

nexu-io/video-template-frame-data-chart-nyt

Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

nexu-io/video-template-frame-data-rollup

Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.

nexu-io/video-template-frame-product-promo-30s

Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.

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