Repolode
Enviar
199-biotechnologies

199-biotechnologies/motion-dev-animations-skill

Skill do Claude Code que gera animações web com Motion.dev para React, Next.js, Svelte e Astro, com orientações integradas de acessibilidade e desempenho.

Ver no GitHub
Estrelas
194
Forks
34
Issues abertas
0
Último commit
há 7 meses

O que é?

Este projeto é uma skill do Claude Code que ensina ao assistente padrões de animação com Motion.dev para gerar código de animação em TypeScript a partir de pedidos em linguagem natural, como adicionar uma animação de entrada para um hero, rolagem parallax ou uma lista arrastável. É voltado para React 19+, Next.js 15+, Svelte 5+ e Astro 4+, com suporte a Vue por meio do pacote motion-v.

O código gerado prioriza propriedades aceleradas pela GPU (transform, opacity, filter), respeita prefers-reduced-motion e inclui tratamento de foco pelo teclado. A skill aborda animações de entrada, efeitos de rolagem, interações por gestos, microinterações e animações de layout, como reordenação com FLIP, accordions com AnimatePresence e transições de abas com layoutId.

O repositório é organizado para carregar o conteúdo progressivamente: primeiro, um arquivo central de instruções; exemplos, referência da API, presets de spring, templates iniciais e um validador de configuração são carregados somente quando necessário. A instalação pode ser feita clonando o repositório no diretório de skills do Claude Code ou adicionando-o como submódulo do git.

Recursos principais

  • 01Gera código de animação com Motion.dev a partir de prompts em linguagem natural no Claude Code
  • 02Oferece suporte a React, Next.js App Router, Svelte, Astro e Vue por meio do motion-v
  • 03Abrange animações de entrada, rolagem, gestos, microinterações e layout
  • 04Usa propriedades transform e opacity compatíveis com a GPU e respeita prefers-reduced-motion
  • 05Inclui padrões de exemplo, presets de spring, templates iniciais e um validador de configuração

Casos de uso

  • Adicionar uma animação de entrada para a seção hero de uma landing page em Next.js
  • Criar efeitos de parallax ou de progresso vinculados à rolagem em um site de marketing
  • Criar listas com itens reordenáveis por arrastar ou interações de hover e botões magnéticos
  • Adicionar movimento consistente e acessível a um projeto Svelte ou Astro sem precisar consultar a API inteira

Início rápido

  1. 1

    Clone a skill na pasta de skills do Claude Code

    git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
  2. 2

    Peça ao Claude Code, em linguagem natural, para criar uma animação

Antes de usar

  • É uma skill do Claude Code, então só funciona dentro do Claude Code e não pode ser executada como uma biblioteca independente.
  • O README lista suporte apenas a React, Next.js, Svelte, Astro e Vue por meio de um pacote separado; outros frameworks não são contemplados.

Tópicos

#animation#motion-dev#claude-code#react#nextjs#svelte#scroll-animations#typescript#accessibility#animation-library

Perguntas frequentes

O que é motion-dev-animations-skill?
Skill do Claude Code que gera animações web com Motion.dev para React, Next.js, Svelte e Astro, com orientações integradas de acessibilidade e desempenho. Este projeto é uma skill do Claude Code que ensina ao assistente padrões de animação com Motion.dev para gerar código de animação em TypeScript a partir de pedidos em linguagem natural, como adicionar uma animação de entrada para um hero, rolagem parallax ou uma lista arrastável. É voltado para React 19+, Next.js 15+, Svelte 5+ e Astro 4+, com suporte a Vue por meio do pacote motion-v.
motion-dev-animations-skill é gratuito? Qual é a licença?
motion-dev-animations-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
motion-dev-animations-skill ainda é mantido?
Sem commits há mais de 6 meses. O último commit de motion-dev-animations-skill foi em 30 de mar. de 2026.
Para que posso usar motion-dev-animations-skill?
Adicionar uma animação de entrada para a seção hero de uma landing page em Next.js Criar efeitos de parallax ou de progresso vinculados à rolagem em um site de marketing Criar listas com itens reordenáveis por arrastar ou interações de hover e botões magnéticos Adicionar movimento consistente e acessível a um projeto Svelte ou Astro sem precisar consultar a API inteira
Como instalar motion-dev-animations-skill?
Clone a skill na pasta de skills do Claude Code: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations Peça ao Claude Code, em linguagem natural, para criar uma animação
Onde consigo motion-dev-animations-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/199-biotechnologies/motion-dev-animations-skill

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados