app-ui-capture-to-remotion

SKILL.md

---
name: app-ui-capture-to-remotion
description: >
  Capture real product UIs (Vercel, Claude / Claude Code, Supabase, Stripe, GitHub,
  the Implexa dashboard, etc.) with Chrome MCP, then rebuild them as clean, on-brand,
  animated Remotion components for the @ImplexaAI reels — so a reel shows the ACTUAL
  stack instead of generic talking-head + text. Use when a reel beat references a
  product screen, when someone says "show the real app / dashboard / deploy screen",
  "capture the UI", "screenshot Vercel/Supabase/Stripe and put it in the reel",
  "our reels look generic — make them visual", or when producing the visual schedule
  for a Day-N reel. This is the visual layer that makes a reel informative AND visual.
---

# App UI capture → on-brand Remotion rebuild

Turn the real screens of the user's own stack into reel visuals. The reel reference we
are matching is "informative but visual" — it teaches a concept while showing the actual
product surface in motion (a deploy flipping to **Ready**, a live URL appearing, a Stripe
checkout completing). Raw screenshots look generic and off-brand; a faithful **rebuild**
looks crisp, animates, and matches the Implexa look. This skill is the bridge.

**Pipeline:** `CAPTURE (Chrome MCP) → EXTRACT (read the capture into a spec) → REBUILD (Remotion component) → WIRE (into the Day-N comp)`.

## When to use

- A reel beat in `REEL_BRIEF.md`'s visual schedule references a product surface ("Vercel deploy goes green", "the Supabase table", "Stripe checkout", "Claude Code shell").
- You're replacing a generic caption/mock with the real thing.
- Default for the @ImplexaAI dev series. Skip only for pure-emotion beats (avatar + text is fine there).

## Conventions this skill MUST match (read first)

- Remotion **4.0.290**, React 19, TypeScript. Per-reel project lives in `Implexa/reels/day-N/`.
- Brand tokens: `Implexa/reels/day-N/src/brand.ts` (`COLORS`, `TYPE`, `EASE`). Use these for any Implexa chrome / framing. Use the **captured app's own real hexes** for the app surface itself.
- Faithful-rebuild reference components already in the repo — study these before writing a new one:
  `src/components/ClaudeCodeShell.tsx`, `StripeCheckoutPreview.tsx`, `SupabaseFileTreeArtifact.tsx`,
  `GoogleSignInButtonPreview.tsx`, `RentedStackDiagram.tsx`. New rebuilds follow their structure (consts for colors, sub-components for chrome, 1920×1080 internal layout).
- Overlay/inset wrapper reference: `src/components/ScreenshotInsetOverlay.tsx` and `OverlayNativeStep.tsx` (spring scale-in → hold → fade, `startSec`/`endSec`, top/bottom placement).
- **Determinism (non-negotiable):** all motion via `useCurrentFrame()` + `interpolate`/`spring`. NEVER `Date.now()`, `Math.random()`, `setTimeout`, or live data fetches inside a component. See the project's `remotion-best-practices` skill.

---

## Phase 1 — CAPTURE (Chrome MCP)

### 1.0 Browser selection (mandatory, every session)
Before ANY browser action, call `list_connected_browsers`, then ask the user (AskUserQuestion)
which connected browser to drive — list every browser by display name + deviceId, plus the
"open a confirmation screen in every extension" option. Call `select_browser` with their pick.
Never pick one yourself. Create a fresh tab group with `tabs_context_mcp({createIfEmpty:true})` /
`tabs_create_mcp` for this session.

### 1.1 Build the shot list from the brief
Read `REEL_BRIEF.md`'s visual schedule. For each beat that references a product surface, write a
shot: `{ slug, app, url, what_it_shows, hero_element, target_state }`. `hero_element` = the ONE
thing the viewer's eye should land on (the green "Ready" badge, the live `*.vercel.app` URL, the
"Payment successful" check). `target_state` = the satisfying moment to capture (e.g. deploy AFTER
it flips to Ready, not mid-build).

### 1.2 Capture each shot
Per shot: `tabs_create_mcp` → `navigate(url)` → wait for load (poll `get_page_text` / a snapshot
until the hero element is present) → set a clean viewport with `resize_window` (a 16:10 or 16:9
crop reads best when rebuilt) → `screenshot`. Save raw PNGs to
`Implexa/reels/day-N/captures/<slug>.png` and append a row to `captures/manifest.json`
(`{slug, app, url, captured_at, what_it_shows, redactions}`). Capture the highest resolution available.

### 1.3 Safety & privacy (HARD RULES — the skill captures the user's real, logged-in apps)
- **Use only the already-authenticated session the user selected. NEVER enter credentials, NEVER log in, NEVER create accounts.** (Entering passwords/credentials is prohibited regardless of context.)
- **Never keep a frame that exposes secrets or PII:** API keys, tokens, `.env` values, full account/customer emails, billing/card numbers, real customer names/records, private analytics. Prefer demo / sandbox / seeded / empty states. If the only available screen has sensitive data, capture it but mark it in the manifest — the **rebuild launders it** (you retype clean placeholder strings, so the shipped component carries no real data).
- **Read-only navigation.** Do not click destructive/irreversible controls (delete, deploy-to-prod, send, pay, change settings) while hunting for a shot. You're sightseeing, not operating.
- The `captures/` dir holds raw pixels that may contain residual sensitive data → keep it **gitignored**. Rebuilt `.tsx` components (clean retyped strings) are safe to commit.
- This step is **local/operator only** — Chrome MCP drives the user's machine; it cannot run in a headless scheduled context (same as the HeyGen step). If Chrome MCP is not connected, STOP and tell the user to connect the Claude for Chrome extension; do not fall back to fabricated screens.

---

## Phase 2 — EXTRACT (capture → spec)

`Read` each capture PNG and produce a `rebuild_spec` for it:
- **chrome:** what frames the surface — browser address bar (with the real URL), macOS window dots, an app top-bar/sidebar. (Reuse the macOS chrome from `ClaudeCodeShell.tsx`.)
- **palette:** the surface's real hexes (bg, panel, border, text, accent, status colors). Sample them from the image, don't guess.
- **content:** the exact, SAFE text strings to show (headings, button labels, the URL, status text). Replace anything sensitive with a believable placeholder here.
- **layout:** regions + their rough proportions (sidebar width, header height, card grid).
- **hero_element + target_state:** carried from the shot — drives the animation focus.

## Phase 3 — REBUILD (Remotion component)

Write `src/components/<Surface>Card.tsx` (e.g. `VercelDeployCard.tsx`) as a faithful, animated
reproduction. Follow the `ClaudeCodeShell.tsx` structure:
- 1920×1080 internal layout; colors as named consts from the spec; sub-components for chrome/sidebar/body.
- **Animation grammar (this is what makes it "visual"):**
  1. **Establish** — spring scale-in of the whole surface (`damping 14, stiffness 130`, like `ScreenshotInsetOverlay`).
  2. **Focus** — after the surface lands, draw the eye to `hero_element`: a soft highlight ring, a cursor move, or a subtle zoom/pan toward it.
  3. **State-change** — play the satisfying beat: status flips `Building… → Ready ✅` (color lerps grey→emerald), the live URL types/fades in, a number ticks, a check stamps. Use `interpolate` over the beat's seconds.
- All timing in **seconds** via a `startSec`/`endSec` prop; convert with `Math.round(sec*fps)`. Wrap with the same enter/exit opacity+scale envelope as `ScreenshotInsetOverlay`.
- Pull Implexa framing/accents from `brand.ts`; keep the app's own surface colors authentic.

### Decision — rebuild vs inset
- **Rebuild (default)** for hero product surfaces and anything with sensitive data (rebuild launders it) or that needs to animate.
- **Inset** (`ScreenshotInsetOverlay`) only as a fallback for a one-off surface too bespoke to rebuild in budget — and only after a redaction pass + brand frame. Note the choice in the manifest.

### Wire into the comp
In `src/Day{N}.tsx`, import the new component and place it on the timeline at the beat's
`startSec`/`endSec` from the (re-pinned, whisper-accurate) visual schedule, replacing the generic
`ChestLabel`/caption that stood in for that beat. Keep overlays on the chest shelf / clear of the
face per the series framing. Then `npm run render` and verify (frames + the post-render checks in `CRITIQUE.md`).

---

## Output contract
1. `captures/` PNGs + `captures/manifest.json` (provenance + redactions).
2. One `<Surface>Card.tsx` per featured surface, animated + on-brand + determinism-safe.
3. Edits to `src/Day{N}.tsx` wiring each card onto the timeline.
4. A one-line note per surface: rebuilt vs inset, and any data that was laundered.

## References
- `references/capture-playbook.md` — per-app Chrome MCP recipes (Vercel, Claude/Claude Code, Supabase, Stripe, GitHub, Implexa dashboard): where the good shots are, the hero element, what to avoid.
- `references/rebuild-patterns.md` — the component skeleton, the 3-beat animation grammar, and a worked `VercelDeployCard` example.
- Repo: `Implexa/reels/day-5/src/components/ClaudeCodeShell.tsx` (gold-standard faithful rebuild), `ScreenshotInsetOverlay.tsx` (overlay envelope), `brand.ts` (tokens). Project `remotion-best-practices` skill for determinism.