# Responsive Preview

Preview any page at mobile, tablet, and desktop widths — screenshots and a pass/warn/fail layout report in this chat, plus a link to the live side-by-side viewer.

## Usage

```
/responsive-preview [path]
```

Examples:
- `/responsive-preview` — previews the root (`localhost:8787`)
- `/responsive-preview tools/secure-photo-blur` — previews a specific page

## Setup

1. Copy this file into your project's `.cursor/commands/` folder.
2. Start your local dev server (the command assumes `http://localhost:8787` by default — adjust the base URL below if yours differs).
3. Type `/responsive-preview` in any Cursor chat.

The live side-by-side viewer (iframe-based, synced scrolling when same-origin) is at:
**https://tinydesignshop.com/tools/responsive-preview**

---

## Instructions

When the user invokes this command:

### 1. Resolve the URL

- If a path argument was provided, strip any leading `/` and append it to `http://localhost:8787/`.
- If no argument, use `http://localhost:8787/`.
- Store this as `TARGET_URL`.

### 2. Check the dev server

Call `preview_start` with `TARGET_URL`. If it fails or returns unreachable:

> "The local dev server isn't running. Run `npm run dev:html-presenter` from `site/`, then try again."

Stop here — do not proceed to screenshots.

### 3. Mobile — 390 × 844

Call `preview_resize` with width=390, height=844.
Call `preview_screenshot`.
Label the result: **Mobile · 390px**

### 4. Tablet — 820 × 1024

Call `preview_resize` with width=820, height=1024.
Call `preview_screenshot`.
Label the result: **Tablet · 820px**

### 5. Desktop — 1280 × 900

Call `preview_resize` with width=1280, height=900.
Call `preview_screenshot`.
Label the result: **Desktop · 1280px**

### 6. Inspect at each size (optional but recommended)

After each screenshot, call `preview_inspect` to catch overflow or hidden content that screenshots might miss.

### 7. Report findings

Write a structured report with a **pass / warn / fail** status per viewport. Check:

| Check | What to look for |
|---|---|
| Overflow | Horizontal scroll, content clipped outside the viewport |
| Nav collapse | Does navigation fold cleanly at 390px and 820px? |
| Text legibility | Text below ~13px or clipped at 390px |
| Image sizing | Images overflowing or pixelated at small sizes |
| Fixed elements | Sticky headers/footers obscuring content on mobile |

End with a one-line verdict:
- ✅ "Looks good across all three sizes."
- ⚠️ "Issues found at [Mobile / Tablet / Desktop] — see above."

### 8. Link to the live viewer

Tell the user:

> "Open the side-by-side live viewer (synced scrolling when same-origin, real iframes):
> `http://localhost:8787/tools/responsive-preview/?url=TARGET_URL`"

For external URLs or when sharing outside local dev, also link:

> `https://tinydesignshop.com/tools/responsive-preview/?url=TARGET_URL`"

### 9. Offer next steps

Ask: "Want me to fix any of these issues? Or preview a different page?"

If the user pastes a 'Fix in Cursor' context block (copied from the viewer's Fix button), read the viewport width and page URL from it, then use Cursor Design Mode annotations they provide to identify and fix the CSS.