visualize — скилл для Claude Code: граф OKF-бандла в HTML
Собирает интерактивный HTML-граф из OKF-бандла: концепты как узлы, ссылки как рёбра, панель с отрендеренным markdown. Пригодится, когда нужно окинуть взглядом структуру базы знаний.
npx skills add scaccogatto/okf-skills --skill visualize -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/visualize/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/visualize/
1Через Skills CLI (Vercel)
npx skills add scaccogatto/okf-skills --skill visualize -a codex2Вручную: положить файлы
.agents/skills/visualize/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add scaccogatto/okf-skills --skill visualize -a cursor2Вручную: положить файлы
.cursor/skills/visualize/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install scaccogatto/okf-skills visualize2Вручную: положить файлы
.github/skills/visualize/SKILL.md1Через Skills CLI (Vercel)
npx skills add scaccogatto/okf-skills --skill visualize -a gemini-cli2Командой платформы
gemini skills install https://github.com/scaccogatto/okf-skills --path skills/visualizeВручную: положить файлы
.devin/skills/visualize/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add scaccogatto/okf-skills --skill visualize -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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