Uma skill de agente para Claude Code e Codex que transforma movimentos gerados por IA em animações web controladas por scroll, mouse, arraste, toque ou orientação do dispositivo.
2,6 mil197PythonMITAtualizado há 16 dias
frankxai/awesome-motion-design-agent-skills
Lista curada de recursos de motion design e cinco skills de agente instaláveis para GSAP, Motion, Remotion, Lottie e Rive, compatíveis com Claude Code, Codex e Copilot.
- Estrelas
- 69
- Forks
- 20
- Issues abertas
- 5
- Último commit
- há 7 dias
O que é?
Esta é uma lista de recursos de motion design voltada a agentes de programação com IA. Ela reúne bibliotecas de animação para web, como GSAP, Motion, Anime.js e React Three Fiber; ferramentas de vídeo, como Remotion; e runtimes para Lottie e Rive, além de pacotes de skills de agente de terceiros para essa mesma stack.
O repositório também inclui cinco skills próprias no formato SKILL.md. Elas abordam animações de UI de produto e escolha de stack, coreografia cinematográfica para sites, vídeos determinísticos em React, roteamento de mídia generativa e QA de motion para revisar e capturar animações web. As diretrizes também incluem um caminho para reduzir animações e a verificação em dispositivos reais.
As skills podem ser instaladas com npx skills add em diversos agentes, pelo marketplace de plugins do Claude Code ou com o envio de arquivos zip para Claude.ai. O projeto é publicado sob a licença CC0-1.0.
Recursos principais
- 01Lista curada de recursos para GSAP, Motion, Remotion, Lottie e Rive
- 02Cinco skills SKILL.md para animações de UI, coreografia de sites, vídeos em React e QA de motion
- 03Instalável com npx skills add, pelo marketplace de plugins do Claude Code ou pelo envio de arquivos zip
- 04Inclui rubricas de qualidade de motion e especificações de motion para sites
- 05Lista pacotes de skills de agente de terceiros com comandos de instalação
Casos de uso
- Orientar um agente de programação na criação de interfaces de produto animadas
- Gerar vídeos programaticamente a partir de código React com Remotion
- Revisar a qualidade de motion das animações web antes do lançamento
- Encontrar bibliotecas de animação e pacotes de skills mantidos para uma stack de motion
Início rápido
- 1
Instale as cinco skills no seu agente com um único comando
npx skills add frankxai/awesome-motion-design-agent-skills - 2
Verifique as skills instaladas
npx skills list
Antes de usar
- Este repositório é principalmente uma lista selecionada de links, e muitos dos itens apontam para projetos de terceiros que você precisará analisar separadamente.
- A instalação de skills executa instruções dentro do seu agente, por isso o README recomenda analisar os pacotes de terceiros antes de usá-los.
Tópicos
Perguntas frequentes
- O que é awesome-motion-design-agent-skills?
- Lista curada de recursos de motion design e cinco skills de agente instaláveis para GSAP, Motion, Remotion, Lottie e Rive, compatíveis com Claude Code, Codex e Copilot. Esta é uma lista de recursos de motion design voltada a agentes de programação com IA. Ela reúne bibliotecas de animação para web, como GSAP, Motion, Anime.js e React Three Fiber; ferramentas de vídeo, como Remotion; e runtimes para Lottie e Rive, além de pacotes de skills de agente de terceiros para essa mesma stack.
- awesome-motion-design-agent-skills é gratuito? Qual é a licença?
- awesome-motion-design-agent-skills é open source sob a licença CC0-1.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
- awesome-motion-design-agent-skills ainda é mantido?
- Manutenção ativa. O último commit de awesome-motion-design-agent-skills foi em 14 de out. de 2026.
- Para que posso usar awesome-motion-design-agent-skills?
- Orientar um agente de programação na criação de interfaces de produto animadas Gerar vídeos programaticamente a partir de código React com Remotion Revisar a qualidade de motion das animações web antes do lançamento Encontrar bibliotecas de animação e pacotes de skills mantidos para uma stack de motion
- Como instalar awesome-motion-design-agent-skills?
- Instale as cinco skills no seu agente com um único comando: npx skills add frankxai/awesome-motion-design-agent-skills Verifique as skills instaladas: npx skills list
- Onde consigo awesome-motion-design-agent-skills?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/frankxai/awesome-motion-design-agent-skills
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Conjunto de skills instaláveis que orientam agentes de programação com IA em motion design, After Effects, vídeos com Remotion, animação de logos e planos de fundo animados.
14028HTMLMITAtualizado há 4 meses
Uma skill para ensinar princípios de motion design a agentes de programação com IA, cobrindo timing, easing e coreografia para animações de UI em qualquer biblioteca.
2,3 mil149MITAtualizado há 5 meses
Uma skill para Claude Code e Codex que transforma páginas de produto em vídeos promocionais cinematográficos com código Remotion, sem usar IA generativa.
12,5 mil1,1 milTypeScriptApache-2.0Atualizado há 3 dias
Um conjunto de Agent Skills que ensina agentes de programação com IA, como Claude Code, Codex e Cursor, a seguir as melhores práticas para criar projetos de vídeo com Remotion.
5,4 mil592TypeScriptSem licençaAtualizado há 5 dias
Uma skill do Claude Code para dirigir curtas em 51 estilos, criados inteiramente com código e sem modelos de geração de vídeo.
3,9 mil440JavaScriptMITAtualizado ontem