---
title: "Addy Osmani Skills: инженерные практики для AI-агентов"
description: Коллекция production-grade навыков Эдди Османи для спецификации, планирования, frontend-разработки, тестирования, ревью, безопасности и выпуска.
---

[Addy Osmani Agent Skills](https://github.com/addyosmani/agent-skills) — MIT-коллекция инженерных рабочих процессов для кодовых агентов. Она переносит в `SKILL.md` не общие советы «пиши качественно», а конкретные шаги, контрольные точки, анти-рационализации и требования к доказательствам результата.

В коллекции 25 навыков: 24 относятся к жизненному циклу разработки, а `using-agent-skills` помогает выбрать подходящий процесс. Дизайн интерфейса занимает здесь важное, но не доминирующее место.

## Структура коллекции

Навыки сгруппированы по этапам:

- **Define:** интервью с пользователем, уточнение идеи, spec-driven development и фиксация ограничений качества.
- **Plan:** разбиение спецификации на небольшие проверяемые задачи с зависимостями.
- **Build:** вертикальные срезы, TDD, context engineering, работа с официальными источниками, API и frontend UI.
- **Verify:** браузерная диагностика через DevTools, отладка и воспроизведение ошибок.
- **Review:** качество кода, упрощение, безопасность и производительность.
- **Ship:** Git, CI/CD, миграции, документация, ADR, наблюдаемость и запуск.

Для дизайн-задач особенно полезен `frontend-ui-engineering`: компонентная архитектура, дизайн-системы, состояние, адаптивность и WCAG 2.1 AA. Его стоит соединять с визуальным контрактом [DESIGN.md](https://wpcraft.ru/kb/design/ai/design-md.md): инженерный навык проверяет реализацию, но не должен самовольно заменять утверждённые токены и компоненты.

`browser-testing-with-devtools` добавляет проверку живого DOM, консоли, сети и производительности. `constraint-driven-development` помогает заранее определить обязательный уровень качества, чтобы агент не ослаблял проверки ради формально успешного завершения.

## Команды и роли

Девять slash-команд образуют входные точки: `/spec`, `/plan`, `/build`, `/test`, `/constraints`, `/review`, `/webperf`, `/code-simplify` и `/ship`. Они активируют соответствующие навыки; в разных агентских средах имена и способ вызова могут отличаться.

Дополнительно доступны четыре роли: code reviewer, test engineer, security auditor и web performance auditor. Роли не должны бесконечно вызывать друг друга — в проекте есть отдельные правила оркестрации.

Главный принцип коллекции — **verification is non-negotiable**. Для подтверждения результата нужны тесты, сборка, runtime-данные или другой наблюдаемый артефакт. Это особенно важно для интерфейсов: «выглядит правильно» не доказывает ни доступность, ни сохранность сценария.

## Установка

Универсальный вариант через skills CLI:

```bash
npx skills add addyosmani/agent-skills --list
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering
```

Первый вызов показывает доступные навыки, второй устанавливает один. Для Claude Code доступен marketplace:

```text
/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills
```

У выборочной установки есть задокументированный нюанс: общие чек-листы из корневого `references/` могут не попасть в отдельный каталог навыка. Если инструкция ссылается на такой файл, используйте интеграцию всего репозитория или перенесите нужный reference внутрь установленного навыка.

## Как внедрять в существующий проект

Не запускайте сразу весь жизненный цикл. Для действующей кодовой базы разумнее начать с проверки: code review, browser testing, accessibility checklist и performance. Затем добавить спецификацию и планирование для новых изменений.

Для нового проекта можно пройти полный маршрут, но каждый quality gate должен соответствовать реальному риску. Маленький контентный сайт не обязан воспроизводить инфраструктуру крупного SaaS.

## Чем отличается от gstack

Addy Osmani Skills — модульный набор практик с акцентом на инженерную дисциплину. [gstack](https://wpcraft.ru/kb/design/ai/skills/gstack.md) предлагает более связанный сценарий виртуальной команды и собственный браузерно-релизный инструментарий. Для чисто визуальной итерации обе коллекции шире, чем [Impeccable](https://wpcraft.ru/kb/design/ai/skills/impeccable.md).

## Материалы и источники

- [Официальный репозиторий Addy Osmani Agent Skills](https://github.com/addyosmani/agent-skills)
- [Сайт коллекции](https://skills.addy.ie/)
- [Руководство по внедрению](https://github.com/addyosmani/agent-skills/blob/main/docs/adoption-guide.md)
- [Устройство навыка](https://github.com/addyosmani/agent-skills/blob/main/docs/skill-anatomy.md)