skilly. Buy ad slot
All skills
Community / AGENT SKILL

screenshot-convert

Vitammiin/agent-vorcl-flow
0 installs 2 GitHub stars
0

Сгенерировать полный запускаемый код по скриншоту — семантика, точные токены, адаптив, a11y (роль screenshot). Use when нужен НОВЫЙ UI по скриншоту; найти этот экран в существующем коде → $pinpoint-locate, только разбор без кода → $screenshot-analyze.

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

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)

Сгенерируй полный код по указанному скриншоту (см. `$screenshot-to-code`).

Открой изображение и разбери: layout (grid/flex), компоненты (повторы — в переиспользуемые), детали (цвета, типографика, spacing, радиусы, тени). **Фреймворк:** не указан — по умолчанию React + Tailwind v4 (простая статика — семантический HTML/CSS); поддержи Vue / Next.js по запросу.

Требования: **семантический HTML** (не «div-суп»); **точные цвета** — hex со скриншота → семантические токены `@theme` (OKLCH); **spacing/пропорции** по макету; варианты — `cva`, классы — `cn`; типизированные пропсы (`any` запрещён); **адаптив** (rem/%/`clamp()`, брейкпоинты/container queries); **a11y** (alt, `aria-*`, видимый focus, контраст WCAG).

**Материализуй** результат как файлы в рабочем каталоге/проекте пользователя и отдай пути — не оставляй код только текстом в ответе. Перед выдачей **проверь, что код запускается**: `npm run dev`/`npm run build` (для статики — открытие HTML) проходит без ошибок; только запускаемый артефакт = готово. Отдай **все файлы + пути**, структуру, как запустить, результат проверки и заметки о допущениях; неоднозначное помечай и предлагай альтернативу. Опирайся на `$screenshot-to-code`, `$tailwind`, `$react`, `$nextjs`, `$typescript`.