Навык «Оптимизация фронтенда»

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

Как запустить

Вариант 1 — отдельный аудит с исправлениями:

1. Выберите навык «Оптимизация фронтенда» перед началом сессии

2. В поле команды появится /Оптимизация фронтенда

3. Нажмите Enter — агент проанализирует проект и сразу внесёт исправления

Вариант 2 — совместно с задачей: Вставьте /Оптимизация фронтенда в начало промпта и добавьте свою задачу. Агент выполнит её с учётом требований производительности.

Что проверяет и исправляет агент

Агент читает ключевые файлы проекта — стили, компоненты, конфигурацию — и ищет:

• Анимации без prefers-reduced-motion — бесконечные CSS-анимации нагружают CPU на слабых устройствах и опасны для пользователей с вестибулярными расстройствами

• scroll-behavior: smooth без guard — плавный скролл должен отключаться при prefers-reduced-motion

• transition: all — переходы на все свойства захватывают layout-триггеры и замедляют рендеринг

• Дублирующиеся @keyframes — одна и та же анимация в нескольких файлах добавляет лишний CSS в runtime

• Отсутствие will-change на анимированных псевдоэлементах — браузер не создаёт compositor layer заранее

Чем отличается от других навыков

Агент не просто составляет отчёт — он вносит исправления в файлы и создаёт коммит автоматически. В итоге вы получаете сводную таблицу сделанного и список архитектурных рекомендаций, которые требуют вашего решения и не были изменены автоматически.

Как читать результат