AIKraft/AI/Войти
AIKraft/Skills/animate

animate

Улучшает UI целенаправленными анимациями, микро-взаимодействиями и эффектами движения для повышения удобства и вовлеченности. Применяется при запросах на добавление анимаций, переходов, hover-эффектов или оживление интерфейса. Поддерживает prefers-reduced-motion, оптимизирует производительность (60fps) и использует CSS transitions, @keyframes, Web Animations API, Framer Motion.

pbakaus official Разработка ★ 76.2k

Что делает навык

Skill анализирует интерфейс для выявления статичных участков и стратегически добавляет анимации, микро-взаимодействия и эффекты движения. Это улучшает понимание функционала, предоставляет визуальную обратную связь и повышает вовлеченность пользователя.

Когда применять

  • Добавление визуальной обратной связи для действий без явного подтверждения (клики по кнопкам, отправка форм).
  • Сглаживание резких переходов состояний, таких как мгновенное показ/скрытие элементов или загрузка страниц.
  • Визуализация пространственных или иерархических связей между элементами интерфейса.
  • Направление внимания пользователя или объяснение поведения элементов через анимацию.

Как работает

  1. Вызвать /impeccable для получения принципов дизайна и протокола сбора контекста; если контекста нет, выполнить /impeccable teach.
  2. Собрать информацию об ограничениях производительности.
  3. Проанализировать интерфейс на наличие статичных областей: отсутствие обратной связи, резкие переходы, неочевидные связи или отсутствие элементов, привлекающих внимание.
  4. Стратегически внедрить анимации и микро-взаимодействия для устранения выявленных проблем и улучшения пользовательского опыта.

Примеры запросов агенту

Добавь анимацию и микро-взаимодействия к кнопке отправки формы, чтобы пользователь получал визуальное подтверждение действия.
Сделай переход между страницами плавным, убрав резкие скачки интерфейса.
Оживи интерфейс, добавив эффекты движения для элементов, которые сейчас статичны и не привлекают внимание.

Что понадобится

  • /impeccable
  • Контекст дизайна (собирается через протокол /impeccable)
  • Ограничения производительности

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «pbakaus-animate» из репозитория: # https://github.com/pbakaus/impeccable
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r pbakaus-animate/ ~/.claude/skills/pbakaus-animate/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.