скилл

core-web-vitals · davila7 — скилл для Claude Code: метрики и установка

Q: Как установить core-web-vitals в Claude Code?

Выполните `npx claude-code-templates@latest --skill development/core-web-vitals`.

Скилл помогает разбирать LCP, INP и CLS и подбирать изменения для загрузки, отклика и стабильности страницы. Пригодится, когда нужно найти причину плохих показателей.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓

npx claude-code-templates@latest --skill development/core-web-vitals

Открыть на GitHub

Что делает core-web-vitals

Скилл рассматривает три Core Web Vitals: LCP для загрузки главного элемента, INP для отклика на действия и CLS для неожиданных сдвигов. Он связывает метрики с причинами в коде и предлагает варианты изменений: например, заранее загружать важное изображение, переносить тяжёлую работу из обработчика события или задавать размеры картинок.

Для LCP описаны задержки ответа сервера, блокирующие ресурсы и отложенный рендеринг на клиенте; для INP — длинные задачи, тяжёлые обработчики и лишние перерисовки. Примеры затрагивают HTML и JavaScript, включая React. Измерения и советы привязаны к конкретным метрикам, поэтому сначала стоит определить, какая из них проседает.

Какие задачи решает

найти причины медленной отрисовки главного элемента
уменьшить задержку реакции на клики и ввод
разобрать неожиданные сдвиги элементов страницы
выбрать изменения для улучшения LCP, INP или CLS

Примеры запросов агенту

Разбери, почему на странице медленно отображается главный элемент, и предложи улучшения LCP.
Найди, что задерживает реакцию на клики, и предложи изменения для INP.
Проверь страницу на причины сдвигов элементов и подскажи, как снизить CLS.

Как установить core-web-vitals

1Через claude-code-templates

npx claude-code-templates@latest --skill development/core-web-vitals

2Через Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill core-web-vitals -a claude-code

3Вручную: положить файлы

~/.claude/skills/core-web-vitals/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/core-web-vitals/

Вручную: положить файлы

.agents/skills/core-web-vitals/SKILL.md

Для всех проектов — ~/.agents/skills/

Вручную: положить файлы

.cursor/skills/core-web-vitals/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates core-web-vitals

2Вручную: положить файлы

.github/skills/core-web-vitals/SKILL.md

Командой платформы

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/core-web-vitals

Вручную: положить файлы

.devin/skills/core-web-vitals/SKILL.md

Старый путь .windsurf/skills/ тоже читается

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о core-web-vitals

Как установить core-web-vitals в Claude Code?

Выполните npx claude-code-templates@latest --skill development/core-web-vitals.

Что делает core-web-vitals?

Скилл помогает анализировать LCP, INP и CLS и предлагает изменения для устранения типичных причин плохих показателей.

Какие проблемы INP разбирает core-web-vitals?

Среди причин — длинные задачи в основном потоке, тяжёлые обработчики событий, сторонние скрипты и лишние перерисовки.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →

Сначала — core-web-vitals от других авторов.

core-web-vitals web-quality-skills Скилл для оптимизации Core Web Vitals: сначала измеряет, потом правит LCP, INP и CLS. Полезен, когда страница тормозит или прыгает вёрстка. CX Codex +1 32 000установок core-web-vitals kostja94 Скилл помогает находить и исправлять проблемы LCP, INP и CLS. Пригодится для технического SEO и проверки скорости страниц. CX Codex +1 1 100установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора495

Весь набор →

accessibility Скилл помогает проверять веб-интерфейсы на доступность по WCAG 2.1 и предлагать правки. Запросите аудит, поддержку клавиатуры или улучшения для скринридеров. 325установок domain-name-brainstormer Придумывает имена для домена под ваш проект и проверяет, какие из них свободны в разных зонах. Пригодится на старте проекта или при ребрендинге. 321установок react-patterns Скилл подсказывает, как выбирать структуру компонентов, хуки и управление состоянием в React. Пригодится при разработке и рефакторинге интерфейсов на TypeScript. 321установок firebase Скилл помогает проектировать Firebase-бэкенд: аутентификацию, базы данных, функции, хранилище и хостинг. Пригодится до настройки схемы и правил доступа. 321установок context-window-management Скилл для работы с контекстным окном LLM: суммаризация, обрезка, маршрутизация и защита от context rot. Пригодится, когда диалог упирается в лимит токенов. 309установок documentation-templates Скилл даёт структуру и шаблоны для README, API-документации, комментариев и других проектных записей. Пригодится, когда нужно оформить документацию с нуля или привести её к общему виду. 305установок unity-project-setup Разворачивает шаблон игрового проекта Unity с папками Assets, URP, базовыми C#-скриптами и конфигурацией Git LFS прямо через диалог с Claude Code. 303установок agent-memory-mcp Скилл поднимает MCP-сервер с долговременной памятью: агент записывает решения, архитектуру и паттерны и потом находит их поиском. 300установок