Frontend / AGENT SKILL

screenshot-convert

0 installs 2 GitHub stars

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

One new superpower.

Run this command in your project to choose an agent and install the skill.

npx skillycli add https://github.com/Vitammiin/agent-vorcl-flow --skill screenshot-convertView original source

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

<!-- generated by scripts/generate-codex-skills.mjs; edit canonical agents/, commands/ or skills/ -->

Сгенерируй полный код по скриншоту: **запрос пользователя**.

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

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

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

Skill folder

Files included alongside SKILL.md in the publisher’s repository.

SKILL.md