WebPerf Snippets — скилл
56 сниппетов на JavaScript для замеров веб-производительности: агент запускает их через навыки, MCP или CLI и разбирает результат
- 1 456 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Навыки выполняют JavaScript на страницах в вашем браузере, включая страницы под вашей учетной записью
- CLI и MCP-сервер запускают безголовый Chromium и ходят по указанным адресам
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/webperf-snippetsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Навыки выполняют JavaScript на страницах в вашем браузере, включая страницы под вашей учетной записью
- CLI и MCP-сервер запускают безголовый Chromium и ходят по указанным адресам
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
WebPerf Snippets хранит фиксированные скрипты для замера скорости сайта, которые тестируются в CI и возвращают результат в единой структуре. Агент запускает готовый скрипт и интерпретирует число. Тот же код работает в консоли DevTools, в CLI, в расширении DevTools и в навыках агента. Навыки для Claude Code, Cursor, OpenCode, Gemini CLI и других агентов покрывают Core Web Vitals, загрузку, взаимодействие, медиа и ресурсы сети. Главный навык `webperf` служит точкой входа, остальные отвечают за группы замеров. В навыках есть готовые сценарии и деревья решений: если TTFB выше 600 мс, агент запускает разбор TTFB по частям и выясняет, сколько времени уходит на DNS, соединение и ответ сервера. Сниппеты навыки выполняют в вашем браузере. CLI и MCP-сервер запускают те же сниппеты в безголовом Chromium через Playwright. Команда `npx webperf-snippets https://example.com --json` выдает JSON, а флаги `--budget-lcp` и `--budget-cls` задают бюджеты для CI. Готовое действие для GitHub Actions публикует Markdown-отчет в pull request.
Для кого. Для фронтенд-разработчиков и специалистов по скорости сайтов, которые просят Claude Code или Cursor найти причину медленного LCP, высокого TTFB или рывков при прокрутке.
Подходит, если
- Нужно узнать, почему страница долго показывает самый большой элемент, и получить разбор LCP по частям
- Требуется проверить страницу после входа в аккаунт: навыки работают в вашем браузере с вашей учетной записью
- Нужно задать бюджеты LCP и CLS и проверять их в CI на каждом pull request
- Нужен аудит изображений и ленивой загрузки с конкретными замечаниями по файлам
Не подходит, если
- Нужны полевые данные реальных пользователей за месяц: сниппеты замеряют конкретную загрузку, а отчет CrUX подключается отдельным ключом
- Вы проверяете страницу в Safari или Firefox: поддержка Performance API там ограничена, и часть сниппетов не сработает
- Задача — оптимизировать серверный код: инструмент диагностирует клиентскую сторону и показывает, где теряется время
Пример запроса к агенту
Проверь Core Web Vitals на этой странице, найди причину медленного LCP и скажи, какой ресурс виноватОграничения
- Навыки выполняют сниппеты в браузере через Chrome DevTools MCP, без него агент не сможет их запустить.
- Все сниппеты проверены в Google Chrome, в других браузерах на основе Chromium работает большинство.
- CLI и MCP-сервер используют безголовый Chromium через Playwright, поэтому результат на CI может отличаться от результата на вашем ноутбуке.
- Расширение DevTools находится в бете и ставится из архива.
- Для данных CrUX нужен собственный ключ API.
Как отключить. Навыки удалите из `~/.claude/skills/` или из каталога навыков своего агента. MCP-сервер снимает команда `claude mcp remove webperf`, плагин отключается через `/plugin`.
Частые вопросы
Как поставить WebPerf Snippets в Claude Code?
Выполните `npx skills add nucliweb/webperf-snippets` для навыков. Для MCP-сервера: `claude mcp add webperf -- npx -y webperf-snippets mcp`. Плагин ставится командой `/plugin install webperf --marketplace nucliweb/webperf-snippets`.
Чем MCP-сервер отличается от навыков?
Навыки запускают сниппеты в вашем открытом Chrome через Chrome DevTools MCP и подходят для страниц за логином. MCP-сервер сам открывает безголовый Chromium и отдает агенту сниппеты как инструменты.
Как проверить скорость в CI?
Используйте `npx webperf-snippets https://example.com --budget-lcp 2500 --budget-cls 0.1`. Для GitHub Actions есть готовое составное действие, оно публикует Markdown-отчет в pull request.
Почему агенту лучше дать готовые сниппеты?
Агент хорошо интерпретирует данные, но ненадежно пишет код замера на ходу. Здесь замер зафиксирован и тестируется в CI, а агент только читает возвращаемый объект.
Сколько замеров в наборе?
56 сниппетов: 7 по Core Web Vitals, 34 по загрузке, 10 по взаимодействию, 4 по медиа и 1 по ресурсам сети. Они сгруппированы в навыки.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыНабор скиллов для аудита качества сайта: производительность, Core Web Vitals, доступность, SEO и лучшие практики по данным Lighthouse
Консоль, сеть, скриншоты и аудиты Lighthouse из вашего открытого Chrome прямо в агент через расширение DevTools
Lazyweb — скриншоты продуктов для дизайна
lazyweb-skill
Набор скиллов и размещенный MCP-сервер: агент берет реальные скриншоты, пути и эксперименты других продуктов
Сканер доступности для агентов и CI: рендерит страницу в Chromium с axe-core или линтит исходники React, Vue и Angular.
Скилл и CLI pwc: по одной команде clone с адресом агент воссоздает страницу сайта как проект Vite и React и измеряет совпадение
Скилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Коротко о README
README начинается с идеи: измерение фиксировано, интерпретация за агентом. Дальше идут способы запуска: кнопка копирования промпта на страницах сниппетов, MCP-сервер, навыки, CLI и расширение DevTools. В конце таблица категорий замеров с описанием каждой группы.
Бейдж для README
Исходный SKILL.md
--- name: webperf description: Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar. license: MIT metadata: author: Joan Leon | @nucliweb version: 2.4.2 mcp-server: chrome-devtools category: web-performance repository: https://github.com/nucliweb/webperf-snippets --- # WebPerf Snippets Toolkit A collection of 56 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the page and returns a structured result object. ## Quick Reference | Skill | Snippets | Trigger phrases | |-------|----------|-----------------| | webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" | | webperf-loading | 34 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" | | webperf-interaction | 10 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | | webperf-media | 4 | "image audit", "lazy loading", "image optimization", "video audit" | | webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |