a techwatch field note

I made a little explainer video
for our team. With AI agents.
In an afternoon.

Here's the whole thing: the real session, the bits where I struggled, the clock running the entire time. Then: how you do it too. Same tools. Your idea.

~1h46 start → shareable video built as a secondary task just HTML · exports to MP4/WebM

scroll ↓ (it gets better at the part where the dragonfly looks terrible)

the ask

“Can we explain what techwatch does, in a 20-second, TikTok-style clip?”

We're a new, horizontal team. Hard to explain in a paragraph, easy to show. I didn't have a motion-design team, a week, or a budget. It was a side-quest between other work. So I did what we preach: I pointed an AI coding agent at it and built the thing in the browser.

↓ here's what fell out the other end

the result

This is running live, right now. It's one HTML file.

  • 9:16 portrait, ~23s, GSAP animation, designed to read muted.
  • No video editor. No After Effects. The animation is the source.
  • One command renders it frame-accurately to a shareable MP4 / WebM.
⬇ the exported .mp4 (the part you'd post)

and here's the surprising part: how it got made ↓

the actual session

Watch it get built. Including the parts where it didn't work.

This is the real transcript, replayed. The clock is the real elapsed time. My handwritten notes are in the margins. Hit play.

Claude Code · techwatch ep1 · the dragonfly
0:00:00
elapsed in session
the full grill

Every question it asked. Every option. My picks.

The interview above, pulled out of the terminal so you can actually read it. This is the whole decision tree the /grill-with-docs skill walked me down before a line got built. Each one shows what I picked, or, when none of the options fit, what I typed back instead. Expand any to see the alternatives it offered.

the method (it's a loop)

Four moves. Repeat until it's good.

1

Grill

A skill interviews you until the idea is sharp, before a line is built.

2

Build

The agent writes one self-contained HTML animation. No build step.

3

Verify

It drives a real browser: seek the timeline, screenshot each beat, fix what's ugly.

4

Export

One command renders it frame-accurate to MP4/WebM. Post it.

your turn: setup

Two installs. Then you have everything I had.

The one unlock: Claude Code is built into Claude Desktop. That's the local agent that can write files, drive a browser, and render video. Open it, then add:

① the grill-with-docs skill

An open-standard skill folder, the same one works in Claude Code/Desktop and GitHub Copilot. It's by Matt Pocock (mattpocock/skills).

  1. Grab the grill-with-docs.skill I bundled ↓, or get it from Matt's repo above.
  2. In Claude Desktop, go to Customize → Skills and upload the bundled .skill:
  3. Start a chat and type /grill-with-docs.
Customize › Skills + Upload skill
⬆ Drop a .skill here, or click Upload skill
🗂 grill-with-docs.skill ✓ added
that's it: no terminal, no files to hunt down

② the chrome-devtools MCP

This is the “Verify” move: it lets the agent open your animation in a real browser and screenshot it.

  1. In Claude Desktop, the Claude for Chrome extension is exactly this: it gives the agent a real browser to drive and screenshot.
  2. On other clients, add the chrome-devtools MCP server. Install options for every client →

heads-up: the Copilot web chat can't run the build: it needs a local agent (Claude Code / Copilot in VS Code).

your turn: go

Steal my exact opening line.

No blank page. Paste this into a fresh /grill-with-docs session, swap in your team, and let it interview you:

/grill-with-docs I want to make a ~20-second, TikTok-style explainer animation about [MY TEAM / THING]. Single self-contained HTML using GSAP, 9:16 portrait, designed to read muted, exportable to MP4/WebM. Audience: internal colleagues. Grill me on the story spine, the visual metaphor, and the concrete content one question at a time, and recommend an answer for each.
↻ rewatch the build want a hand on your first one? grab me →