feat: Add screenshot-dev-app agent skill

.claude/skills/screenshot-dev-app/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: screenshot-dev-app
+description: Take a screenshot of the PostHog Code renderer via the Vite web preview (localhost:5173 with ?previewMode=true). Navigate with hash routes, capture with Playwright (screenshot-dev-preview.ts), and verify the PNG. Use when the user asks to screenshot, capture, or visually verify the dev app UI.
+---
+
+# Screenshot the PostHog Code dev app
+
+Capture via Playwright only — not cursor-ide-browser, Electron, or `screencapture`.
+
+**Needs:** Vite on localhost:5173 (`pnpm dev:code` / `pnpm dev:mprocs`). First Playwright use: `pnpm exec playwright install chromium`.
+
+## Capture
+
+```bash
+# one shot
+pnpm --filter code screenshot:preview -- --route /code/inbox/pulls -o out.png
+
+# batch (start once — first capture ~5s, later ones ~3s via hash navigation)
+pnpm --filter code screenshot:preview:serve   # background
+pnpm --filter code screenshot:preview -- --route /code/inbox/reports -o reports.png
+pnpm --filter code screenshot:preview -- --route /code/inbox/runs -o runs.png
+```
+
+Read the printed PNG path and verify content. Flags: `-o`, `--full-page`, `--wait-for <text>`, `--url` (full URL), `--help`.
+
+Preview URLs are `http://localhost:5173/?previewMode=true#<route>`. `--route` builds that automatically; `?previewMode=true` loads mocks from `apps/code/index.html`.
+
+## Routes
+
+| View | `--route` |
+| --- | --- |
+| Home | `/code` |
+| Responders | `/code/agents` |
+| Inbox pulls / reports / runs | `/code/inbox/pulls`, `/code/inbox/reports`, `/code/inbox/runs` |
+| Inbox detail | `/code/inbox/pulls/<id>`, `/code/inbox/reports/<id>`, `/code/inbox/runs/<id>` |
+| Settings | `/settings/<category>` |
+| Skills, MCP, archived, tasks | `/skills`, `/mcp-servers`, `/code/archived`, `/code/tasks/<id>` |
+
+Inbox mock ids: `r-1` … `r-8`. Settings categories include `signals`, `github`, `slack`, `general`, …
+
+## When fixtures aren't enough
+
+Edit the `?previewMode=true` block in `apps/code/index.html` (`mockReports`, tRPC `mocks`, `fetch` interceptor). Re-run capture after save. Preview data is mocked — layout checks only, not live GitHub/Slack.

apps/code/package.json

@@ -10,8 +10,8 @@
   },
   "scripts": {
     "setup": "bash bin/setup",
-    "dev": "electron-forge start",
-    "start": "electron-forge start",
+    "dev": "electron-forge start -- --remote-debugging-port=9222",
+    "start": "electron-forge start -- --remote-debugging-port=9222",
     "start:debug": "electron-forge start -- --inspect=5858 --remote-debugging-port=9222",
     "package": "electron-forge package",
     "package:dev": "FORCE_DEV_MODE=1 SKIP_NOTARIZE=1 electron-forge package",
@@ -27,6 +27,8 @@
     "test": "vitest run",
     "test:e2e": "playwright test --config=tests/e2e/playwright.config.ts",
     "test:e2e:headed": "playwright test --config=tests/e2e/playwright.config.ts --headed",
+    "screenshot:preview": "tsx scripts/screenshot-dev-preview.ts",
+    "screenshot:preview:serve": "tsx scripts/screenshot-dev-preview.ts --serve",
     "postinstall": "bash scripts/postinstall.sh",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",