the-loop
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.
- Installs
- 519
- Last 24h
- +17
- Trending rank
- #6623
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oxbshw/watch-skill --skill the-loop- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads the-loop automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
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.
--scriptreplays the same clicks/fills every iteration, so the comparison is honest.- Only call
iterateafter you actually changed something. It diffs against the previous iteration: fixed / unchanged / new.
Generated video (Manim, Remotion, ffmpeg, AI-gen)
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
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)
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
watch-skill capture "<target>" [--duration 10]
Capture alone never critiques; it just records, analyzes, and indexes.
Use loop start when there are pass criteria.
FAQ
What does the the-loop skill do?
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.
How do I install the-loop?
Run npx skills add https://github.com/oxbshw/watch-skill --skill the-loop in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/the-loop/ (personal) or .claude/skills/the-loop/ (project).
Which AI agents can use the-loop?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is the-loop safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains the-loop?
It is published by oxbshw in oxbshw/watch-skill. It has 519 recorded installs.
More from oxbshw/watch-skill
watch
oxbshw/watch-skill
Watch any video (URL, stream, or local path) via Watch Skill. Downloads, extracts scene-aware deduped frames, OCRs them, transcribes (captions first, then local Whisper — offline by default), indexes everything, and hands the result to the agent. Follow-up questions are answered from the persistent index without re-processing.
watching-videos
oxbshw/watch-skill
The user shared a video URL, a YouTube/TikTok/stream link, a local video file, a screen recording, a meeting recording, or a playlist/folder of videos — "watch this", "summarize this video", "what's in this recording". Use this to actually watch the video — download, extract frames, OCR, transcribe, and index it — instead of guessing from the title or asking the user to describe it.
video-memory
oxbshw/watch-skill
The user asks about videos watched in the past or across sessions — "have we watched anything about X", "which video showed that error", "what did that meeting decide", "search my videos", or a question that spans several videos. Use this to search and answer from the persistent cross-video index instead of saying you don't remember.
asking-with-evidence
oxbshw/watch-skill
The user asks a question about a video that was already watched or indexed — "what did they say about X", "what error code appears", "what happens at 2:30", "does the video show Y". Use this to answer from the persistent index with timestamped evidence and a confidence score instead of re-watching or guessing.
extracting-structure
oxbshw/watch-skill
The user wants structure pulled out of a watched video — "make chapters for this video", "where does the bug appear in this recording", "turn this screen recording into a bug report", "how strong is my intro/hook". Use this for deterministic extraction from the index — chapters with timestamps, a fileable bug report with the exact frame, or a scored hook analysis.
recovering-from-errors
oxbshw/watch-skill
A Watch Skill command failed, video download broke, ffmpeg or yt-dlp is missing, a provider returned an error, local vision stopped, or the user asks "why can't it watch this" or "repair my setup". Use this to diagnose and apply the engine's structured fix before retrying the original operation.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.