demo — скилл для Claude Code: визуальная проверка и установка
Скилл выводит демонстрационный ответ Prismantis, чтобы проверить отображение элементов после визуальных изменений и перед скриншотом релиза.
npx skills add NahumLitvin/prismantis --skill demo -a claude-codeЧто делает demo
Скилл просит вывести содержимое docs/demo.md целиком и без другого текста в конце хода. Так можно глазами проверить таблицы, диаграммы, блоки кода, ссылки, кнопки копирования, подсветку и отображение справа налево. Короткая проверка.
После изменений нужно заново показать демо и исправить то, что выглядит неверно. Новый элемент интерфейса добавляют и в docs/demo.md, и в чек-лист. В Claude Code ответ должен завершать ход: текст перед вызовом инструмента может быть сокращён.
Какие задачи решает
- проверить отображение после изменения интерфейса
- сверить цвета и выравнивание таблиц и диаграмм
- проверить ссылки и кнопки копирования в терминале
- проверить текст справа налево и смешанные направления письма
- подготовить визуальную проверку перед скриншотом релиза
Примеры запросов агенту
- Покажи визуальное демо Prismantis.
- Проверь все элементы отображения после моего изменения.
- Выведи демо перед скриншотом релиза.
Как установить demo
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill demo -a claude-code2Вручную: положить файлы
~/.claude/skills/demo/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/demo/
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill demo -a codex2Вручную: положить файлы
.agents/skills/demo/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill demo -a cursor2Вручную: положить файлы
.cursor/skills/demo/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install NahumLitvin/prismantis demo2Вручную: положить файлы
.github/skills/demo/SKILL.md1Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill demo -a gemini-cli2Командой платформы
gemini skills install https://github.com/NahumLitvin/prismantis --path .claude/skills/demoВручную: положить файлы
.devin/skills/demo/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add NahumLitvin/prismantis --skill demo -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о demo
Как установить demo в Claude Code?
Выполните npx skills add NahumLitvin/prismantis --skill demo -a claude-code. Файл скилла появится по пути ~/.claude/skills/demo/SKILL.md.
Что делает скилл demo?
Он выводит docs/demo.md как единственный текст в конце хода, чтобы проверить визуальное отображение Prismantis.
Что проверяет демо?
Чек-лист охватывает таблицы, диаграммы, блоки кода, цвета, ссылки и кнопки копирования. Также он проверяет отображение текста справа налево.
Исходный текст
SKILL.md · MIT
--- name: demo description: Print the prismantis demo reply to eyeball every rendering feature after a change. Use after any visual change, when asked for "the demo", "show all features", "visual test", or before a release screenshot. --- # Demo The visual test. Unit tests prove the tree; this proves the look. 1. **Load the working copy** in this session (see `live-check` step 1). The new version shows only after the turn that made the edit ends. 2. **Print `docs/demo.md` verbatim as the whole final message of a turn**, with nothing before it and no tool call after it. Claude Code condenses text written right before a tool call, so the demo must close the turn. 3. **The person looks at it**, or screenshots it on the next turn (`live-check` step 3). Check: - `prismantis` in a heavy box on the first line, and `Roster` with a heavy rule under it - the table: yellow header, rules between rows, the right-aligned `Size` column, colored numbers - the four diagrams and the table on one row on a wide terminal, wrapping on a narrow one - every flowchart box and sequence participant in its own color, with matching colors at both ends of the sequence - a value above each bar, the tallest bar highlighted and the rest muted, labels without quotes, dim gridlines, colored axis numbers - shell colors: command, flags, the quoted string, `&&` - code blocks with a language header and no frame, and Prism colors in the TypeScript block - path, link and inline-code colors, the paths opening their files on click in a terminal that draws hyperlinks while `/kick` stays unlinked text, the quote bar running down its paragraph and both list rows, and the green `Tip` alert box - accent `⧉ md`, `⧉ art` and `⧉ html` buttons on the table (`⧉ html` in a local macOS or Linux terminal only), and an accent `[ ⧉ copy ]` button on every diagram, the list, the shell block, the alert and the quote - the timeline figure: drawn line by line with no `── figure` header, the caption in the comment color, the `▏───▏` axis and the Provider bar in the diagram color, `✗` and `2 twice` in the theme's reddest accent color, the Handler bar and `1` in its greenest, the time labels in its most amber, those three different from each other and from the diagram color, the bars ending on the axis ticks, `⧉ source` and `⧉ art` above it - the Hebrew section: lines read right to left (the first bullet shows `eu-west` and `us-east` after the Hebrew, mirrored parentheses), bullets and `1.` on the right, the quote bar on the right, the table cells right aligned, and the shell comment reversed while `ls -la` stays 4. **Fix what looks wrong**, then run the demo again. 5. **Keep it current.** A new feature adds a line to `docs/demo.md` and to the checklist above. All data stays invented and neutral.
© NahumLitvin · MIT · NahumLitvin/prismantis