# ui-visual-validator

Субагент проверяет визуальные изменения интерфейса по скриншотам, дизайн-системе и доступности. Попросите его оценить результат после правок UI.

- субагент · `type=agent` · Claude Code, Codex, Cursor · ★ 41823
- Автор: Seth Hobson
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wshobson/agents/tree/HEAD/plugins/accessibility-compliance/agents/ui-visual-validator.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/ui-visual-validator

## Что делает

ui-visual-validator сверяет видимые изменения с целью правок и ищет признаки того, что результат не достигнут. Он оценивает скриншоты, контраст, состояния фокуса, адаптивность, загрузку и ошибки, а также проверяет соответствие дизайн-токенам. Выводы должны опираться на визуальные свидетельства, а не на изменения в коде.

В описании перечислены инструменты визуального тестирования, включая Playwright Visual Comparisons, Percy и Chromatic, а также проверка доступности по WCAG 2.1/2.2. Субагент может разбирать различия между изображениями, состояния компонентов и отображение на разных платформах. Для оценки ему нужны визуальные материалы и сформулированная цель изменения.

Один из принципов работы — сначала искать признаки неудачи, а не считать правку успешной по умолчанию. Это полезно учитывать: субагент оценивает видимый результат, но не подтверждает корректность скрытой логики приложения.

## Установка

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

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add wshobson/agents
```
В чате агента (не в терминале):
```text
/plugin install accessibility-compliance@claude-code-workflows
```

2. **Вручную: положить файлы**
- Файл: `.claude/agents/ui-visual-validator.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/ui-visual-validator.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/ui-visual-validator.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wshobson/agents/tree/HEAD/plugins/accessibility-compliance/agents/ui-visual-validator.md

## Когда брать
- сравнить скриншот с целью изменения интерфейса
- найти расхождения с токенами дизайн-системы
- проверить контраст и видимость индикатора фокуса
- оценить адаптивность и состояния загрузки
- обнаружить визуальные ошибки на краевых состояниях

## Примеры запросов агенту
- Проверь скриншоты после моих правок и перечисли видимые расхождения с целью изменения.
- Оцени экран по доступности: проверь контраст, фокус и визуальную обратную связь клавиатуры.
- Сравни отображение компонента на разных размерах экрана и найди признаки неудачной адаптации.

## Похожие
- [code-reviewer](https://affpapa.org/nevibecode/agents/anthropic-code-reviewer.md) — субагент · 31050 установок
- [code-reviewer](https://affpapa.org/nevibecode/agents/code-reviewer.md) — субагент · 31050 установок
- [test-engineer](https://affpapa.org/nevibecode/agents/test-engineer.md) — субагент · 9715 установок
- [code-reviewer](https://affpapa.org/nevibecode/agents/voltagent-community-code-reviewer.md) — субагент · 31050 установок
- [fullstack-developer](https://affpapa.org/nevibecode/agents/fullstack-developer.md) — субагент · 18117 установок
- [prompt-engineer](https://affpapa.org/nevibecode/agents/voltagent-community-prompt-engineer.md) — субагент · 16078 установок

Из того же набора: [wshobson/agents](https://affpapa.org/nevibecode/by/wshobson/agents.md) — 498 карточек

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

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