К основному содержанию
скилл CX Codex

the-loop — скилл для Claude Code: проверка визуального результата

Записывает, как ведёт себя интерфейс, анимация или игра, сверяет запись с вашими критериями и повторяет прогон, пока не пройдёт.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add oxbshw/watch-skill --skill the-loop -a claude-code
Открыть на GitHub

Что делает the-loop

Скриншот ловит один кадр, а поток — нет. the-loop запускает работающую цель, снимает её на видео и судит по критериям, которые вы формулируете обычными фразами: «оплата проходит, ошибка не всплывает, в сумме никогда не NaN». Отрицательные условия и образцы вроде «настоящая цена (например, $29.00)» тоже понимаются и проверяются. Правки в код вносите вы — скилл только наблюдает.

Для интерфейса и веб-страниц есть watch-skill loop start "<url | screen: | window:<title> | file>" "<pass criteria>", затем после изменения кода watch-skill loop iterate <loop_id>. Флаг --script повторяет одни и те же клики и заполнения на каждой итерации, поэтому сравнение честное. Вызывать iterate стоит только после реальной правки: он показывает, что исправлено, что не изменилось и что появилось нового. Для генерации видео работает watch-skill loop video-gen, для игр — watch-skill loop game, а watch-skill loop monitor следит за условием ограниченное число проверок и всегда завершается.

Скиллу разрешены только Bash и Read, так что до запуска убедитесь, что команда watch-skill доступна в окружении. Запись без оценки делает watch-skill capture — он не критикует, а только снимает и индексирует.

Какие задачи решает

  • проверить, что после правки интерфейс действительно перестал ломаться
  • поймать чёрные кадры и исчезающие спрайты в игре
  • убедиться, что счётчик очков не выдаёт NaN
  • сравнить поведение анимации до и после изменения
  • дождаться условия в папке или на экране и не зависнуть в ожидании

Примеры запросов агенту

  • запиши, как открывается корзина, и проверь, что итог никогда не NaN
  • прогони игру и скажи, мигает ли экран чёрным
  • сравни рендер видео до и после правки сцены

Как установить the-loop

1Через Skills CLI (Vercel)

npx skills add oxbshw/watch-skill --skill the-loop -a claude-code

2Вручную: положить файлы

~/.claude/skills/the-loop/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/the-loop/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о the-loop

Как установить the-loop в Claude?

Выполните npx skills add oxbshw/watch-skill --skill the-loop -a claude-code. Скилл окажется в ~/.claude/skills/the-loop/SKILL.md.

Что делает the-loop?

Записывает работающий интерфейс, анимацию, игру или сгенерированное видео и сверяет запись с критериями, заданными обычными фразами. На успешном прогоне отдаёт before/after в MP4 и GIF.

Чем the-loop отличается от обычного скриншота?

Скриншот показывает момент, а не поток. the-loop смотрит запись целиком и потому ловит то, что кадр пропускает: NaN в счёте, чёрные кадры, исчезающие спрайты.

Исходный текст

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

Похожие скиллы

Всё по теме «Тесты и QA» →
next-dev-loop vercel Скилл проверяет, что правка в Next.js реально работает в запущенном приложении, а не только компилируется. Нужен при разработке через next dev. CX Codex +1 22 200установок design-loop jezweb Скилл ведёт цикл: читает задачу из файла-эстафеты, генерирует страницу в HTML/Tailwind, встраивает её в сайт и пишет следующую задачу. CX Codex +1 1 000установок om-auto-create-pr-loop open-mercato Создаёт PR по развёрнутому описанию задачи, ведёт план и фиксирует прогресс по шагам. Нужен для длинных изменений, которые важно продолжать без потери контекста. CX Codex +1 3 700установок build-loop-claude-code BuilderOS Гоняет каждую задачу по кругу: собрать, проверить ревью, протестировать вживую, починить. Пока в плане остаются незакрытые пункты, цикл не останавливается. CX Codex +1 1 700установок build-loop-cursor BuilderOS Скилл ведёт фичу по циклу: собрать, прогнать /review, протестировать end to end, починить найденное. Полезен, когда работа идёт по плану с чекбоксами. CX Codex +1 1 500установок loop-library Forward-Future Алиас совместимости для Loopy, который находит повторяющиеся задачи в коде, подбирает готовые циклы с точками выхода или проектирует новые через интервью. CX Codex +1 2 400установок

Из того же набора10

watching-videos Скилл анализирует локальные видеофайлы и ролики по ссылкам через OCR кадров и транскрипцию речи. Помогает агенту отвечать по реальному содержанию видео с таймкодами. CX Codex +1 525установок video-memory Постоянный индекс всех видео, которые агент разбирал на этой машине: кадры, OCR, транскрипты и прошлые ответы. Пригодится, когда нужно вспомнить, что было в записи. CX Codex +1 510установок asking-with-evidence Отвечает на вопросы по ранее просмотренным видео из локального индекса с таймкодами и оценкой уверенности. Позволяет проверить детали без повторного запуска анализа. CX Codex +1 506установок extracting-structure Достаёт структуру из уже просмотренного видео: главы с таймкодами, баг-репорт с точным кадром, оценку вступления. CX Codex +1 505установок recovering-from-errors Скилл разбирает сбои Watch Skill: читает код ошибки, запускает watch-skill doctor и повторяет упавшую команду один раз. CX Codex +1 498установок learning-from-mistakes Записывает правки пользователя как уроки, чтобы следующие ответы по похожим вопросам были точнее. Показывает, что уже сохранено. CX Codex +1 496установок configuring-vision Настраивает провайдеров зрения для Watch Skill: подключает OpenAI, Anthropic, Gemini, OpenRouter или локальную Ollama без привязки к одной модели. CX Codex +1 496установок sharing-results Собирает разбор видео в один offline HTML-файл: кадры, транскрипт и ответы на вопросы со ссылками на таймкоды. CX Codex +1 495установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой