performance · davila7 — скилл для Claude Code: что делает и как установить
Инструкции для Claude Code по аудиту скорости сайта: оптимизация Core Web Vitals, сжатие ассетов и настройка кэширования по стандартам Lighthouse.
npx claude-code-templates@latest --skill development/performanceЧто делает performance
Скилл задаёт чёткий бюджет производительности веб-приложения: суммарный вес страницы до 1.5 МБ, сжатый JavaScript до 300 КБ и CSS до 100 КБ. Агент анализирует критический путь рендеринга и предлагает правки кода под метрики Core Web Vitals.
Внутри собраны рецепты для ускорения загрузки и выполнения скриптов. Скилл учит дробить бандлы через динамический импорт, заменять полные импорты библиотек точечными модулями и устранять задержки отрисовки. Отдельные блоки регламентируют выбор форматов графики (AVIF и WebP) с генерацией тегов <picture>, предзагрузку шрифтов и заголовки Cache-Control.
Бюджет ориентирован на мобильные 3G-сети с временем отклика сервера до 800 мс. Поэтому для соблюдения лимитов потребуется пересобрать конфигурацию сборщика и настроить раздачу статики на CDN.
Какие задачи решает
- настроить бюджет веса страниц под мобильные сети
- устранить блокировку рендеринга скриптами и стилями
- внедрить современные форматы изображений AVIF и WebP
- избавиться от layout thrashing при частых манипуляциях с DOM
Примеры запросов агенту
- Проведи аудит производительности этой страницы и предложи бюджет ресурсов
- Оптимизируй загрузку LCP-картинки и шрифтов в разметке
- Разбей бандл на чанки и настрой отложенный импорт тяжелых компонентов
Как установить performance
1Через claude-code-templates
npx claude-code-templates@latest --skill development/performance2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill performance -a claude-code3Вручную: положить файлы
~/.claude/skills/performance/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/performance/
Вручную: положить файлы
.agents/skills/performance/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/performance/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates performance2Вручную: положить файлы
.github/skills/performance/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/performanceВручную: положить файлы
.devin/skills/performance/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о performance
Как установить performance в Claude Code?
Добавьте скилл командой npx claude-code-templates@latest --skill development/performance или npx skills add davila7/claude-code-templates --skill performance -a claude-code. Также можно вручную поместить файл в ~/.claude/skills/performance/SKILL.md.
Что делает скилл performance?
Он направляет Claude Code на аудит кода и вёрстки по принципам Lighthouse. Помощник находит узкие места, настраивает предзагрузку ресурсов и оптимизирует метрики Core Web Vitals.
Какие ограничения по весу ресурсов задаёт скилл?
Правила ориентируются на суммарный размер страницы до 1.5 МБ, сжатый JavaScript не более 300 КБ и CSS до 100 КБ.
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — performance от других авторов.
