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

visualize — скилл для Claude Code: граф OKF-бандла в HTML

Собирает интерактивный HTML-граф из OKF-бандла: концепты как узлы, ссылки как рёбра, панель с отрендеренным markdown. Пригодится, когда нужно окинуть взглядом структуру базы знаний.

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

Что делает visualize

Скилл читает каталог OKF-бандла и генерирует один самодостаточный файл viz.html. Узлы — концепты, цвет задаётся типом, размер зависит от длины тела. Рёбра — markdown-ссылки и записи sources, ведущие на другие концепты внутри бандла. Бэкенда нет, содержимое бандла со страницы никуда не уходит.

В панели деталей видно type, description, tags, status, generated, verified, stale_after и sources с сигналами достоверности, а также обратные ссылки «Links to» и «Cited by». Два бейджа выводятся расчётом, а не читаются из файла: уровень доверия по §5.3 и устаревание. Это подсказки, а не запрет — при отчёте по бандлу просто называйте уровень концепта. Старый timestamp из v0.1 читается как generated.at, поэтому легаси-бандлы рендерятся целиком.

Запуск идёт через uv run со скриптом scripts/okf_visualize.py; если uv нет, ставится pyyaml и скрипт вызывается через python3. Каталог бандла обязателен — без пути явно передайте .okf. Просмотрщику нужен сетевой доступ: cytoscape, marked и dompurify тянутся с cdn.jsdelivr.net. Выше 1 000 концептов раскладка сама переключается на concentric, потому что силовая замораживает страницу; выше 5 000 скилл предупреждает о медленной загрузке и советует рендерить подкаталог.

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

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

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

  • визуализируй бандл .okf
  • сделай граф из docs/knowledge и сохрани в report/viz.html
  • открой граф бандла с раскладкой circle

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

1Через Skills CLI (Vercel)

npx skills add scaccogatto/okf-skills --skill visualize -a claude-code

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

~/.claude/skills/visualize/SKILL.md

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

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

Вопросы о visualize

Как установить visualize в Claude?

Выполните npx skills add scaccogatto/okf-skills --skill visualize -a claude-code. Скилл встанет в ~/.claude/skills/visualize/SKILL.md.

Что делает visualize?

Рендерит OKF-бандл в один самодостаточный HTML-файл viz.html с интерактивным графом, панелью деталей, фильтром по типам и поиском.

Что нужно для работы скилла?

Каталог бандла в аргументе и сетевой доступ у просмотрщика — cytoscape, marked и dompurify загружаются с cdn.jsdelivr.net. Если uv недоступен, понадобится pyyaml.

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

SKILL.md · MIT
---
name: visualize
description: >-
  Render an Open Knowledge Format (OKF) bundle as a single self-contained,
  interactive HTML graph (viz.html) — concepts as nodes coloured by type and
  sized by body length, markdown links and bundle-internal `sources` as edges,
  a wiki-style detail panel with rendered markdown, v0.2 trust/lifecycle/provenance
  metadata, and "Links to" / "Cited by" backlinks, layout switching, per-type
  filter and search.
  Use when asked to visualize, graph, preview, or explore an OKF bundle.
user-invocable: true
argument-hint: "<bundle-dir> [-o viz.html]"
allowed-tools: Bash
---

# Visualize an OKF bundle

Generate a self-contained HTML graph of the target bundle. The bundle directory
is required, so pass `.okf` explicitly when no path is given. No backend, no
install, no bundle content leaves the page. The viewer does need network
access: cytoscape, marked and dompurify load from cdn.jsdelivr.net.

```bash
uv run "${CLAUDE_SKILL_DIR}/scripts/okf_visualize.py" $ARGUMENTS
```

If `uv` is unavailable:

```bash
python3 -m pip install --quiet pyyaml && \
python3 "${CLAUDE_SKILL_DIR}/scripts/okf_visualize.py" $ARGUMENTS
```

The detail panel shows each concept's `type`, `description`, `tags`, `status`,
`generated`, `verified`, `stale_after`, `sources` (with their credibility
signals, a `usage_count` alongside the `usage_window` that frames it), and
rendered body; a `sources` entry pointing at another concept in the bundle also
becomes a graph edge. A v0.1 `timestamp` is read as `generated.at`, so legacy
bundles still render fully.

Two badges are **derived**, not read: the §5.3 trust tier
(*unverified* / *machine-confirmed* / *human-reviewed*, keyed off the `human:`
prefix in `verified[].by`) and staleness (`now >= stale_after`). They are
advisory signals — when reporting on a bundle, say which tier a concept is in
rather than treating any of them as a gate.

| Flag | Effect |
|------|--------|
| `-o <path>` | Output file (default `<bundle>/viz.html`). |
| `-t, --title` | Graph title (default `parent/bundle` dir name). |
| `-l, --link` | Source URL shown in the header. |
| `--layout` | `cose`, `concentric`, `breadthfirst`, `circle`, `grid`. |
| `--max-nodes N` | Exit 1 above N concepts (useful in CI). |
| `--og-image URL` | Absolute URL for the social preview image. |

Above 1,000 concepts the default switches to `concentric` (force freezes the
page; `--layout cose` overrides, and the in-page picker asks first). Above
5,000 it warns that the page loads slowly and reads as a hairball, and
suggests rendering a subdirectory.

Open it in any browser; `${CLAUDE_SKILL_DIR}` resolves whether this runs as part
of the `okf` plugin or as a standalone skills.sh skill. The page is
deep-linkable: `?select=<concept-id>` or `#<concept-id>` opens that concept,
`?layout=<name>` presets the layout.

© scaccogatto · MIT · scaccogatto/okf-skills

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

Всё по теме «Тексты и документация» →
arquiteto-de-empresa leoal Скилл проводит основателя по 12 фазам интервью и складывает компанию в набор связанных markdown-файлов, которые читают и люди, и ИИ-агенты. 51установок memory-notes basicmachines-co Задаёт правила разметки заметок для графа знаний Basic Memory. Скилл учит агента оформлять метаданные, категории фактов и связи через вики-ссылки. CX Codex +1 1 300установок understand-anything Egonex-AI Плагин сканирует проект и строит интерактивный граф файлов, классов и зависимостей с веб-дашбордом. Пригодится при знакомстве с чужим или крупным кодом. ★ 88 314звёзд репо markdown-to-html официальный github Скилл объясняет агенту, как Markdown превращается в HTML: заголовки, таблицы, блоки кода, формулы. Пригодится, когда сайт или документация собираются из md-файлов. 9 899установок answer-me-with-html QingYunA Скилл превращает ответ агента в одностраничный визуальный HTML-объяснитель: сначала создаётся Markdown-черновик, затем CLI собирает страницу. Нужен для схем, сравнений и разборов. CX Codex +1 5 400установок md2wechat geekjourneyx Преобразует Markdown в HTML публикаций WeChat и создаёт обложки, инфографику, картиночные посты. Пригодится тем, кто ведёт официальный аккаунт WeChat или публикует на Zhihu, CSDN, Toutiao. CX Codex +1 2 500установок

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

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

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