Skill / Layout / Design Systems / Visual / External
prefer-container-queries
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
by flornkm
Works with
Universal
Hosted in an external repository
This skill's full instructions live in its source repository, not on UI Skillbook. Open it on GitHub to read it, or copy a prompt that points your agent straight at it.
Related skills
banner-designExternal
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
bencium-innovative-ux-designerExternal
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
better-layoutExternal
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
brandExternal
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.