What problem does it solve? Building interfaces that only work at a few fixed device widths leads to broken layouts at intermediate sizes, zoom levels, and unexpected content lengths. This Skill replaces device-preset thinking with a systematic workflow for making web UIs adapt naturally to any viewport, container, zoom level, or input environment. ## Core Features & Use Cases - Content-driven breakpoint discovery: Start fluid from narrow widths, find stress points by continuously resizing, and add discrete breakpoints only where content actually demands transformation. - Media query vs container query guidance: Use media queries for page-level and environmental changes, and container queries for reusable components that must adapt to their allocated width. - Structured verification checklist: Validate reflow at 320 CSS px, 400% zoom, long localized text, intermediate widths, and keyboard/reading order consistency. - Use Case: When a card component breaks inside a narrow sidebar despite working full-width, apply container queries so the component adapts to its own available space instead of the viewport. ## Quick Start Ask the AI to review a page or component for responsive behavior and implement fluid layout fixes with content-driven breakpoints and container queries where needed.
