| name | mobile-first-responsive-design |
| description | Use when: designing or updating pages with mobile-first layout, responsive behavior, and touch-friendly interactions. |
Mobile-First Responsive Design
Goal
Ensure core workflows are strong on small screens first.
Do
- Start layout decisions at small viewport widths and scale up.
- Prioritize content hierarchy and compact navigation patterns.
- Use responsive tables/cards for data-heavy screens.
- Keep tap targets and spacing comfortable for touch devices.
Checks
- Critical actions remain visible on mobile without horizontal scrolling.
- Typography and controls are legible at small sizes.
- No interaction depends only on hover behavior.