Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Full size
Run 1Screenshot region spotlight“Spotlight the parts of app-screenshot.png in turn while I talk about the shared board in talk.mp4.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 22+Chromeffmpeg
Licence
Recaply licence

Screenshot Region Spotlight

A screenshot fills the frame and each part they name lights up while the rest dims.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Adds a screenshot to a talking-head video and spotlights its regions in turn: each part they name lights up with a label while the rest of the picture dims. Timed to the words they say, on their own footage, with their sound kept; 16:9, 9:16, 1:1 or 4:5. Renders locally with Chrome and ffmpeg: no video model, no key and no cost. Use when someone walks through a screen, a dashboard or a page and wants each area they talk about spotlighted.

By RecaplyUpdated 11 Nov

Install Screenshot Region Spotlight

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/screen-region-overlay/install.md and follow it to install the screen-region-overlay skill from screen-region-overlay.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Screenshot Region Spotlight is for

What you get

  • Your video with the overlay timed to the words, sound kept
  • Their screenshot takes the frame in a browser window
  • 16:9, 9:16, 1:1 or 4:5

Good fit

  • When someone walks through a screen, a dashboard or a page and wants each area they talk about spotlighted

Not for

  • Footage with nobody speaking
  • Cutting or re-editing the video itself

About this skill

You say

Spotlight the parts of app-screenshot.png in turn while I talk about the shared board in talk.mp4.

It said back

I rendered the video to talk-graphics.mp4 in the work folder. It's 1920×1080 and 24.3 s, with your sound unchanged. I checked a still of the final frame and it has no layout warnings, but I didn't play the rendered video.

The screenshot doesn't match the talk. app-screenshot.png is a weekly dinner planner, and your talk is about status meetings. You only mention the shared board for a few seconds, and you never name parts of a screen. So the labels come from the screenshot's own text, not from your words. You may want a screenshot of the actual board.

Show more

What it did in run 1

  1. screen-region-overlay
  2. ls -la && node .claude/skills/screen-region-overlay/scripts/check.mjs
  3. echo '{"video":"talk.mp4","transcript":"talk.json","beats":[]}' > overlay.json && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --words
  4. ./app-screenshot.png
  5. cat > overlay.json <<'E' { "video": "talk.mp4", "transcript": "talk.json", "look": "paper", "beats": [ { "beat": "shot", "cue": "one shared board", "image": "app-screenshot.png", "regions": [ { "text": "This week", "x": 5, "y": 8, "w": 90, "h": 4.4 }, { "text": "Dinner plan", "x": 5, "y": 14, "w": 90, "h": 52 }, { "text": "Shared with Sam", "x": 5, "y": 67.5, "w": 90, "h": 9.6 } ], "cues": ["one shared board", "and a", "15-minute call"], "until": "only when something is stuck" } ] } E S=.claude/skills/screen-region-overlay/scripts/overlay.mjs node $S overlay.json --face; node $S overlay.json --check
  6. ./overlay.json
  7. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --face
  8. ./face-check.png
  9. ./overlay.json
  10. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  11. ./overlay-check.png
  12. mkdir -p ../work1-assets 2>/dev/null; ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1850:0:0" screenshot-trimmed.png && python3 -c " H=1850 for n,y,h in [('tabs',192,94),('cards',328,1216),('shop',1580,222)]: print(n,round(y/H*100,1),round(h/H*100,1))"
  13. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1850:0:0" screenshot-trimmed.png && ls screenshot-trimmed.png
  14. sed -i '' -e 's#"app-screenshot.png"#"screenshot-trimmed.png"#' -e 's#"y": 8, "w": 90, "h": 4.4#"y": 10.2, "w": 90, "h": 5.4#' -e 's#"y": 14, "w": 90, "h": 52#"y": 17.6, "w": 90, "h": 66#' -e 's#"y": 67.5, "w": 90, "h": 9.6#"y": 85.2, "w": 90, "h": 12.4#' overlay.json && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  15. ./overlay.json
  16. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  17. ./overlay-check.png
  18. cp overlay.json overlay.bak && node -e ' const fs=require("fs");const j=JSON.parse(fs.readFileSync("overlay.json"));j.beats[0].frame="phone";j.beats[0].image="app-screenshot.png"; const R=j.beats[0].regions;R[0].y=8;R[0].h=4.4;R[1].y=13.8;R[1].h=52.4;R[2].y=67.1;R[2].h=9.8; fs.writeFileSync("overlay.json",JSON.stringify(j,null,2))' && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  19. ./overlay-check.png
  20. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1850:0:0,pad=1330:1850:80:0:color=0xf9f8f3" screenshot-fit.png && ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1:1:5:5,format=rgb24" -f rawvideo - | xxd -p
  21. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1850:0:0,pad=1330:1850:80:0:color=0xf9f8f3" screenshot-fit.png && ls screenshot-fit.png
  22. ./overlay.json
  23. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  24. ./overlay-check.png
  25. ./overlay.json
  26. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  27. ./overlay-check.png
  28. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1840:0:0,pad=1212:1840:21:0:color=0xf9f8f3" screenshot-fit.png && ls screenshot-fit.png
  29. ./overlay.json
  30. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  31. ./overlay-check.png
  32. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1840:0:0,pad=1258:1840:44:0:color=0xf9f8f3" screenshot-fit.png && sed -i.bak 's/"x": 6.7/"x": 8.3/; s/"w": 86.6/"w": 83.5/' overlay.json && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  33. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1840:0:0,pad=1258:1840:44:0:color=0xf9f8f3" screenshot-fit.png && ls screenshot-fit.png
  34. ./overlay.json
  35. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  36. ./overlay-check.png
  37. node -e ' const fs=require("fs");const j=JSON.parse(fs.readFileSync("overlay.json"));const b=j.beats[0];b.frame="none";b.image="screenshot-trimmed.png"; b.regions=[{text:"This week",x:5,y:10.2,w:90,h:5.4},{text:"Dinner plan",x:5,y:17.6,w:90,h:66},{text:"Shared with Sam",x:5,y:85.2,w:90,h:12.4}]; fs.writeFileSync("overlay.json",JSON.stringify(j,null,2))' && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  38. ./overlay-check.png
  39. ffmpeg -loglevel error -y -i app-screenshot.png -vf "crop=1170:1816:0:0" screenshot-trimmed.png && node -e ' const fs=require("fs");const j=JSON.parse(fs.readFileSync("overlay.json"));const b=j.beats[0];const H=1816,p=v=>+(v*100).toFixed(1); b.regions=[{text:"This week",x:5,y:p(186/H),w:90,h:p(106/H)},{text:"Dinner plan",x:5,y:p(322/H),w:90,h:p(1228/H)},{text:"Shared with Sam",x:5,y:p(1574/H),w:90,h:p(234/H)}]; fs.writeFileSync("overlay.json",JSON.stringify(j,null,2));console.log(JSON.stringify(b.regions))' && node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json --check
  40. ./overlay-check.png
  41. node .claude/skills/screen-region-overlay/scripts/overlay.mjs overlay.json 2>&1 | tail -8; ls -la *.mp4
  42. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 4 min 3 s · $0.62 of API use

Questions

Is Screenshot Region Spotlight free?

No. Screenshot Region Spotlight costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Screenshot Region Spotlight?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Screenshot Region Spotlight?

A ZIP of the whole skill folder (105 KB): the SKILL.md your agent follows and its 12 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Screenshot Region Spotlight?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./screen-region-overlay with your agent's flag.

What do I get from Screenshot Region Spotlight?

Your video with the overlay timed to the words, sound kept. Their screenshot takes the frame in a browser window. 16:9, 9:16, 1:1 or 4:5.

What does Screenshot Region Spotlight need?

Node 22+, Chrome and ffmpeg, and no API key. Each use costs nothing beyond your agent.

How big is Screenshot Region Spotlight?

13 files, about 80,016 tokens in all. The SKILL.md is about 2,354 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 4 min 3 s to 4 min 3 s and $0.62 to $0.62 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Screenshot Region Spotlight to use it?

Type /screen-region-overlay first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.