Applica query sui contenitori CSS per una progettazione reattiva basata su componenti. Da utilizzare quando si implementano componenti reattivi che si adattano alle dimensioni del contenitore anziché alle dimensioni del viewport.
Installa rapidamente la skill AI css-container-queries nel tuo ambiente di sviluppo tramite riga di comando
Fonte: 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 |
Applica query sui contenitori CSS per una progettazione reattiva basata su componenti. Da utilizzare quando si implementano componenti reattivi che si adattano alle dimensioni del contenitore anziché alle dimensioni del viewport. Fonte: flpbalada/my-opencode-config.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queriesApplica query sui contenitori CSS per una progettazione reattiva basata su componenti. Da utilizzare quando si implementano componenti reattivi che si adattano alle dimensioni del contenitore anziché alle dimensioni del viewport. Fonte: flpbalada/my-opencode-config.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/flpbalada/my-opencode-config