Frontend / AGENT SKILL

screenshot-responsive

0 installs 2 GitHub stars

Довести сгенерированный по скриншоту UI до адаптивности — брейкпоинты, fluid, clamp, container queries (screenshot). Use when код уже есть и нужен только адаптив; генерация с нуля…
Довести сгенерированный по скриншоту UI до адаптивности — брейкпоинты, fluid, clamp, container queries (screenshot). Use when код уже есть и нужен только адаптив; генерация с нуля → /screenshot:convert

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-responsiveView 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/ -->

Сделай UI адаптивным: **запрос пользователя**.

Если даны скриншоты разных брейкпоинтов (mobile/tablet/desktop) — открой их через Read и сверь, как меняется раскладка (перенос колонок, гамбургер-меню, скрытые/переставленные блоки, изменённая типографика). Приведи компонент к адаптивности:
- Замени жёсткие px на относительные единицы (`rem`/`em`/`%`/`vw`); fluid-размеры и типографику через `clamp()`/`min()`/`max()`.
- Добавь брейкпоинты mobile-first (`sm: md: lg:`); для компонентов, зависящих от контейнера, — **container queries** (`@container` + `@sm:`/`@md:`).
- Сохрани семантику и a11y; проверь отсутствие переполнений и горизонтального скролла на узких ширинах.

Не ломай существующее поведение; покажи диф с пояснением, что на каком брейкпоинте меняется. Опирайся на навыки `tailwind`, `screenshot-to-code`, `react`. Делегируй субагенту `$screenshot`.