Screenshot To Code

---
name: screenshot-to-code
description: "Превращение скриншота UI в production-ready код с точной вёрсткой, стилями и структурой. Разбор изображения (layout, компоненты, визуальные детали, адаптивные подсказки), выбор фреймворка (React+Tailwind по умолчанию, Vue, HTML/CSS, Next.js), генерация полного запускаемого кода: семантический HTML, точные цвета (hex→OKLCH-токены), spacing и пропорции, адаптивность (rem/%/clamp), доступность (a11y). Use при конвертации скриншота/дизайна в код и извлечении дизайн-токенов."
version: 1.0.0
---

# Навык: Screenshot → Code

Цель — по скриншоту выдать **точный, современный, запускаемый** код: воспроизвести структуру и стиль пиксель-в-пиксель, а не приблизительно. Работает в связке со скиллом `tailwind` (v4, CSS-first) и `react`/`nextjs`.

## 1. Анализ скриншота
Открой изображение (инструмент Read показывает картинку) и разбери по слоям:
- **Layout:** grid / flexbox / кастомное позиционирование; число колонок, gaps, выравнивание, максимальная ширина контента.
- **Компоненты:** кнопки, инпуты, карточки, навигация, модалки, табы, списки, бейджи. Отметь **повторяющиеся** — они станут переиспользуемыми компонентами.
- **Визуальные детали:** цвета (точные значения), шрифты (семейство/кегль/насыщенность/межстрочный/трекинг), spacing (шкала отступов), границы, радиусы, тени, градиенты.
- **Состояния и адаптив:** hover/focus/active/disabled, empty/loading/error; признаки mobile- vs desktop-раскладки (перенос колонок, гамбургер, скрытые блоки).

## 2. Выбор фреймворка
Спроси, если не задано. По умолчанию:
- **React + Tailwind v4** — для современных интерфейсов (рекомендуемо).
- **Чистый HTML/CSS** — для простых статичных страниц.
- По запросу — **Vue**, **Next.js** (App Router), styled-components.
Не задано и не спросить — бери React + Tailwind (сложный UI) либо семантический HTML/CSS (простая страница) и пометь выбор.

## 3. Генерация кода
- **Иерархия компонентов:** разбей экран на логические компоненты, повторы вынеси один раз. Пропсы типизируй, задай разумные дефолты (`any` под запретом).
- **Семантический HTML:** `header`/`nav`/`main`/`section`/`article`/`footer`/`button`/`label` вместо «div-супа».
- **Современный CSS:** Grid/Flexbox (не floats/таблицы для раскладки), CSS-переменные, логические свойства.
- **React/Vue:** Server vs Client Component решай явно (`"use client"` только при интерактивности); варианты компонента — через `cva`, объединение классов — `cn` (`clsx`+`tailwind-merge`).

## 4. Точность (цвета, spacing, пропорции)
- **Цвета — точно.** Сними значения со скриншота (hex) и объяви **семантическими токенами** в `@theme` (в OKLCH — шире gamut, предсказуемое осветление): `--color-primary`, `--color-surface`, `--color-border`… — не «магические» литералы по месту.
- **Spacing и типографику** переводи в единую шкалу токенов (`--spacing-*`, размеры/насыщенность шрифта), а не случайные px.
- **Пропорции** (высоты, отношения, максимальные ширины) соблюдай как на макете.

## 5. Адаптивность
- Относительные единицы (`rem`/`em`/`%`/`vw`/`vh`) вместо жёстких px.
- Брейкпоинты (mobile-first: `sm: md: lg:`) там, где дизайн намекает; **container queries** (`@container`) для компонентов, зависящих от контейнера, а не вьюпорта.
- Fluid-типографика и размеры через `clamp()`/`min()`/`max()`.

## 6. Доступность (a11y)
- Alt-тексты у изображений, `aria-label`/`aria-*` где смысл не передан текстом, корректный порядок заголовков.
- Видимый `focus-visible` (не убирай обводку), контраст по WCAG, не полагайся только на цвет; интерактив — на `button`/`a`, а не на `div` с `onClick`.
- Формы: `label` связан с инпутом, состояния валидации доступны скринридеру.

## 7. Готовая поставка
- **Весь код** (все нужные файлы, полностью рабочий), **структура файлов** (что за что отвечает), **как запустить** (зависимости, команды), **заметки о решениях** (допущения, трактовки).
- Никаких заглушек в прод-пути; если данных нет — типизированные пропсы с примером использования.

## 8. Интернационализация текста (i18n)
- Если целевой проект мультиязычный — извлечённый UI-текст (лейблы, кнопки, `alt`, `aria-*`, плейсхолдеры) выводи **ключами** слоя перевода (`t('...')`), а не литералами; в одноязычном — вынеси строки в константы/словарь.
- Даты/числа/валюты — через `Intl`. Подробнее — скилл **i18n**.

## Частые паттерны
- **Навбар:** `flex` + `justify-between`, sticky; на mobile — гамбургер.
- **Сетка карточек:** CSS Grid с `auto-fit`/`auto-fill` + `minmax` для адаптивности.
- **Hero:** секция во всю высоту, центрированный контент, фон/градиент.
- **Формы:** `label`+инпут, состояния валидации, доступный фокус.
- **Модалка:** `fixed`, бэкдроп, focus-trap и возврат фокуса, `Esc` на закрытие.

## Неоднозначность
Если скриншот неясен: трактуй по типовым UI-паттернам, помечай допущение комментарием в коде, предлагай альтернативу. Критичные решения (точный оттенок, поведение интерактива, целевой фреймворк) — уточни у пользователя, не выдумывай молча.