Communitygithub.com

podo/design-agent-skills

Crie vídeos programáticos com React. Pacote oficial de habilidades Remotion — componha sequências de vídeo usando componentes React, anime com física de molas e renderize em MP4/GIF. Ideal para demonstrações de produtos, vídeos explicativos e vídeos baseados em dados.

O que é design-agent-skills?

Este pacote de habilidades fornece acesso às ferramentas oficiais do Remotion para criação de vídeos programáticos usando React. Ele permite que agentes de IA componham sequências de vídeo como componentes React, apliquem animações com física de molas e interpolação, e renderizem para formatos como MP4, WebM ou GIF. O pacote é dividido em sub-habilidades focadas, incluindo melhores práticas (remotion-best-practices), scaffolding de novos projetos (remotion-create), renderização (remotion-render), legendas, interatividade, markup, integração SaaS e atualizações de versão. É especialmente útil para agentes em plataformas como Claude Code, Cursor e outros, que precisam criar demonstrações de produtos, visualizações de dados animadas ou vídeos explicativos com controle preciso baseado em código. A instalação é feita via `npx skills add remotion-dev/skills`, que instala todas as sub-habilidades de uma vez. O agente pode então invocar a habilidade relevante dependendo da tarefa, como criar um novo projeto, renderizar um vídeo ou adicionar legendas. Evite usar esta habilidade para animações CSS/JS simples sem exportação de vídeo (prefira gsap-skills ou framer-motion-skills) ou pipelines de vídeo que não utilizam React (use hyperframes para HTML-para-vídeo).

Funciona com✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/podo/design-agent-skills/tree/HEAD/skills/remotion
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

remotion

Stub do catálogo — pacote completo: remotion-dev/skills

Nota: O upstream reorganizou a habilidade única remotion em um pacote de sub-habilidades focadas — remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade, além de mediabunny. Instale o pacote para obtê-las todas.

Árvore de decisão

  1. O pacote já está instalado? Verifique: o diretório de habilidades do seu agente contém as habilidades remotion-* com conteúdo além deste stub.

    • Sim → invoque a habilidade remotion-* relevante e prossiga
    • Não → vá para o passo 2

  2. Em qual agente você está?

    • Claude Code → npx skills add remotion-dev/skills — ou envie ! npx skills add … como mensagem de chat (adicione -g para global, omita para apenas no projeto)
    • Cursor → npx skills add remotion-dev/skills
    • Outro → npx skills add remotion-dev/skills ou veja o README no GitHub

Comando de instalação

npx skills add remotion-dev/skills

Instala todas as sub-habilidades Remotion. Para instalar apenas uma, acrescente seu nome, ex. npx skills add remotion-dev/skills --skill remotion-best-practices.

Invocar após a instalação

  • Nomes das habilidades: remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade, mediabunny
  • Frases de ativação: "remotion", "vídeo programático", "vídeo React", "vídeo animado", "renderizar vídeo"

O que faz

Pacote oficial de habilidades Remotion para criar vídeos programáticos com React. Componha sequências de vídeo como componentes React, anime com física de molas e interpolação, e renderize para MP4, WebM ou GIF. As sub-habilidades cobrem melhores práticas, scaffolding de novos projetos (remotion-create), renderização (remotion-render), legendas, interatividade, markup, integração SaaS e atualizações de versão. Melhor para demonstrações de produtos, visualizações baseadas em dados e animações explicativas que exigem precisão controlada por código.

Quando NÃO usar

  • Animação CSS/JS simples sem exportação de vídeo (use gsap-skills ou framer-motion-skills)
  • Pipelines de vídeo que não usam React (use hyperframes para HTML-para-vídeo)

Individual skills in this repo

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

podo/design-agent-skills

Write HTML. Render video." — 11 skills for composition authoring, TTS/transcription, CLI workflow, asset registry, URL capture, and GSAP/Anime.js/CSS/Lottie/Three.js/WAAPI animation. Built specifically for AI coding agents. Requires HeyGen account for media generation.

podo/design-agent-skills

Design interfaces that survive translation, RTL scripts, and cultural difference. Per-language text-expansion table, full RTL mirroring rules, non-Latin typography, logical CSS properties, and cultural color/icon traps.

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