Ui Source Mapping

---
name: ui-source-mapping
description: "UI source mapping: скриншот работающего интерфейса в существующие route, component, control, handler и API с file:line."
---

# Навык: UI → Source Mapping (скриншот → существующий код)

По скриншоту работающего интерфейса — **найти его в реальной кодовой базе** и объяснить устройство: компонент, маршрут, контрол, логика — до `file:line`. Ничего не генерируешь/не правишь; отдаёшь карту и делегируешь. Обратная задача к `$screenshot-to-code`; в связке с `$frontend-architecture`, `$react`/`$nextjs`, `$data-fetching`/`$state-management`, `$i18n`.

## 0. Существующий или новый
Есть код (`package.json`, `src/`, git) и якоря грепаются → существующий (привязка). Greenfield/макет для нового UI → `$screenshot-to-code`. Сомнение — грепни якоря; совпадения решают. Файлы не выдумывай.

## 1. Якоря со скриншота
От уникального к общему: **видимый текст** (заголовки, лейблы, плейсхолдеры, меню, тосты, бейджи), **иконки** (имя из набора, `aria-label`), **структура** (шапка/сайдбар/контент/модалка, тип блока), **контекст маршрута** (активный пункт, крошки, вкладка, URL), **состояние** (таб/модалка/шаг, выделение, disabled).

## 2. i18n: текст на экране ≠ текст в коде
В мультиязычном проекте на экране — **значение**, в JSX — **ключ** (`t('cart.checkout')`). Грепни значение по локали (`locales/**`, `*.json`/`*.po`) → ключ → грепни ключ по компонентам. В одноязычном текст обычно литералом. См. `$i18n`.

## 3. Grep-стратегия
`rg` от самой редкой строки к частой (фраза → часть → ключ → имя иконки); игнорируй `node_modules`/сборку, сначала `src/`; много совпадений — сузь по соседним якорям; ноль — проверь склейку строк/шаблоны/константы/текст из API, ищи по `data-testid`/`aria-label`.

## 4. Маршрут
Свяжи компонент с URL: **Next.js App Router** (`app/**/page.tsx`, сегменты, `[param]`, `(group)`, `layout.tsx`), **Pages Router** (`pages/**`), **React Router** (`<Route path>`/`createBrowserRouter`, `Outlet`, `index`). Иди в обе стороны: компонент → кто рендерит → `page`/`Route`; и активный пункт навигации → `href`/`to` → маршрут.

## 5. Контрол
Вычисли **конкретный** элемент по тексту/`aria-label`/иконке/позиции; найди обработчик (`onClick`/`onSubmit`/`onChange`) и куда ведёт (хендлер, экшен стора, мутация). Похожие кнопки раздели по различающему признаку.

## 6. Логика
От обработчика вглубь: **состояние/стор** (`$state-management`), **данные** (React Query/SWR/`fetch`/`openapi-fetch`, какой эндпоинт — `$data-fetching`), при необходимости **бэкенд-роут**. Первопричина поведения, не ближайший JSX.

## 7. Вывод — карта «скриншот → исходники»
Каждый пункт с `file:line` + фрагмент: **экран** (компонент), **маршрут** (URL/где объявлен), **контрол** (+ обработчик), **логика** (обработчик → состояние → data-fetch → API), **правка** (что менять в существующем коде без новых файлов и кому — `$frontend`/`$backend`).

## 8. Границы
Только чтение — не правишь/не создаёшь; цель — переиспользовать существующее. Неоднозначность — кандидаты с различием; критичное — уточни. Генерация нового UI — верни в `$screenshot-to-code`.