Применяйте запросы CSS-контейнеров для создания адаптивного дизайна на основе компонентов. Используйте при реализации адаптивных компонентов, которые адаптируются к размеру своего контейнера, а не к размеру области просмотра.
Быстро установите AI-навык css-container-queries в вашу среду разработки через командную строку
Источник: flpbalada/my-opencode-config.
A guide for implementing container-based responsive design using CSS container queries and Tailwind CSS.
Container queries enable styling elements based on their container's size rather than the viewport size. Unlike media queries that respond to the browser window, container queries make components self-contained and truly reusable.
| Responds to | Viewport size | Container size | | Reusability | Layout-dependent | Fully portable | | Use case | Page layouts | Component styling | | Syntax | @media | @container |
Применяйте запросы CSS-контейнеров для создания адаптивного дизайна на основе компонентов. Используйте при реализации адаптивных компонентов, которые адаптируются к размеру своего контейнера, а не к размеру области просмотра. Источник: flpbalada/my-opencode-config.
Стабильные поля и команды для ссылок в AI/поиске.
npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queriesПрименяйте запросы CSS-контейнеров для создания адаптивного дизайна на основе компонентов. Используйте при реализации адаптивных компонентов, которые адаптируются к размеру своего контейнера, а не к размеру области просмотра. Источник: flpbalada/my-opencode-config.
Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
https://github.com/flpbalada/my-opencode-config