What problem does it solve? Teams often receive desktop-only designs with no defined behavior for narrow screens, leaving engineers to guess how layouts, navigation, and controls should adapt. This Skill turns vague "make it responsive" requests into an implementation-ready responsive behavior plan before any CSS is written. ## Core Features & Use Cases - Layout mode definition: Names behavioral modes (e.g., single-column, compact-toolbar, wide-dashboard) with clear triggers based on viewport, container, orientation, or content thresholds. - Content and control prioritization: Ranks content and actions, then maps reflow, collapse, and progressive-disclosure rules so critical tasks stay reachable at every size. - Interaction and state coverage: Replaces hover-only and precision-pointer assumptions with touch and keyboard alternatives, and covers loading, empty, error, zoom, and localization stress cases. - Use Case: A designer hands off a desktop dashboard with filters, a data table, and a sidebar. Use this Skill to produce a mode-by-mode plan covering navigation collapse, table reflow strategy, and QA checklist before engineering starts. ## Quick Start Plan the responsive behavior for this dashboard page, defining layout modes, content priority, and control adaptations for mobile, tablet, and desktop.
