responsive-craft — скилл для Claude Code: адаптивная вёрстка

Что делает responsive-craft

Скилл работает в трёх режимах. audit разбирает текущую вёрстку и правит мобильные проблемы, build собирает адаптивную раскладку с нуля, preview открывает в браузере предпросмотр сразу на нескольких контрольных точках. Режим выбирается по аргументу или по тому, что вы напишете агенту словами.

Внутри — набор правил, по которым агент решает, чем чинить конкретное место: сначала встроенные средства CSS вроде auto-fit, flex-wrap и clamp(), потом контейнерные запросы для компонентов, и только в последнюю очередь медиазапросы для страницы целиком. Есть отдельные файлы-справочники по липким элементам и прокрутке, по типичным ошибкам ИИ в адаптивной вёрстке и по проверке результата. Когда у перевода макета в адаптив есть несколько равнозначных вариантов, скилл показывает их с плюсами и минусами и просит выбрать, а не решает молча.

Уровень интерактивности тоже выбирается: Adaptive задаёт пару вопросов и сразу берётся за дело, Guided сначала пишет спецификацию поведения по каждому компоненту и ждёт подтверждения. Для раскладок с пятью и больше адаптивными компонентами, несколькими липкими блоками или дашбордом скилл советует Guided — иначе переделывать придётся дороже.