framer-motion
Добавляйте анимации в React с помощью Framer Motion
Создавайте увлекательные пользовательские интерфейсы с плавными анимациями. Этот навык предоставляет готовые к использованию шаблоны кода для эффектов при наведении, переходов между страницами, анимаций при прокрутке и сложных жестовых взаимодействий в приложениях React и Next.js.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "framer-motion". Create a button with hover and tap animations
Resultado esperado:
- Use whileHover for scale up effect (1.05 scale)
- Use whileTap for press effect (0.95 scale)
- Apply spring transition for natural feel
- Combine with background color changes for visual feedback
A utilizar "framer-motion". Add staggered animation to a list of items
Resultado esperado:
- Define container variant with staggerChildren delay
- Define individual item variant with animation properties
- Apply container variant to parent motion component
- Apply item variant to each child motion component
A utilizar "framer-motion". Create a page transition effect
Resultado esperado:
- Wrap page content in AnimatePresence component
- Define enter and exit variants for page animation
- Use mode='wait' for sequential transitions
- Apply variants to motion.div wrapper component
Auditoria de Segurança
SeguroPure documentation skill containing markdown references, TypeScript templates, and code examples for Framer Motion animation library. Static scanner produced false positives: TypeScript template literals flagged as shell commands, animation terminology flagged as crypto keywords, and React keyboard events flagged as certificate access. All findings are dismissed. This is legitimate animation documentation with no executable code, network calls, or file system access patterns.
Fatores de risco
⚙️ Comandos externos (322)
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (1)
Pontuação de qualidade
O Que Você Pode Construir
Интерактивные компоненты интерфейса
Добавляйте эффекты при наведении, анимации кнопок и микровзаимодействия в компоненты React
Переходы между страницами
Создавайте плавные переходы между маршрутами в приложениях Next.js App Router
Опыт прокрутки
Стройте анимации, связанные с прокруткой, эффекты параллакса и взаимодействия с раскрытием при прокрутке
Tente Estes Prompts
Создайте анимацию появления для компонента React с помощью Framer Motion
Постройте список, который анимирует элементы по очереди с эффектом последовательного появления с помощью вариантов Framer Motion
Добавьте анимации раскрытия, запускаемые прокруткой, для элементов при их появлении в области просмотра
Реализуйте плавные переходы между страницами в приложении Next.js App Router
Melhores Práticas
- Используйте варианты для сложных координированных анимаций, чтобы код оставался организованным
- Уважайте предпочтения пользователей, проверяя useReducedMotion перед анимацией
- Делайте переходы между страницами менее 500 мс для лучшего пользовательского опыта
- Предпочитайте ускоряемые GPU свойства, такие как opacity и transform, вместо изменений макета
Evitar
- Избегайте анимации дорогостоящих свойств, таких как width, height или top/left повторно
- Не пропускайте анимации выхода при удалении элементов из DOM
- Избегайте чрезмерного использования prop layout, так как это может повлиять на производительность больших списков
- Не используйте фиксированные длительности для всех анимаций; предпочитайте пружины для взаимодействий