AIKraft/AI/Войти
AIKraft/Skills/emilkowalski-motion

emilkowalski-motion

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

nexu-io official Дизайн ★ 99.7k

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

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

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

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

Как работает

  1. Осмотреть текущий HTML, компонент или выбранный элемент страницы перед добавлением анимации.
  2. Выбрать минимальный набор моментов движения, которые проясняют состояние или иерархию (появление, ховер, переходы, скролл).
  3. Отдать предпочтение свойствам transform и opacity, избегая анимации свойств макета (top, left, width, height).
  4. Использовать единый язык движения для всего артефакта, не смешивая разные функции плавности, длительности или физику.
  5. Добавить fallback для prefers-reduced-motion для любой автоматической или связанной со скроллом анимации.
  6. Сохранить намерение в копирайтинге, данных и макете, если пользователь явно не запросил редизайн.

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

Добавь тактичные микровзаимодействия к этой карточке товара, чтобы она реагировала на наведение и клик.
Сделай так, чтобы основной контент плавно появлялся при загрузке страницы, используя только transform и opacity.
Реализуй плавный переход между состояниями формы (отправка/успех) с учетом prefers-reduced-motion.

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

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

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

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