Every tutorial I write needs the same boring assets: screenshots of each step, a short screen recording, and a vertical clip for reels. I used to do all of it by hand — Print Screen, paste, crop, repeat. So I built an AI skill that does it for me. It's called tutorial-reels, and it lives in my AI agents (Cline, Claude Code, Codex) as five small Python scripts.
This post explains what the skill does and walks through using it, end to end.
What the skill does
The skill drives my real Windows PC — Chrome, Settings, Services, Device Manager — and produces three kinds of output:
| Output | Tool | Result |
|---|
| Step screenshots | focus-shot.py / shot.py | PNGs, one per tutorial step |
| Web captures | browse.py | Full-page PNGs or PDFs via headless Chrome |
| Reel clips | record.py + to-reel.py | Vertical 1080x1920 MP4s for Facebook |
No new dependencies. Everything runs on tools already on a Windows PC: Python with Pillow, ffmpeg, and Chrome. The skill is just a SKILL.md instruction file plus the scripts, synced to every agent I use.
The hard lesson: focus before you shoot
The first version had an embarrassing bug. When I asked the agent to screenshot my Sound settings, it captured... our chat window. The agent's own window was in front, so every "screenshot" was a picture of the conversation.
The fix became the skill's core idea: minimize everything, force the target window to the front with the Win32 API, wait, then capture. That workflow is now baked into focus-shot.py:
# minimize clutter, open the target, focus + shoot:
powershell -NoProfile -Command "(New-Object -ComObject Shell.Application).MinimizeAll()"
Start-Process ms-settings:sound; Start-Sleep 5
python $env:USERPROFILE\tutorial-reels\scripts\focus-shot.py --out shots/no-sound/step01.png --title Settings --wait 2
The --title flag matches window titles — Settings, Services, Device Manager, Chrome, File Explorer — and brings the right window forward before the shot. One capture per turn: open, focus, shoot, verify, move on.
Tutorial: from zero to published screenshots
Here is the full workflow I used to illustrate my Windows 11 no-sound article with 5 screenshots.
Step 1: Take a focused screenshot
Open the page you want to show, then capture it with the window forced to front:
python $env:USERPROFILE\tutorial-reels\scripts\focus-shot.py --out shots/no-sound/fix1.png --title Settings --wait 2
For a region instead of the full screen, add --region x,y,w,h. If the target is already visibly in front, the plain shot.py is faster (no focus handling).
Step 2: Capture a web page without opening it
For article hero images or full-page captures, browse.py drives headless Chrome — no manual browsing at all:
python $env:USERPROFILE\tutorial-reels\scripts\browse.py --url "https://example.com/page" --shot shots/no-sound/hero.png --window-size 1280,800
It also prints pages to PDF with --pdf, handy for archiving reference pages.
Step 3: Record a short clip for a reel
Screen recordings use ffmpeg's gdigrab — already installed, captures video only. Important: ffmpeg holds the console, so always launch it detached:
Start-Process python -ArgumentList "$env:USERPROFILE\tutorial-reels\scripts\record.py","--out","raw/no-sound-raw.mp4","--seconds","30","--fps","30" -WindowStyle Hidden
Perform the tutorial steps while it records. It stops automatically after --seconds.
Step 4: Convert to a vertical reel
One command center-crops and scales the recording to 1080x1920 with H.264, ready for Facebook:
Start-Process python -ArgumentList "$env:USERPROFILE\tutorial-reels\scripts\to-reel.py","--in","raw/no-sound-raw.mp4","--out","no-sound.mp4" -WindowStyle Hidden
The output drops straight into my existing reel pipeline — the same folder and scheduler that posts my article reels.
Step 5: Embed in the article
Name screenshots after the article slug so everything stays in sync, then embed one image per fix:
Two more things it taught me
Desktop launchers matter. I keep capture.bat and capture.ps1 on my Desktop — capture.ps1 shot, capture.ps1 browse <url>, capture.ps1 record 30 — so I can grab assets without opening a chat at all.
Verify before you push. I can't stress this enough after the chat-screenshot incident: glance at every capture before committing. File sizes are a cheap signal — when my "Settings" shots jumped from 55KB to 100KB+, I knew the real window was finally in frame.
Frequently Asked Questions
Does it work on Mac or Linux?
Not as-is. Screenshots use Pillow's ImageGrab and recording uses ffmpeg's gdigrab — both Windows-only paths. The ideas transfer, but the scripts would need screencapture/x11grab equivalents.
Does recording capture audio?
No. gdigrab grabs video only. Add voiceover in editing, or pair it with a microphone recorder.
Can it click around the browser by itself?
No — and that's deliberate. The skill captures what you do (or what headless Chrome renders). Scripted clicking is a different tool (Playwright); this skill stays small and dependable.
