AIKraft/AI/Войти
AIKraft/Skills/adapt

adapt

Адаптирует дизайн под разные экраны, устройства и контексты с помощью CSS Grid, Flexbox, media queries и clamp(). Применяется при запросах о responsive design, мобильных макетах, брейкпоинтах и кросс-платформенной совместимости.

pbakaus official Разработка ★ 76.2k

Что делает навык

Навык адаптирует существующие дизайны под различные контексты использования, такие как разные размеры экранов, устройства и платформы. Он решает задачу переосмысления пользовательского опыта для новой среды, а не просто масштабирования интерфейса, обеспечивая кросс-платформенную совместимость.

Когда применять

  • Адаптация десктопного веб-дизайна под мобильные устройства с учетом ограничений ввода и размера экрана.
  • Проектирование гибридных макетов для планшетов, поддерживающих как сенсорное управление, так и мышь.
  • Подготовка дизайна для печати, включая удаление интерактивных элементов и настройку верстки.
  • Адаптация веб-интерфейсов для отправки в email с использованием табличной верстки и инлайн-стилей.

Как работает

  1. Вызовите /impeccable и следуйте протоколу сбора контекста, предварительно запустив /impeccable teach, если контекст дизайна отсутствует.
  2. Определите исходный контекст (предположения, сильные стороны) и целевой контекст (устройство, метод ввода, ограничения связи).
  3. Выявите проблемы адаптации: что не помещается, что не работает (например, hover на тачскринах) и что неуместно.
  4. Разработайте стратегию, выбирая соответствующие техники (CSS Grid, Flexbox, clamp(), media queries) и паттерны взаимодействия.
  5. Примените изменения системно, учитывая требования к размерам касаний (минимум 44x44px), прогрессивному раскрытию контента и навигации.
  6. Протестируйте адаптацию на реальных устройствах, в разных ориентациях, браузерах и условиях соединения.

Примеры запросов агенту

Адаптируй этот десктопный макет для мобильных устройств, сохранив основную функциональность.
Преврати веб-страницу в версию для печати, убрав навигацию и настроив разрывы страниц.
Создай адаптивный дизайн для email-рассылки с шириной до 600px и инлайн-стилями.

Что понадобится

  • Доступ к команде /impeccable и протоколу сбора контекста
  • Инструменты для тестирования на реальных устройствах (не только эмуляция)
  • Знание CSS Grid, Flexbox, media queries и clamp()

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «adapt» из репозитория: # https://github.com/pbakaus/impeccable
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r adapt/ ~/.claude/skills/adapt/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.