the-loop — Claude Code skill: verify UI, animations and games
Records how your UI, animation or game actually behaves, judges the recording against plain-language criteria, and iterates until it passes.
npx skills add oxbshw/watch-skill --skill the-loop -a claude-codeWhat the-loop does
A screenshot shows a moment; it cannot show a flow. the-loop runs the live target, records it, and checks the recording against criteria you write as ordinary sentences: "the checkout completes, no error toast ever appears, the total is never NaN". Negative claims and exemplars like "a real price (like $29.00)" are understood and enforced. You apply the fixes; the skill only observes.
For a UI or web page, start with watch-skill loop start "<url | screen: | window:<title> | file>" "<pass criteria>", then run watch-skill loop iterate <loop_id> after you change the code. The --script flag replays the same clicks and fills each iteration, so the comparison stays honest. Call iterate only after a real change: it diffs against the previous run and marks what is fixed, unchanged or new. Generated video goes through watch-skill loop video-gen, games through watch-skill loop game, and watch-skill loop monitor watches a condition for a bounded number of checks, so it always terminates.
The skill is allowed Bash and Read only, so make sure the watch-skill command is available in your environment before you start. If you just want footage without a verdict, watch-skill capture records and indexes without critiquing.
What it helps with
- confirm a UI fix actually worked instead of trusting the diff
- catch black flicker frames and sprites that vanish mid-motion
- check that a score counter never goes NaN
- compare an animation before and after a change
- wait for a condition in a folder or on screen without hanging
Example prompts for the agent
- record the cart opening and check the total is never NaN
- run the game and tell me if the screen flickers black
- compare the video render before and after the scene change
How to install the-loop
1Skills CLI (Vercel)
npx skills add oxbshw/watch-skill --skill the-loop -a claude-code2Manually: put the files in place
~/.claude/skills/the-loop/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/the-loop/
1Skills CLI (Vercel)
npx skills add oxbshw/watch-skill --skill the-loop -a codex2Manually: put the files in place
.agents/skills/the-loop/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add oxbshw/watch-skill --skill the-loop -a cursor2Manually: put the files in place
.cursor/skills/the-loop/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install oxbshw/watch-skill the-loop2Manually: put the files in place
.github/skills/the-loop/SKILL.md1Skills CLI (Vercel)
npx skills add oxbshw/watch-skill --skill the-loop -a gemini-cli2Platform CLI
gemini skills install https://github.com/oxbshw/watch-skill --path skills/the-loopManually: put the files in place
.devin/skills/the-loop/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add oxbshw/watch-skill --skill the-loop -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about the-loop
How do I install the-loop in Claude?
Run npx skills add oxbshw/watch-skill --skill the-loop -a claude-code. The skill lands in ~/.claude/skills/the-loop/SKILL.md.
What does the-loop do?
It records a running UI, animation, game or generated video and judges the recording against pass criteria written in plain language. On a pass it renders before/after proof as MP4 and GIF.
How is the-loop different from a screenshot?
A screenshot captures a moment, not a flow. the-loop watches the whole recording, so it catches what a still frame misses: NaN scores, black frames, vanishing sprites.
Source text
SKILL.md · MIT
---
name: the-loop
version: "1.4.3"
description: The user built or changed something visual — a UI, an animation, a game, a generated video — and wants it verified, or asks "why does my UI look wrong", "check that the fix actually worked", "does the animation glitch". Use this to record the running thing, critique the recording against plain-language pass criteria, and iterate until it passes with before/after proof.
license: MIT
user-invocable: true
allowed-tools: Bash, Read
---
# THE LOOP
A screenshot shows a moment; it cannot show a flow. THE LOOP records the
actual running target, watches the recording, and judges it against pass
criteria you state in plain language. The loop only observes — YOU apply
the fixes, then iterate. On pass it renders a before/after MP4 + GIF as
proof.
## UI / web page / desktop window
```bash
watch-skill loop start "<url | screen: | window:<title> | file>" "<pass criteria>" [--script '<json steps>']
# ...apply the suggested fixes to the code...
watch-skill loop iterate <loop_id>
```
- Pass criteria are ordinary sentences: "the checkout completes, no
error toast ever appears, the total is never NaN". Negative claims
("never X") and exemplars ("a real price (like $29.00)") are both
understood and enforced deterministically.
- `--script` replays the same clicks/fills every iteration, so the
comparison is honest.
- Only call `iterate` after you actually changed something. It diffs
against the previous iteration: fixed / unchanged / new.
## Generated video (Manim, Remotion, ffmpeg, AI-gen)
```bash
watch-skill loop video-gen "<what the video must show>" "<render command>" --output <file>
```
Re-runs the generator each iteration and judges the fresh render against
the spec.
## Game / simulation
```bash
watch-skill loop game "<canvas-url | window:<title> | screen:>" "<pass criteria>" [--run "<launch cmd>"]
```
Catches the failures screenshots miss: a NaN score counter, black
flicker frames, sprites that vanish mid-motion.
## Watch for a condition (monitoring)
```bash
watch-skill loop monitor "<folder | url | screen: | window:<title>>" "<condition>" [--interval 10] [--max-checks 10]
```
Bounded — it always terminates. Events land in `events.jsonl` under the
loop directory as structured records.
## Record without judging
```bash
watch-skill capture "<target>" [--duration 10]
```
Capture alone never critiques; it just records, analyzes, and indexes.
Use `loop start` when there are pass criteria.
© oxbshw · MIT · oxbshw/watch-skill
