css-container-queries
✓Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size.
Installation
SKILL.md
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 |
Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size. Source: flpbalada/my-opencode-config.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is css-container-queries?
Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size. Source: flpbalada/my-opencode-config.
How do I install css-container-queries?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/flpbalada/my-opencode-config
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01