SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Community / AGENT SKILL
ui-source-mapping
0
UI source mapping: скриншот работающего интерфейса в существующие route, component, control, handler и API с file:line.
Understand the trade-offs.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# Навык: 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`.