skill files

Responsive

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Teach Claude to build layouts that work across every screen size. Drop this file into your project root so Claude uses mobile-first breakpoints, fluid layouts, proper touch targets, and responsive typography.

Filename: responsive.md

The Skill File

Copy this into a file called responsive.md in your project root, next to your CLAUDE.md.

terminal
# Responsive Design Conventions

Follow these responsive design practices for all UI work in this project. Build
mobile-first — start with the smallest screen and scale up.

## Breakpoints

Use these standard breakpoints. Always write mobile styles first, then add min-width
media queries for larger screens:

- `sm`: 640px — large phones, landscape
- `md`: 768px — tablets, portrait
- `lg`: 1024px — tablets landscape, small laptops
- `xl`: 1280px — desktops
- `2xl`: 1536px — large desktops

```css
/* Mobile first — no media query needed for base styles */
.container { padding: 16px; }

/* Scale up */
@media (min-width: 768px) { .container { padding: 24px; } }
@media (min-width: 1024px) { .container { padding: 32px; } }
```

## Fluid Layout

- Use relative units (`%`, `fr`, `vw`, `vh`, `rem`) over fixed pixels for layout
- Use `max-width` with auto margins for content containers instead of fixed widths
- Use CSS Grid with `auto-fit`/`auto-fill` and `minmax()` for responsive grids
without media queries
- Use Flexbox with `flex-wrap` for flowing content
- Avoid fixed heights — let content determine element height
- Use `min()`, `max()`, `clamp()` for fluid sizing: `width: min(100%, 1200px)`

## Touch Targets

- Minimum touch target size: 44×44px (Apple) / 48×48px (Material)
- Add padding to small interactive elements to expand the tap area without changing
visual size
- Space touch targets at least 8px apart to prevent accidental taps
- Make entire list rows/cards tappable, not just the text within them
- Increase button padding on mobile: at least 12px vertical, 16px horizontal

## Responsive Typography

- Use a fluid type scale with `clamp()`:
  - Body: `clamp(1rem, 0.95rem + 0.25vw, 1.125rem)` (16px → 18px)
  - H3: `clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)` (20px → 24px)
  - H2: `clamp(1.5rem, 1.2rem + 1vw, 2rem)` (24px → 32px)
  - H1: `clamp(2rem, 1.5rem + 1.5vw, 3rem)` (32px → 48px)
- Reduce heading sizes on mobile — a desktop h1 shouldn't dominate a phone screen
- Adjust line-height for screen size: tighter on mobile (1.4), more relaxed on
desktop (1.6)
- Cap line length at ~75 characters on desktop — don't let text run full-width on
wide screens

## Images & Media

- Use `max-width: 100%; height: auto` on all images
- Use `<picture>` with `srcset` to serve appropriately-sized images per screen
- Use `aspect-ratio` to prevent layout shift while images load
- Use `object-fit: cover` for images that need to fill a container without distortion
- Lazy load images below the fold with `loading="lazy"`

## Navigation Patterns

- Mobile: hamburger menu, bottom tab bar, or slide-out drawer
- Tablet: collapsible sidebar or compact horizontal nav
- Desktop: full sidebar, horizontal nav bar, or mega menu
- Don't hide critical navigation on any screen size — adapt it, don't remove it

## Common Patterns

- **Cards grid**: Use `auto-fit` with `minmax()` — cards reflow naturally without
breakpoints
- **Sidebar + content**: Stack on mobile, side-by-side on tablet+
- **Tables**: Horizontal scroll on mobile, or reformat as stacked cards
- **Forms**: Full-width inputs on mobile, multi-column on desktop
- **Hero sections**: Reduce vertical padding and image sizes on mobile
- **Modals**: Full-screen on mobile, centered overlay on desktop

Before & After

Without this skill file:

Prompt: "Build a product listing page with cards showing image, title, price, and an add-to-cart button"

Claude builds a fixed 3-column grid that overflows on mobile, tiny buttons that are hard to tap on a phone, text that's either too large or too small depending on the screen, and images that don't resize. The page looks fine at exactly one screen width.

With this skill file:

Prompt: "Build a product listing page with cards showing image, title, price, and an add-to-cart button"

Claude uses auto-fit with minmax(280px, 1fr) so cards reflow naturally from 1 to 4 columns, fluid typography with clamp(), images with aspect-ratio and object-fit: cover, 44px minimum touch targets on the add-to-cart button, and proper padding that scales with the viewport. The page works from a 320px phone to a 2560px monitor.

Exercises

  1. Save the skill file as responsive.md, reference it from CLAUDE.md, then ask Claude to build a product card grid and resize the browser from 320px to 2560px to confirm cards reflow without overflow.
  2. Inspect the typography Claude generates and verify headings use clamp() fluid scaling rather than fixed pixel sizes.
  3. On a phone or device emulator, check that every interactive element meets the 44×44px minimum touch target and that targets are spaced at least 8px apart.