Community / AGENT SKILL

screenshot-responsive

0 installs 2 GitHub stars

Довести сгенерированный по скриншоту 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

# Задача: адаптивность UI по скриншоту (screenshot)

Сделай указанный UI адаптивным (см. `$screenshot-to-code`, `$tailwind`).

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

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