# audit

Проводит технический аудит интерфейса: доступность, производительность, адаптивность. Отдаёт таблицу находок по приоритетам.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 922 установки · ★ 398
- Автор: educlopez
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/audit/SKILL.md
- Обновлён: 2026-10-19
- HTML: https://affpapa.org/nevibecode/skills/educlopez-audit

## Что делает

Скилл запускает технический разбор интерфейса по трём направлениям: доступность, производительность, адаптивность. Сначала он делает визуальный снимок страницы — через `playwright` MCP-сервер, затем через DevTools или другую автоматизацию браузера. Если ничего из этого нет, скилл попросит у вас скриншоты в трёх размерах: 1280×800, 768×1024 и 375×812, плюс тёмную тему, если она поддерживается. Отказываетесь — получите отчёт с пометкой `[CODE-ONLY REVIEW — visual issues not assessed]`, и часть проблем останется незамеченной.

Проверки жёсткие и без настроек: видимый `:focus-visible` у каждого интерактивного элемента, доступность с клавиатуры без ловушек фокуса, зоны нажатия от 44px на мобильных, подписи к полям и связь с ошибками, `prefers-reduced-motion` для анимаций. В производительности смотрит, что анимируются только `transform` и `opacity`, что нет `transition: all`, что у картинок заданы `width`/`height` или `aspect-ratio`. В адаптивности — mobile-first брейкпоинты, `env(safe-area-inset-*)` у фиксированных элементов, отсутствие горизонтальной прокрутки на 320px.

Находки собираются в таблицу «Before / After / Why» и группируются по приоритету: Critical, High-impact, Quick wins. Код скилл не переписывает, пока вы не попросите — сначала отчёт, правки после подтверждения. Завершает всё Craft Report с областью проверки и вердиктом по главной проблеме.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill audit -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/audit/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/audit/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill audit -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/audit/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill audit -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/audit/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install educlopez/ui-craft audit
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/audit/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill audit -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/audit
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/audit/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill audit -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/audit/SKILL.md

## Когда брать
- найти элементы без видимого фокуса при навигации с клавиатуры
- проверить, не ломается ли вёрстка на 320px
- отловить анимации свойств, вызывающих перерисовку
- собрать список проблем доступности в один приоритизированный отчёт
- проверить зоны нажатия на мобильном

## Примеры запросов агенту
- Проведи аудит интерфейса на странице `checkout`
- Сделай технический аудит доступности и производительности главной страницы
- Прогони audit по адаптивности: посмотри 320px и мобильные тач-зоны

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

## Другие версии с тем же именем
- [audit · jsmastery-pro](https://affpapa.org/nevibecode/skills/jsmastery-pro-audit.md) — 4300 установок
- [audit · calm-north](https://affpapa.org/nevibecode/skills/calm-north-audit.md) — 6400 установок
- [audit · openai](https://affpapa.org/nevibecode/skills/audit.md) — 10 установок
- [audit · aladicf](https://affpapa.org/nevibecode/skills/aladicf-audit.md) — 625 установок

Из того же набора: [educlopez/ui-craft](https://affpapa.org/nevibecode/by/educlopez/ui-craft.md) — 14 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md