animate
Добавление целенаправленных анимаций и микро-взаимодействий
Статические интерфейсы выглядуют незавершенными и упускают возможности для ориентации пользователей. Этот навык помогает стратегически добавить движение, которое обеспечивает обратную связь, улучшает понимание и создает приятные впечатления, не перегружая пользователей.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "animate". Добавить анимации в навигацию нашей панели управления
Résultat attendu:
Я добавлю плавные переходы слайда для пунктов меню, эффект масштабирования при наведении и анимации кроссфейда при переключении между секциями панели управления. Все анимации будут учитывать prefers-reduced-motion и использовать GPU-ускоренные трансформации для производительности 60fps.
Utilisation de "animate". Сделать состояние успеха более наградным
Résultat attendu:
Я добавлю праздничную анимацию галочки с легким пульсирующим масштабированием, переход цвета от нейтрального к зеленому цвету успеха и необязательный эффект конфетти для выполненных действий. Тайминг составит 300-400 мс для основной анимации с задержкой повторения 150 мс.
Audit de sécurité
SûrStatic analysis detected 21 potential security issues, all confirmed as false positives after code review. The scanner incorrectly flagged CSS code blocks in documentation as external command execution, and YAML frontmatter/markdown headers as weak cryptography. This is a pure documentation skill file containing animation guidelines and code examples with no executable content or security risks.
Score de qualité
Ce que vous pouvez construire
Улучшение онбординга пользователей
Добавление приветственных входящих анимаций и направленных микро-взаимодействий, которые помогают новым пользователям понять связи интерфейса и доступные действия.
Улучшение удобства использования форм
Добавление анимаций обратной связи проверки, состояний фокуса и подтверждений отправки, которые делают формы отзывчивыми и понятными.
Создание приятных впечатлений от продукта
Добавление целенаправленного движения к ключевым взаимодействиям, таким как успешные действия, пустые состояния и навигация, для создания запоминающихся, отполированных впечатлений.
Essayez ces prompts
Добавить состояния наведения, нажатия и загрузки к основной кнопке действия с соответствующим таймингом и кривыми плавности.
Просмотрите целевую страницу и рекомендуйте входящие анимации, которые направляют внимание пользователя на ключевой контент.
Проанализируйте форму оформления заказа и добавьте обратную связь проверки, состояния фокуса и анимации отправки.
Просмотрите все приложение и создайте связную стратегию анимации с таймингом, кривыми плавности и учетом доступности.
Bonnes pratiques
- Всегда используйте GPU-ускоренные свойства (transform, opacity) вместо свойств макета (width, height, top, left) для плавных анимаций 60fps
- Тестируйте с медиа-запросом prefers-reduced-motion, чтобы обеспечить доступность для пользователей, чувствительных к движению
- Используйте естественные кривые плавности, такие как ease-out-quart или ease-out-expo, вместо стандартного CSS easing для отполированного ощущения
Éviter
- Избегайте кривых плавности bounce и elastic, так как они выглядят устаревшими и привлекают внимание к самой анимации, а не к контенту
- Никогда не анимируйте всё без цели—чрезмерная анимация создает усталость и уменьшает влияние
- Не используйте длительности анимации более 500 мс для взаимодействий обратной связи, так как это создает воспринимаемую задержку