# Agent Skill: Responsive & Mobile Design

## Purpose
This skill guides AI agents in creating responsive layouts that work seamlessly across desktop, tablet, and mobile devices while maintaining the Vicinity Labs premium aesthetic.

## Breakpoints

| Breakpoint | Width | Usage |
|------------|-------|-------|
| `sm` | 640px | Large phones, small tablets |
| `md` | 768px | Tablets, small laptops |
| `lg` | 1024px | Laptops, small desktops |
| `xl` | 1280px | Standard desktops |
| `2xl` | 1536px | Large desktops |

## Responsive Patterns

### Grid Layouts
```astro
<!-- 4 columns on desktop, 2 on tablet, 1 on mobile -->
<div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

<!-- 3 columns on desktop, 1 on mobile -->
<div class="grid gap-8 grid-cols-1 lg:grid-cols-3">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

<!-- Auto-fit with min width -->
<div class="grid gap-6" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
  <Card>...</Card>
  <Card>...</Card>
</div>
```

### Flex Direction
```astro
<!-- Horizontal on desktop, vertical on mobile -->
<div class="flex flex-col md:flex-row gap-6">
  <div class="flex-1">...</div>
  <div class="w-full md:w-80">...</div>
</div>

<!-- Stack on mobile, side-by-side on tablet+ -->
<div class="flex flex-col sm:flex-row gap-4">
  <button class="w-full sm:w-auto">...</button>
  <button class="w-full sm:w-auto">...</button>
</div>
```

### Spacing Adjustments
```astro
<!-- Smaller padding on mobile -->
<section class="py-12 md:py-16 px-4 md:px-8">
  ...
</section>

<!-- Responsive gaps -->
<div class="flex flex-col gap-4 md:gap-6 lg:gap-8">
  ...
</div>
```

### Typography Scale
```astro
<!-- Responsive headings -->
<h1 class="font-[family-name:var(--font-primary)] text-3xl md:text-4xl lg:text-5xl text-fg-primary">
  Title
</h1>

<p class="text-sm md:text-base text-fg-secondary">
  Body text that scales up slightly on larger screens
</p>
```

## Mobile-First Considerations

### Touch Targets
- Minimum tap target: 44x44px
- Buttons should be at least 48px height
- Spacing between touch targets: minimum 8px

### Navigation
```astro
<!-- Desktop: Horizontal nav -->
<nav class="hidden md:flex items-center gap-6">
  <a href="/" class="font-mono text-sm text-fg-secondary hover:text-gold-text">Link</a>
</nav>

<!-- Mobile: Hamburger menu (implementation needed) -->
<button class="md:hidden p-2" aria-label="Open menu">
  <svg class="w-6 h-6 text-fg-primary">...</svg>
</button>
```

### Content Prioritization
```astro
<!-- Reorder sections on mobile -->
<div class="flex flex-col lg:flex-row gap-8">
  <!-- Primary content always first -->
  <main class="order-1 lg:order-1 flex-1">
    ...
  </main>
  
  <!-- Sidebar/secondary content -->
  <aside class="order-2 lg:order-2 w-full lg:w-72">
    ...
  </aside>
</div>
```

### Cards on Mobile
```astro
<!-- Full width cards on mobile with reduced padding -->
<Card class="p-4 md:p-6">
  <h3 class="font-[family-name:var(--font-primary)] text-lg md:text-xl text-fg-primary">
    Title
  </h3>
  <p class="text-sm md:text-base text-fg-secondary">
    Content
  </p>
</Card>
```

## Charts & Data Visualization

### Responsive Charts
```astro
<!-- Charts that scale with container -->
<div class="w-full overflow-x-auto">
  <LineChart
    width={typeof window !== 'undefined' && window.innerWidth < 768 ? 320 : 640}
    height={typeof window !== 'undefined' && window.innerWidth < 768 ? 200 : 340}
    ...
  />
</div>

<!-- Or use percentage-based approach -->
<div class="w-full" style="aspect-ratio: 16/9;">
  <LineChart
    width="100%"
    height="100%"
    ...
  />
</div>
```

### Data Cards Grid
```astro
<!-- 4 columns on desktop, 2 on tablet, 2 on mobile (with scrolling if needed) -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 overflow-x-auto">
  <DataCard ... />
  <DataCard ... />
  <DataCard ... />
  <DataCard ... />
</div>
```

## Slides & Presentations

### Slide Scaling
Slides are designed at 1920x1080 but should be viewable on all screens:

```astro
<SlideDeck class="w-full max-w-none">
  <Slide variant="content" ...>
    <!-- Content uses responsive classes -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      ...
    </div>
  </Slide>
</SlideDeck>
```

### Mobile Slide View
On mobile devices, slides should:
- Stack vertically instead of maintaining slide aspect ratio
- Reduce font sizes appropriately
- Convert multi-column layouts to single column
- Maintain visual hierarchy with adjusted spacing

## Common Responsive Patterns

### Sidebar Navigation (Responsive)
```astro
<div class="flex flex-col lg:flex-row gap-12 mx-auto max-w-7xl px-4 md:px-8 py-8 md:py-16">
  <!-- Sidebar: Full width on mobile, fixed on desktop -->
  <aside class="w-full lg:w-64 shrink-0">
    <nav class="flex lg:flex-col gap-4 overflow-x-auto lg:overflow-visible">
      <a href="#section1" class="whitespace-nowrap font-mono text-sm text-gold-text">Section 1</a>
      <a href="#section2" class="whitespace-nowrap font-mono text-sm text-fg-secondary hover:text-gold-text">Section 2</a>
    </nav>
  </aside>
  
  <!-- Main content -->
  <main class="flex-1 min-w-0">
    ...
  </main>
</div>
```

### Hero Section
```astro
<section class="py-16 md:py-24 lg:py-32 px-4 md:px-8">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="font-[family-name:var(--font-primary)] text-3xl md:text-5xl lg:text-6xl text-fg-primary">
      Headline
    </h1>
    <p class="mt-4 md:mt-6 text-base md:text-xl text-fg-secondary max-w-2xl mx-auto">
      Subheadline text
    </p>
  </div>
</section>
```

## Testing Checklist

### Visual Testing
- [ ] Layout works at 375px (iPhone SE)
- [ ] Layout works at 768px (iPad)
- [ ] Layout works at 1440px (Desktop)
- [ ] No horizontal scrolling on mobile (except intentional carousels)
- [ ] Touch targets are adequate size

### Content Testing
- [ ] Text remains readable at all sizes
- [ ] Important content is visible without scrolling (above fold)
- [ ] Navigation is accessible on all devices
- [ ] Images and charts scale appropriately

## How to Make It Real

When implementing responsive designs:

1. **Start mobile-first**: Write base styles for mobile, then add `md:`, `lg:` prefixes
2. **Test with real content**: Use actual content lengths, not lorem ipsum
3. **Use relative units**: Prefer `%`, `rem`, `em` over pixels where possible
4. **Consider containers**: Use `max-w-*` and `mx-auto` for readable line lengths
5. **Plan for touch**: Ensure adequate spacing between interactive elements
6. **Test on actual devices**: Emulator testing is helpful but not sufficient

## Resources
- Tailwind responsive docs: https://tailwindcss.com/docs/responsive-design
- Existing responsive patterns: See `pages/responsive.md`
- Component library: `/components` page for reference implementations