Crie animações React com Framer Motion
Equipas React precisam de animações fluidas sem reconstruir padrões do zero. Esta skill fornece referências, modelos e exemplos de Framer Motion para trabalhos comuns de movimento em UI.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "framer-motion" from https://skillstore.io/skills/asmayaseen-framer-motion.md and its manifest at https://skillstore.io/api/skills/asmayaseen-framer-motion/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "framer-motion". Adicione feedback suave a um cartão de preços e ao respetivo botão de chamada à ação.
Resultado esperado:
Um plano de implementação conciso com recomendações de movimento para hover, toque e foco, além de comportamento com movimento reduzido e valores de timing.
Usando "framer-motion". Crie filtragem animada para uma grelha de cartões de projetos.
Resultado esperado:
Uma abordagem recomendada de animação de layout usando variantes partilhadas, chaves estáveis, comportamento de saída e verificações de desempenho para grelhas responsivas.
Usando "framer-motion". Reveja uma transição de rota que parece lenta em mobile.
Resultado esperado:
Uma revisão focada que encurta o timing, remove trabalho de layout dispendioso e sugere passos de teste em dispositivos e com movimento reduzido.
The static findings are false positives caused by Markdown fences, JSX template literals, React keys, route IDs, and Tailwind class names. No evidence of prompt injection, data exfiltration, credential access, reconnaissance, or executable shell and Ruby backtick behavior was found.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/asmayaseen-framer-motion/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/asmayaseen-framer-motion?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/asmayaseen-framer-motion?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-framer-motion/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/asmayaseen-framer-motion.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Asmayaseen. (2026). framer-motion security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-framer-motion/audits/9@techreport{asmayaseen-asmayaseen-framer-motion-2026,
author = {Asmayaseen},
title = {framer-motion security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/asmayaseen-framer-motion/audits/9},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "framer-motion security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "Asmayaseen"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/asmayaseen-framer-motion/audits/9"
identifiers:
- type: other
value: "skillstore:asmayaseen-framer-motion:audit:9"
description: "Skillstore immutable audit report identifier"
Crie estados de hover, feedback de toque, acordeões e transições de modais que se ajustem a uma interface de produto.
Planeie transições de rotas e movimento de elementos partilhados para ecrãs Next.js antes da implementação em produção.
Documente variantes reutilizáveis e padrões de animação de listas para equipas que mantêm bibliotecas de componentes React.
Use esta skill Framer Motion para adicionar uma animação simples de entrada ao meu componente React. Mantenha o movimento subtil e explique as props usadas.
Use esta skill para criar feedback de hover e toque para o meu componente. Inclua configurações de spring, gestão de movimento reduzido e orientações práticas de timing.
Use esta skill para planear uma transição de página Next.js com AnimatePresence. Inclua a estrutura de rotas, o comportamento de entrada e saída, e notas de desempenho em mobile.
Use esta skill para rever a minha abordagem de animações React. Identifique variantes reutilizáveis, animações de layout arriscadas, suporte de acessibilidade em falta e melhores padrões de Framer Motion.
Autor
AsmayaseenLicença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Referência
89edfdc710d0846129dcee6a929477b04f08052c
Atualidade da manutenção
26/07/2026
Uso
11 downloads · 565 visualizações
Estrutura de arquivos
Projete Ferramentas de Agente Confiáveis
Agentes falham quando nomes de ferramentas, entradas, saídas ou erros são ambíguos. Esta skill oferece padrões práticos para descrições de ferramentas, esquemas, formatos de resposta e testes.
Depure Problemas de Software de Forma Sistemática
A correção desestruturada de bugs desperdiça tempo e pode ocultar a falha real. Esta skill orienta Claude, Codex e Claude Code por meio de uma análise de causa raiz baseada em evidências.
Melhorar a Fiabilidade do Serviço em Produção
As equipas de produção precisam de objetivos de fiabilidade claros e práticas de incidentes repetíveis. Esta skill fornece modelos de SRE para SLOs, orçamentos de erro, alertas e postmortems.
Crie interfaces shadcn/ui em Next.js
Equipes React precisam de padrões de UI consistentes que funcionem com o Next.js moderno. Esta skill fornece orientação de configuração para shadcn/ui, exemplos de componentes, validação de formulários, tabelas, sidebars e padrões de modo escuro.
Crie interfaces de chat de IA com streaming
O chat de IA em tempo real parece quebrado quando os usuários não conseguem ver o progresso, o estado da resposta ou as mudanças na interface. Esta skill oferece a Claude, Codex e Claude Code padrões para ciclos de vida de streaming, eventos de progresso, efeitos de cliente e ferramentas de cliente.
Diagnosticar Degradação de Contexto
Sessões longas de IA podem perder precisão quando o contexto cresce, entra em conflito ou inclui material que causa distração. Esta skill ajuda Claude, Codex e Claude Code a identificar padrões de degradação e escolher etapas práticas de mitigação.
Implementar React View Transitions
por vercel-labs
React view transitions são fáceis de posicionar incorretamente, resultando em animações que falham silenciosamente ou geram ruído visual. Esta skill orienta as escolhas de animação para rotas, Suspense, listas e elementos compartilhados.
Crie Aplicações Fullstack com Orientação Sênior
por alirezarezvani
Projetos fullstack frequentemente precisam de configuração consistente, escolhas de arquitetura e verificações de qualidade. Esta skill fornece scripts e referências para trabalhos com React, Next.js, Node.js, GraphQL e PostgreSQL.
Crie Recursos de Frontend Prontos para Produção
por davila7
As equipes de frontend precisam de orientações consistentes sobre React e Next.js em diferentes projetos. Esta habilidade fornece fluxos de trabalho de referência, práticas de qualidade e scripts auxiliares para análise de frontend.
Otimizar o desempenho do Next.js
por Atman36
Aplicações Next.js podem ficar lentas devido a bundles grandes, cache fraco e mídia não otimizada. Esta habilidade orienta Claude, Codex e Claude Code em melhorias de desempenho focadas para apps em produção.
Otimize o Desempenho de React e Next.js
por vercel-labs
Aplicativos React e Next.js frequentemente perdem velocidade por causa de waterfalls, bundles grandes e re-renderizações evitáveis. Esta skill oferece aos agentes regras concretas para mudanças mais seguras com foco em desempenho.
Automatize a localização de apps web
por DNYoussef
Adicionar suporte multilíngue frequentemente espalha strings, roteamento, metadados e arquivos de locale por toda a base de código. Esta skill planeja e implementa a configuração de i18n com traduções, validação e documentação.