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
screenshot-to-code
0
Скриншот UI в production-ready код: layout, design tokens, responsive behavior, semantic HTML и a11y.
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
# Навык: Screenshot → Code По скриншоту — точный, современный, запускаемый код: воспроизвести структуру и стиль пиксель-в-пиксель. В связке с `$tailwind` (v4, CSS-first) и `$react`/`$nextjs`. ## 1. Анализ Разбери: **layout** (grid/flex/позиционирование, колонки, gaps, выравнивание, max-width), **компоненты** (повторы → переиспользуемые), **детали** (цвета, типографика, spacing, радиусы, тени, градиенты), **состояния и адаптив** (hover/focus/disabled, empty/loading/error, mobile vs desktop). ## 2. Фреймворк Спроси, если не задано. По умолчанию React + Tailwind v4; простая статика — семантический HTML/CSS; по запросу Vue / Next.js (App Router). ## 3. Генерация Иерархия компонентов (повторы — один раз, пропсы типизированы); семантический HTML (`header`/`nav`/`main`/`section`/`button`/`label`); современный CSS (Grid/Flex, не floats/таблицы); Server vs Client Component явно; варианты — `cva`, классы — `cn`. ## 4. Точность Цвета — точные hex → **OKLCH-токены** в `@theme` по ролям (`--color-primary`/`--color-surface`/`--color-border`…), не литералы по месту. Spacing/типографику — в единую шкалу токенов. Пропорции — по макету. ## 5. Адаптив Относительные единицы (rem/em/%/vw); брейкпоинты mobile-first (`sm: md: lg:`); **container queries** (`@container`) для компонентов; fluid через `clamp()`/`min()`/`max()`. ## 6. Доступность Alt-тексты, `aria-*` где нужно, порядок заголовков, видимый `focus-visible`, контраст WCAG, интерактив на `button`/`a`; формы — `label`+инпут, доступные состояния валидации. ## 7. Поставка Весь код (рабочий), структура файлов, как запустить, заметки о допущениях. Без заглушек в прод-пути. ## 8. Интернационализация текста (i18n) Если целевой проект мультиязычный — извлечённый UI-текст (лейблы, кнопки, `alt`, `aria-*`, плейсхолдеры) выводи **ключами** слоя перевода, а не литералами; в одноязычном — вынеси в константы/словарь. Даты/числа/валюты — через `Intl`. Подробнее — `$i18n`. ## Частые паттерны Навбар — `flex justify-between` + sticky (mobile — гамбургер); сетка карточек — Grid `auto-fit`/`minmax`; hero — full-height, центр, фон/градиент; формы — `label`+инпут + валидация; модалка — `fixed`, бэкдроп, focus-trap, `Esc`. ## Неоднозначность Неясное — по типовым паттернам + пометка комментарием и альтернатива; критичное (оттенок, поведение, фреймворк) — уточни, не выдумывай.