Screenshot Analyze

---
name: screenshot-analyze
description: Read-only разбор скриншота — layout, компоненты, токены, состояния → план воплощения, без генерации кода (роль screenshot). Use when нужен план/разбор ПЕРЕД кодом; готовый код → $screenshot-convert, только токены → $screenshot-tokens.
---

# Задача: разбор скриншота (screenshot)

Проведи **read-only** разбор скриншота, код не пиши (см. `$screenshot-to-code`).

Открой изображение и опиши структурировано:
- **Layout:** grid/flex/позиционирование, колонки, gaps, выравнивание, max-width, mobile- vs desktop-подсказки.
- **Компоненты:** перечисли (навбар, кнопки, инпуты, карточки, модалки, табы…), отметь повторяющиеся кандидаты в переиспользуемые.
- **Токены:** цвета (hex → OKLCH-токены `@theme`), типографика, шкала spacing, радиусы, тени, градиенты.
- **Состояния:** hover/focus/active/disabled, empty/loading/error.

Выдай **план воплощения**: иерархию компонентов, рекомендуемый фреймворк (по умолчанию React + Tailwind v4), что уточнить. Реализация — через `$screenshot-convert`. Опирайся на `$screenshot-to-code`, `$tailwind`, `$react`, `$frontend-architecture`.