Ui Ux Audit

---
name: ui-ux-audit
description: |
  UI/UX аудит приложения с extended thinking. Используй при:
  - Проверке качества интерфейса перед релизом
  - Анализе accessibility (WCAG 2.1)
  - Проверке responsive дизайна
  - Оценке консистентности дизайн-системы
  - Поиске UX улучшений
disable-model-invocation: true
---

# UI/UX Audit Skill

Глубокий аудит UI/UX с использованием extended thinking для детального анализа.

## Quick Reference

### Ключевые метрики

| Область       | Метрика     | Цель                        |
| ------------- | ----------- | --------------------------- |
| Accessibility | WCAG 2.1 AA | 100% соответствие           |
| Contrast      | Color ratio | ≥ 4.5:1 (текст), ≥ 3:1 (UI) |
| Touch         | Target size | ≥ 44×44px                   |
| Performance   | LCP         | < 2.5s                      |
| Performance   | CLS         | < 0.1                       |
| Responsive    | Breakpoints | base → sm → md → lg → xl    |

### Инструменты

```bash
# Lighthouse
npx lighthouse https://localhost:3000 --view

# axe-core (accessibility)
# Через Chrome DevTools → Accessibility panel

# Bundle analysis
ANALYZE=true nx build <app>
```

### Чеклист быстрой проверки

- [ ] Все интерактивные элементы имеют focus state
- [ ] Цветовой контраст соответствует WCAG AA
- [ ] Touch targets минимум 44×44px
- [ ] Используются токены вместо хардкода
- [ ] Dark mode работает корректно
- [ ] Responsive на всех breakpoints

---

## Методология анализа (Extended Thinking)

При анализе используй **расширенное размышление** для каждого компонента:

### 1. Перспектива пользователя

- Как пользователь взаимодействует с элементом?
- Какие ожидания у пользователя?
- Где возможны frustration points?

### 2. Перспектива разработчика

- Следует ли код best practices?
- Есть ли технический долг?
- Насколько maintainable решение?

### 3. Перспектива дизайнера

- Консистентен ли дизайн с системой?
- Правильно ли используются токены?
- Есть ли visual hierarchy?

---

## Области аудита

### 1. Accessibility (reference/accessibility.md)

- WCAG 2.1 AA критерии
- Keyboard navigation
- ARIA patterns
- Screen reader support

### 2. Responsive Design (reference/responsive.md)

- Mobile-first подход
- Breakpoints usage
- Touch-friendly UI

### 3. Design System (reference/design-system.md)

- Tokens vs hardcode
- Consistency
- Dark/Light mode

### 4. UI Performance (reference/performance.md)

- Render optimization
- Animation performance
- Layout shifts

### 5. UX Patterns (reference/ux-patterns.md)

- Navigation
- Feedback states
- Error handling

---

## Интеграция с MCP

### Chakra UI

Проектный сервер `chakra-ui` удалён 2026-09-14 — документация через desktop-расширение Context7:
`resolve-library-id({ libraryName: "chakra-ui" })`, затем `get-library-docs` с вопросом про
props/пример/миграцию v2→v3.

### Browser Automation

```
mcp__Claude_Browser__read_page — accessibility tree
mcp__Claude_Browser__javascript_tool — DOM, performance.getEntries()
mcp__Claude_Browser__computer — скриншот и взаимодействие
(встроенный Claude Browser; playwright/chrome-devtools MCP сняты ревизией 2026-09-14; трассу производительности — Lighthouse CLI)
```

---

## Связанные ресурсы

- [mobile-ui skill](../mobile-ui/SKILL.md) — мобильный UI
- [chakra-theming skill](../chakra-theming/SKILL.md) — темизация
- [UI компоненты](/.claude/docs/ui-components.md) — паттерны Chakra UI v3