Addy Osmani Agent Skills — Сценарии использования, Установка & Живое демо

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

Зачем использовать

Ключевые функции

Навыки производительности: Core Web Vitals, render budget, отладка INP
Доступность: скрипты axe + прохождение со screen reader
Безопасность: ревью с акцентом на OWASP и сканирование секретов
Отладка: структурированный рабочий процесс поиска корневой причины с профилировщиком
Работает с несколькими coding-агентами (Claude Code, Cursor, Codex, Gemini CLI)
MIT, без телеметрии

Живое демо

Как выглядит на практике

готово

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Addy Osmani Agent Skills

Как исправить проблемы Core Web Vitals с Claude в качестве основной рабочей силы

👤 Frontend-инженеры, команды, ориентированные на производительность ⏱ ~90 min intermediate

Когда использовать: PageSpeed упал, LCP превысил 2.5с, бизнес спрашивает почему.

Предварительные требования

Навык установлен — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
URL или репозиторий для аудита — Публичный URL или локальный dev-сервер

Поток

Диагностика

Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ Скопировано

→ Ранжированный список виновников со ссылками на файлы, а не общие советы «оптимизируйте изображения»
Исправить

For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ Скопировано

→ Изменение кода + ожидаемый эффект на метрики до/после
Проверить

Re-run Lighthouse locally. Compare to previous run.✓ Скопировано

→ Показатели улучшились; если нет — гипотеза была неверной, вернитесь к шагу 1

Итог: Измеримые улучшения LCP/INP с историей изменений.

Подводные камни

Claude слишком рьяно предлагает тяжёлый рефакторинг фреймворка — Навык включает правило «минимально необходимое изменение» — вставьте его обратно, если агент уходит в сторону

Сочетать с: filesystem

Аудит страницы на проблемы доступности на уровне Claude Code

👤 Frontend-разработчики, разрабатывающие B2C-сайты ⏱ ~60 min intermediate

Когда использовать: Вы унаследовали UI с неизвестным статусом a11y и вам нужен реальный аудит, а не галочка.

Поток

Запустить набор тестов

Use the a11y skill on /app/components/. Run axe rules + heuristic checks for focus management and keyboard traps.✓ Скопировано

→ Проблемы сгруппированы по серьёзности; ID правил указаны
Сортировка

Group issues by component. Rank by user impact, not raw count.✓ Скопировано

→ Топ-10 компонентов для исправления
Исправить один

Pick the highest-impact item. Apply the fix; don't break existing tests.✓ Скопировано

→ Исправление применено; тесты зелёные

Итог: Реальные улучшения a11y, а не «мы запустили axe и назвали это готовым».

Подводные камни

Автоисправление нарушает дизайн-намерение (например, добавляет label к стилизованной иконке-кнопке) — Навык предпочитает визуально-эквивалентные подходы, такие как aria-label, а не видимый label

Запустить ревью «безопасно по умолчанию» на TypeScript-кодовой базе

👤 Разработчики без выделенной команды безопасности ⏱ ~75 min advanced

Когда использовать: Перед запуском хотите разумный обход — не пентест, но лучше, чем ничего.

Поток

Сканирование

Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ Скопировано

→ Таблица находок с file:line и серьёзностью
Исправить топ-5

Fix the highest-severity items. Add tests where feasible.✓ Скопировано

→ 5 исправлений применено

Итог: Кодовая база, которая не провалит базовое ревью безопасности.

Подводные камни

Ложные срабатывания на тестовых фикстурах — Навык игнорирует /tests/ и /__fixtures__/ по умолчанию — передайте --include-tests для переопределения

Сочетать с: github

Использовать структурированный навык отладки на регрессии

👤 Любой разработчик с багом «вчера работало» ⏱ ~60 min intermediate

Когда использовать: Вы 30 минут гадаете — переключитесь на структурированный поиск корневой причины.

Поток

Воспроизвести

Use the debug skill. First step: get a minimal reproduction.✓ Скопировано

→ Шаги воспроизведения + один падающий тест
Бисект

Bisect git history with the failing test as oracle.✓ Скопировано

→ Нарушающий коммит найден
Исправить

Surgical fix — preserve the intended behavior of the offending commit.✓ Скопировано

→ Исправление зафиксировано с объяснением

Итог: Воспроизводимое исправление, подкреплённое тестом, а не догадкой.

Подводные камни

Навык чрезмерно применяет бисект, когда баг не в коде (env/данные) — Навык сначала проверяет env/данные по своему чеклисту — следуйте порядку

Сочетать с: github

Комбинации

Сочетайте с другими MCP — эффект x10

addyosmani-agent-skills + github

Открывать PR из вывода навыков

addyosmani-agent-skills + filesystem

Сохранять отчёты аудита навыков

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать
perf.audit	url_or_path	Регрессия производительности
a11y.audit	path	Проверка доступности перед релизом
security.scan	path	Обход безопасности перед запуском
debug.bisect	failing_test, search_window	Регрессия с известной рабочей точкой

Стоимость и лимиты

Во что обходится

Квота API: Н/Д — локальный навык
Токенов на вызов: Тяжёлые ревью могут быть дорогостоящими; большие кодовые базы используют 50k+ токенов
Деньги: Бесплатно (MIT)
Совет: Запускайте perf/a11y по маршруту, а не по всему сайту сразу, чтобы ограничить затраты

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: filesystem-read

Хранение учётных данных: Отсутствует

Исходящий трафик: Lighthouse запускается локально; загружаются только аудируемые URL

Вывод навыков может цитировать исходный код — проверьте перед внешней публикацией

Устранение неполадок

Частые ошибки и исправления

Lighthouse не запускается

Установите Node 18+ и Chrome; навык ожидает оба в PATH

Проверить: `npx lighthouse https://example.com` работает самостоятельно

Правила axe устарели

Навык поставляется с зафиксированной версией axe; регулярно обновляйте с git pull

Бисект работает вечно на недетерминированном тесте

Передайте --repeat 3, чтобы каждый коммит тестировался 3 раза — нестабильные тесты отфильтровываются

Альтернативы

Addy Osmani Agent Skills в сравнении

Альтернатива	Когда использовать	Компромисс
wshobson/agents	Вам нужно широкое покрытие ролей (backend / data / DevOps)	wshobson шире; пакет Addy глубже в web-perf/a11y
Официальные навыки Anthropic	Нужны универсальные, официально одобренные строительные блоки	Менее самонастроенные; менее практико-ориентированные

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills