domains / families / design / responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.
The two skills cover the same topic but from different angles. The Owl-Listener skill is a high-level design strategy guide (strategies, patterns, input methods, best practices) that does not include implementation code. The LeoYeAI skill is a technical implementation guide focused on modern CSS features (container queries, fluid typography with clamp, CSS Grid) and includes specific code patterns. Neither is a reproduction of the other; the first lacks the technical depth of the second, and the second lacks the strategic design principles and input method adaptation of the first. Combining them provides a complete skill covering both strategy and implementation.