| name | mobile-design |
| description | Mobile-first responsive UI specs — breakpoints, navigation, spacing, touch targets. |
Mobile Design — Always Include
Every UI task must produce mobile specifications. Designs without mobile coverage are incomplete. Apply these rules regardless of whether the user mentions mobile.
Layout & Breakpoints
| Breakpoint | Width | Layout |
|---|
| Mobile S | 320px | Single column, full-width blocks |
| Mobile L | 375px–428px | Single column, standard mobile |
| Tablet | 768px | 2-column or adaptive single |
| Desktop | 1280px+ | Full multi-column |
Default breakpoints (adapt to project's system): sm: 640px · md: 768px · lg: 1024px · xl: 1280px
Mobile-first rule: design the 375px layout first, then expand. Never design desktop-first and shrink.
Navigation — Mobile vs Desktop
| Pattern | Mobile | Desktop |
|---|
| Primary nav | Bottom tab bar (≤ 5 items) or hamburger drawer | Top horizontal nav or sidebar |
| Secondary nav | Drawer, bottom sheet, or accordion | Sidebar or breadcrumb |
| Search | Full-screen overlay | Inline search bar |
| Modals | Bottom sheet (full or partial) | Centered modal |
Content Layout Rules by Breakpoint
- Cards: full-width at mobile; 2-up at tablet; 3–4-up at desktop
- Tables: horizontal scroll or card-list transformation at mobile — never squeeze columns
- Forms: single-column at mobile; max 2-column at tablet/desktop for related fields
- Sidebars: collapse to drawer or hide at mobile; show at ≥ 768px
Typography — Mobile Adjustments
| Element | Desktop | Mobile |
|---|
| H1 | 36–48px | 24–30px |
| H2 | 24–30px | 20–24px |
| Body | 16px | 16px (never below 14px) |
| Caption | 14px | 13–14px |
| Line height | 1.5 | 1.5–1.6 |
Spacing — Mobile Adjustments
- Page horizontal padding: 16px mobile · 24px tablet · 32px+ desktop
- Section vertical spacing: 40–48px mobile · 64–80px desktop
- Component internal padding: reduce by 25–33% vs desktop
- Gap between stacked elements: 12–16px mobile · 16–24px desktop
Touch & Interaction Rules
- Minimum touch target: 44×44px (Apple HIG) / 48×48dp (Material)
- Tap feedback: every interactive element must have an active/pressed state
- Hover-only interactions: must have a touch-accessible alternative
- Input zoom prevention:
font-size ≥ 16px on all form inputs (prevents iOS auto-zoom)
- Keyboard avoidance: sticky footers and fixed CTAs must account for soft keyboard height
- Swipe gestures: document which gestures are available; never the only way to access a feature
Component Responsive Behavior Summary
| Component | Mobile behavior |
|---|
| Button group | Stack vertically; full-width primary button |
| Data table | Horizontal scroll or transform to card list |
| Tabs | Horizontal scroll if > 4; consider bottom nav |
| Dropdown/Select | Native OS picker preferred |
| Toast/Snackbar | Bottom of screen, above nav bar |
| Pagination | Infinite scroll or "Load more" preferred |
Mobile-First Coding Convention
Instruct the frontend-developer to write mobile-first CSS:
.card { padding: 16px; flex-direction: column; }
@media (min-width: 768px) {
.card { padding: 24px; flex-direction: row; }
}
Never write desktop-first and override with max-width queries.
