visualize
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.
- Installs
- 867
- Last 24h
- +11
- Trending rank
- #8209
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/scaccogatto/okf-skills --skill visualize- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads visualize automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
uv run "${CLAUDE_SKILL_DIR}/scripts/okf_visualize.py" $ARGUMENTS
If uv is unavailable:
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.
FAQ
What does the visualize skill do?
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.
How do I install visualize?
Run npx skills add https://github.com/scaccogatto/okf-skills --skill visualize in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/visualize/ (personal) or .claude/skills/visualize/ (project).
Which AI agents can use visualize?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is visualize safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains visualize?
It is published by scaccogatto in scaccogatto/okf-skills. It has 867 recorded installs.
More from scaccogatto/okf-skills
okf
scaccogatto/okf-skills
Author, maintain, and consume Open Knowledge Format (OKF) knowledge bundles — portable markdown + YAML frontmatter that both humans and agents read. Use when capturing project knowledge (services, APIs, schemas, metrics, runbooks, decisions) into an OKF bundle, when updating one after code or docs change, or when a repository contains an .okf/ (or other OKF) bundle that should inform the task. Triggers on: "document this in OKF", "update the knowledge bundle", "capture this as a concept", or any work in a repo that has an OKF bundle.
validate
scaccogatto/okf-skills
Check that an Open Knowledge Format (OKF) bundle is conformant with the v0.2 spec (§11). Use when asked to validate, lint, or check an OKF bundle, or before committing changes to one. Runs a deterministic Python checker — not an eyeball pass. Also migrates a v0.1 bundle to v0.2 in place with --migrate.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.