Довести сгенерированный по скриншоту UI до адаптивности — брейкпоинты, fluid, clamp, container queries (роль screenshot). Use when код уже есть и нужен только адаптив; генерация с нуля → $screenshot-convert.
Installs into .claude/skills of the current project.
Are you the author of Screenshot Responsive?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-screenshot-responsive)
---
name: screenshot-responsive
description: Довести сгенерированный по скриншоту UI до адаптивности — брейкпоинты, fluid, clamp, container queries (роль screenshot). Use when код уже есть и нужен только адаптив; генерация с нуля → $screenshot-convert.
---
# Задача: адаптивность 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`.
