Исправление производительности motion в UI-анимации
Неудачные решения в анимации могут приводить к дерганым интерфейсам и дорогому рендерингу. Этот навык дает Claude, Codex и Claude Code сфокусированные правила для ревью и улучшения motion.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "fixing-motion-performance" from https://skillstore.io/skills/ibelick-fixing-motion-performance.md and its manifest at https://skillstore.io/api/skills/ibelick-fixing-motion-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «fixing-motion-performance». Проверь hover-анимацию карточки, которая меняет width, box shadow и blur на каждом кадре.
Ожидаемый результат:
Ревью отмечает непрерывную работу layout и paint, объясняет стоимость для производительности и рекомендует transform, opacity и небольшие одноразовые эффекты.
Использование «fixing-motion-performance». Улучши scroll reveal, который слушает события прокрутки и многократно читает позиции элементов.
Ожидаемый результат:
Ответ рекомендует IntersectionObserver или scroll timelines, приостановку работы вне экрана и отказ от повторяющихся чтений layout.
Использование «fixing-motion-performance». Оцени компонент, который смешивает layout-анимации Motion с ручными измерениями requestAnimationFrame.
Ожидаемый результат:
Рекомендации предупреждают о конкурирующих системах измерений и предлагают один согласованный подход внутри текущей библиотеки анимации.
All ten static findings are false positives caused by Markdown backticks, code fences, JavaScript template literals, and ordinary animation guidance. The skill contains no executable scripts, system reconnaissance, prompt injection, or other semantic security concerns.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ibelick-fixing-motion-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/ibelick-fixing-motion-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ibelick. (2026). fixing-motion-performance security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5@techreport{ibelick-ibelick-fixing-motion-performance-2026,
author = {ibelick},
title = {fixing-motion-performance security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "fixing-motion-performance security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "ibelick"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5"
identifiers:
- type: other
value: "skillstore:ibelick-fixing-motion-performance:audit:5"
description: "Skillstore immutable audit report identifier"
Проверить изменения анимации на чтения layout, эффекты с высокой нагрузкой на paint, опрос прокрутки и небезопасное смешивание библиотек.
Найти менее затратные техники motion для компонентов, которые ощущаются медленными при взаимодействии или навигации.
Применить единые правила производительности анимации до того, как команда начнет строить новые UI-паттерны.
Use fixing-motion-performance for this UI animation work. Отметь рискованные решения motion и предложи прямые исправления.
Review this file with fixing-motion-performance. Перечисли нарушения, объясни влияние и предложи изменения на уровне кода.
Analyze this interaction for animation jank. Приоритизируй проблемы layout, прокрутки, paint, слоев и фильтров.
Use fixing-motion-performance to redesign this motion approach within the existing stack. Сохрани замысел и снизь стоимость рендеринга.
Автор
ibelickЛицензия
MIT
Ревизия Skillstore
r2
Примечание о версии
Автор не указал версию.
Ссылка
ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006
Актуальность поддержки
25.07.2026
Использование
10 загрузок · 137 просмотров
Структура файлов
📄 SKILL.md
Надежное исправление веб-метаданных
Неполные метаданные могут ухудшить индексацию в поиске, предпросмотр ссылок и отображение в браузере. Этот навык дает конкретные правила для заголовков, canonicals, социальных карточек, иконок, manifests и JSON-LD.
Исправление проблем доступности UI
Дефекты доступности усложняют использование интерфейсов и могут блокировать пользователей в ключевых сценариях. Этот навык дает Claude, Codex и Claude Code четкие правила для точечных исправлений доступности UI.
Обеспечение единых стандартов UI для фронтенда
Интерфейсы, сгенерированные ИИ, могут отклоняться в сторону несогласованных паттернов, слабой доступности и затратных решений для анимации. Этот навык применяет четкие фронтенд-правила для стабильной, доступной и поддерживаемой работы с UI.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Создание шаблонов React Email с Resend
от resend
Создавать готовые к продакшену email-шаблоны сложно, потому что почтовые клиенты отличаются друг от друга. Этот навык помогает Claude, Codex и Claude Code работать с компонентами React Email, отправкой, стилизацией, локализацией и редакторскими рабочими процессами.
Улучшение практик Vue 3 TypeScript
от hyf0
Проекты Vue на TypeScript часто сталкиваются с запутанными ошибками шаблонов, маршрутизатора и Volar. Этот навык дает целевые исправления Vue 3 для Codex, Claude и Claude Code.
Улучшение компонентов Vue Options API
от vuejs-ai
Проекты на Vue Options API могут терять безопасность типов и корректную привязку this. Этот skill дает прямые шаблоны для более безопасных компонентов Vue.
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.