saranskumar Goal
Plan intentional responsive behavior instead of relying on accidental CSS collapse.
When to Use
- Screens must work across viewport sizes.
- A dashboard or form feels desktop-only.
- Mobile information hierarchy is unclear.
Instructions
- Define the primary tasks on mobile, tablet, and desktop.
- Decide what content stays, collapses, stacks, or moves.
- Define layout shifts at the relevant breakpoints.
- Note touch targets, navigation changes, and scrolling risks.
- Call out components that need alternate interaction patterns on smaller screens.
Constraints
- Do not assume desktop layout can simply shrink.
- Preserve the primary user task on small screens.
- Keep responsive behavior understandable to implementers.
Output Format
- Breakpoint strategy
- Content priority by viewport
- Layout rules
- Interaction adjustments
- Risks and test notes
Examples
- "Plan responsive behavior for this analytics dashboard."
- "How should this editor work on mobile?"