fixing-motion-performanceавтор Julien Thibeaut

Fixing Motion Performance Skill.

Скилл Claude Code и Codex для моушн и видео: находит и исправляет тормозящие CSS/JS-анимации и скроллинг-эффекты.

Анимация и видео
Отчёт ревью

Скачать OpenDesign Инструкция по использованию

ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md

--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance

Преамбула и заголовки разделов, считанные из исходного файла 2026-09-14 · 5 561 символов полностью

01 Что делает

Что делает skill fixing-motion-performance в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Плейбук по аудиту и исправлению производительности анимации в CSS и JS, предназначенный для дизайнеров и разработчиков, которые проверяют или рефакторят рваные переходы, анимацию, привязанную к скроллу, и эффекты размытия. Он поставляется как слэш-команда: вызванная без аргументов, она применяет рекомендации к любой анимационной работе в диалоге; если указан файл, она сообщает о нарушениях, цитируя конкретную строку, объясняя, почему это важно, и предлагая исправление на уровне кода.

Правила упорядочены по приоритету: от never-паттернов, выбора механизма и границ инструментов на критическом уровне — через измерение, скролл, отрисовку (paint), слои и размытие — до view transitions. Skill отказывается мигрировать библиотеки анимации, если об этом не просят явно, применяя правила в рамках существующего стека.

Что он выдаёт

Одно короткое предложение на каждое нарушение, объясняющее, почему это важно.
Конкретное исправление на уровне кода для каждого нарушения.
Обоснование любого нестандартного выбора в отношении объёма рендеринга.

Смотрите пример запроса ↗

Как это работает

01
Вызовите его как слэш-команду
Запустите /fixing-motion-performance, чтобы привязать ограничения к любой анимационной работе, уже обсуждаемой в сессии.
02
Или укажите файл
Передача пути переключает skill в режим проверки, сверяя файл с каждым правилом, а не ограничивая текущую работу.
03
Составить отчёт из трёх частей
Каждая находка цитирует проблемную строку, даёт одно короткое предложение о том, почему это важно, и предлагает исправление на уровне кода.
04
Сортировка свойств по этапу рендеринга
Глоссарий делит работу на composite, paint и layout, чтобы проверяющий понимал, какие анимации дешёвые, а какие — дорогие.
05
Применение правил по приоритету
Критические категории проверяются раньше категорий с меньшим влиянием, поэтому never-паттерны и границы инструментов решаются первыми.
06
Оставайтесь в рамках текущего стека
Миграция библиотек не входит в задачу: правила применяются к той системе анимации, которая уже используется в кодовой базе.

02 Определите своё применение

Когда использовать Skill fixing-motion-performance

Используйте skill fixing-motion-performance в Claude Code или Codex, когда задача относится к движению и видео такого типа. Назначение и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Добавление или изменение UI-анимаций, написанных с помощью CSS, WAAPI, Motion, rAF или GSAP.
Рефакторинг взаимодействий или переходов, которые уже выглядят рваными.
Реализация анимации, привязанной к скроллу, или эффектов появления при скролле, которые сейчас работают через события scroll.
Анимация layout, фильтров, масок, градиентов или CSS-переменных, где вопрос стоимости — главный.
Ревью компонентов, опирающихся на will-change, трансформации или измерения.

Знайте границы

Переходы вида (view transitions) сверх изменений уровня навигации — например, насыщенный взаимодействиями UI или сценарии, которые должны быть прерываемыми.
Непрерывные или крупноповерхностные эффекты размытия — они исключаются, а не оптимизируются.

Что предоставить

Сама слэш-командаДля живой работы достаточно вызвать её без параметров; далее она формирует любые изменения анимации, вносимые в разговоре.
Путь к файлу для режима ревьюПередача одного файла заставляет skill проверить этот файл по всем правилам и выдать отчёт о нарушениях.
Существующая система анимацииВы не указываете целевую библиотеку; ориентиром служит код в его текущем виде, и правила применяются внутри него.

03 Внутри скилла

Правила, которые skill fixing-motion-performance задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Никогда не чередуйте чтения и записи
Чтения и записи layout не должны смешиваться в пределах одного кадра, и несколько систем анимации, каждая из которых измеряет или изменяет layout, не должны работать одновременно.
Никогда не анимируйте на основе позиции скролла
Управление анимацией через scrollTop, scrollY или события scroll запрещено; вместо этого используйте Scroll или View Timelines и IntersectionObserver.
У каждого цикла rAF должен быть выход
Цикл requestAnimationFrame без условия остановки — это never-паттерн, а не допустимый компромисс.
По умолчанию используйте transform и opacity
Это свойства композитора и отправная точка для анимации; JS-анимация оставляется для взаимодействий, которые действительно в ней нуждаются.
Ограничивайте размытие 8px
Анимация размытия должна оставаться небольшой — не более 8px, и ограничена короткими одноразовыми эффектами; непрерывное размытие и размытие на больших поверхностях исключены.
Применяйте will-change точечно
Продвижение слоя не происходит автоматически, поэтому will-change применяется временно и узконаправленно, а не оставляется на множестве или крупных продвинутых слоях.
Не анимируйте CSS-переменные для motion
Пользовательские свойства, управляющие transform, opacity или позицией, не должны анимироваться, а наследуемые анимируемые переменные полностью запрещены.
Никаких половинчатых миграций
В пределах одного компонента API не должны быть мигрированы частично, а стили анимации не должны смешиваться.

04 Применение

Установить fixing-motion-performance в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить fixing-motion-performance в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Универсальная форма CLI skills для skills/fixing-motion-performance/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что предложенное исправление выполняет наименее затратную работу по рендерингу, которая всё же соответствует нужному эффекту.
Проверьте, что всё, что перемещено за пределы экрана, действительно приостановлено или остановлено, а не продолжает работать.
Там, где важен layer promotion, проверяйте это с помощью инструментов, а не предполагайте, что это произошло.

В OpenDesign импортируйте fixing-motion-performance по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Ветка main
Файл skill: skills/fixing-motion-performance/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 79081ab
License: MIT Из LICENSE.
Звёзды репозитория: 8 402 Снимок GitHub сделан 2026-09-14 для всего репозитория ibelick/ui-skills, который содержит 5 скиллов в этом каталоге. Не является рейтингом или счётчиком использования fixing-motion-performance.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

как использоватьПростой вызов ограничивает сессию; аргумент с файлом запускает полный отчёт о нарушениях.
когда применятьПеречисляет пять ситуаций, при которых эти рекомендации должны применяться во время работы с анимацией.
глоссарий этапов рендерингаОпределяет composite, paint и layout, а также свойства, которые каждый из них охватывает.
категории правил по приоритетуДевять категорий, ранжированных по метке влияния — от критического до низкого.
краткая справкаДевять пронумерованных категорий кратких пунктов-ограничений — от запретных паттернов до границ инструментов.
частые исправленияФрагменты кода CSS и JS до/после для layout thrashing, scroll-linked motion и измерения FLIP.
рекомендации по ревьюКак проводить ревью: сначала критическое, наименее затратная работа, обоснованные нестандартные решения, применимые замечания.

Собственное описание skill

«Проверяет и исправляет проблемы производительности анимации: layout thrashing, свойства compositor, scroll-linked motion и эффекты размытия. Используйте, когда анимация тормозит, переходы дёргаются или нужен аудит производительности CSS/JS-анимации».

Описание из заголовка SKILL.md. Полный файл — около 5 561 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill fixing-motion-performance

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Какие библиотеки анимации он охватывает?

В его области применения указаны CSS, WAAPI, Motion, rAF и GSAP, так что он широкий, а не привязан к одному фреймворку. Поскольку он применяет правила внутри уже существующей системы, он адаптируется к тому, что вы уже используете.

Fixing Motion Performance

Запустите fixing-motion-performance на реальной задаче по анимации и видео.

Скачайте OpenDesign, импортируйте fixing-motion-performance по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

Что делает skill fixing-motion-performance в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать Skill fixing-motion-performance

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill fixing-motion-performance задаёт Claude Code и Codex

Никогда не чередуйте чтения и записи

Никогда не анимируйте на основе позиции скролла

У каждого цикла rAF должен быть выход

По умолчанию используйте transform и opacity

Ограничивайте размытие 8px

Применяйте will-change точечно

Не анимируйте CSS-переменные для motion

Никаких половинчатых миграций