skilly. Buy ad slot
All skills
Community / AGENT SKILL

frontend-optimize

Vitammiin/agent-vorcl-flow
0 installs 2 GitHub stars
0

Оптимизация рендера/бандла/Core Web Vitals (роль frontend). Use when нужно ускорить интерфейс — лишние ререндеры, тяжёлый бандл, плохие LCP/INP/CLS; сначала замер, потом правка по данным.

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

SKILL QUALITY

Not yet assessed

How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.

No quality assessment is available for this catalog entry yet.

The full skill.

Original instructions from the publisher’s SKILL.md

# Задача: оптимизация фронтенда

Оптимизируй указанное пользователем.

Оптимизация без измерений — гадание: сначала метрики «до», потом правка по данным, потом те же метрики «после».

1. Измерь базовую линию: React Profiler (какие компоненты и почему перерендериваются), бандл-анализ (`next build` + analyzer), Lighthouse/Core Web Vitals (LCP/INP/CLS); зафиксируй числа.
2. Найди первопричину по данным: лишний клиентский JS, нестабильные пропсы/контекст, тяжёлые зависимости, незакэшированные данные, сдвиги layout.
3. Применяй меры по одной: больше Server Components, code-splitting/`dynamic`, мемоизация против реальных перерендеров, `next/image`/`next/font`, кэш и ревалидация (`revalidateTag`/`staleTime` Query), резервирование места против CLS.
4. Доказательство: повтори замеры из шага 1 и покажи таблицу «до → после» по каждой метрике (размер бандла, число ререндеров, LCP/INP/CLS); правку без измеримого выигрыша откати.
5. Проверь, что поведение не сломано: тесты компонентов зелёные.

Если цель не указана — спроси, что тормозит (страница, компонент, метрика), или начни с худшей страницы по Lighthouse. Если узкое место на бэкенде (медленный API) — скажи честно и передай в `$backend-optimize`.

Опирайся на `$react`, `$nextjs`, `$data-fetching`.