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

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

Скилл выводит демонстрационный ответ Prismantis, чтобы проверить отображение элементов после визуальных изменений и перед скриншотом релиза.

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

Что делает demo

Скилл просит вывести содержимое docs/demo.md целиком и без другого текста в конце хода. Так можно глазами проверить таблицы, диаграммы, блоки кода, ссылки, кнопки копирования, подсветку и отображение справа налево. Короткая проверка.

После изменений нужно заново показать демо и исправить то, что выглядит неверно. Новый элемент интерфейса добавляют и в docs/demo.md, и в чек-лист. В Claude Code ответ должен завершать ход: текст перед вызовом инструмента может быть сокращён.

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

  • проверить отображение после изменения интерфейса
  • сверить цвета и выравнивание таблиц и диаграмм
  • проверить ссылки и кнопки копирования в терминале
  • проверить текст справа налево и смешанные направления письма
  • подготовить визуальную проверку перед скриншотом релиза

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

  • Покажи визуальное демо Prismantis.
  • Проверь все элементы отображения после моего изменения.
  • Выведи демо перед скриншотом релиза.

Как установить demo

1Через Skills CLI (Vercel)

npx skills add NahumLitvin/prismantis --skill demo -a claude-code

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

~/.claude/skills/demo/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в 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

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

Все скиллы по теме «Тесты и QA» →
improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок

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

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

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