live-check — скилл для Claude Code: рендер ответов без скриншотов
Загружает рабочую копию плагина в живую сессию Claude и показывает, как реально отрисовываются ответы. Пригодится после правок вёрстки терминала.
npx skills add NahumLitvin/prismantis --skill live-check -a claude-codeЧто делает live-check
Скилл поднимает рабочую копию prismantis прямо в сессии Claude и печатает образец ответа со всем, что затронула правка: таблицу с числами и выровненной колонкой, блок bash с флагами и строкой в кавычках, путь, ссылку, заголовок и блок mermaid. Дальше он это рендерит.
Скриншоты окон агентам недоступны, поэтому скилл идёт другим путём: запускает сессию в скрытом терминале, записывает каждый отрисованный байт и проигрывает запись в xterm.js внутри headless Chrome. Работает при заблокированном экране и в параллель. Для этого нужны capture.py и render.mjs из .claude/skills/live-check/, а также пакет @xterm/xterm, который ставится в отдельную папку. render.mjs сам находит Chrome или Chromium, либо читает переменную CHROME. На Windows придётся просить человека сделать снимок через Win+Shift+S. xterm.js не рисует kitty-изображения и рабочий стол, так что эти вещи остаются непроверенными.
Проверять стоит выравнивание колонок, длину линий, цвета по токенам темы, перенос на узкой ширине и то, что ничего не ушло в стандартный рендерер движка. Тусклая строка с именем prismantis в транскрипте означает, что хук отклонили — это чинится первым делом. Для иврита скилл каждый раз рендерит /prismantis demo-rtl и читает каждую строку справа налево по rtlShowcaseText из hooks/help.ts: предложения, пункты списка, ячейки таблицы, цитаты и подписи диаграмм.
Какие задачи решает
- посмотреть, как ответ рисуется в терминале, без скриншота
- проверить выравнивание колонок и перенос на узкой ширине
- поймать откат к стандартному рендереру движка
- отрендерить иврит справа налево и сверить порядок букв
- убедиться, что в рендере нет приватных имён и хостов
Примеры запросов агенту
- Загрузи рабочую копию и отрендери образец ответа с таблицей и блоком
bash - Сделай live-check после правки цветов темы
- Отрендери
/prismantis demo-rtlи проверь каждую строку иврита
Как установить live-check
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill live-check -a claude-code2Вручную: положить файлы
~/.claude/skills/live-check/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/live-check/
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill live-check -a codex2Вручную: положить файлы
.agents/skills/live-check/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill live-check -a cursor2Вручную: положить файлы
.cursor/skills/live-check/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install NahumLitvin/prismantis live-check2Вручную: положить файлы
.github/skills/live-check/SKILL.md1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill live-check -a gemini-cli2Командой платформы
gemini skills install https://github.com/NahumLitvin/prismantis --path .claude/skills/live-checkВручную: положить файлы
.devin/skills/live-check/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill live-check -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о live-check
Как установить live-check в Claude Code?
Выполните npx skills add NahumLitvin/prismantis --skill live-check -a claude-code. Файл скилла появится по пути ~/.claude/skills/live-check/SKILL.md.
Что делает live-check?
Загружает рабочую копию prismantis в живую сессию Claude, печатает образец ответа и рендерит его через запись байтов в xterm.js. Так видно, как ответ выглядит на самом деле, без скриншота.
Почему скилл не делает скриншот окна?
Захват окон агентам заблокирован и тащит в кадр всё, что открыто рядом. Вместо этого сессия идёт в скрытом терминале, а её вывод проигрывается в headless Chrome.
Исходный текст
SKILL.md · MIT
--- name: live-check description: Load the working copy of prismantis into a real Claude Code session and render how replies draw, with no screenshot. Use after any visual change, when asked to "screenshot", "see it", "try it live", or before claiming a rendering fix works. --- # Live check Tests prove the tree. Only a real render proves the look. 1. **Load the working copy:** - From a new terminal: `claude --plugin-dir <repo path>`. Saving files hot-reloads it. - From inside a session that loaded the `plugin-authoring` skill: copy `.claude-plugin/plugin.json`, `hooks/` and `types/` into that session's dev-mods folder. The person answers the one-time "Enable hot reloading" prompt, and the mod loads when the turn ends. Copy again after every edit. 2. **Print a sample reply** containing everything the change touches: a table with numbers and an aligned column, a `bash` block with flags and a quoted string, a path, a link, a heading and a `mermaid` block. 3. **Render it, never screenshot.** Window captures are blocked for agents and grab whatever else is open. Instead run the session in a hidden terminal, record every byte it draws, and replay that into xterm.js in headless Chrome. This works with the screen locked and in parallel: ``` npm i -s --prefix <scratch> @xterm/xterm timeout 70 python3 .claude/skills/live-check/capture.py <scratch>/demo.bin <repo> 110 80 '[[45,""]]' claude --plugin-dir <repo> "/prismantis demo" node .claude/skills/live-check/render.mjs <scratch>/demo.bin <scratch>/demo.png 110 80 <scratch>/node_modules/@xterm/xterm ``` Then read the PNG. `capture.py` takes the output file, working directory, columns, rows and a JSON list of `[seconds to wait, keys to type]` steps, then the command. Raise the rows to see more of a long reply. `render.mjs` finds Chrome or Chromium itself, or reads `CHROME`. On Windows, ask the person for a Win+Shift+S capture. xterm.js draws no kitty images and no desktop surface, so say those are unchecked. 4. **Check** column alignment, rule lengths, colors against the theme tokens, wrapping at narrow widths, and that nothing falls back to the engine renderer. A dim line naming `prismantis` in the transcript means a hook was refused; fix that first. **Hebrew, every time:** also render `/prismantis demo-rtl` and read every Hebrew line right to left against `rtlShowcaseText` in hooks/help.ts: sentences, list items, table cells, quotes and every diagram label. Word order and letter order both count. If something looks off, read the bytes in the `.bin` before blaming the render: on a terminal without bidi they must be in display order (`םולש`, not `שלום`). 5. **Before publishing a render**, check it, including the status line under the prompt, shows no private repo names, hostnames, internal versions or other work data. Use a neutral sample for README images.
© NahumLitvin · MIT · NahumLitvin/prismantis