Home / coco-research / coco · skills/visual-explainer/SKILL.md · GitHub

visual-explainer skillA

visual-explainer is agent-read markdown (skill) from coco-research/coco: Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and other visual explanations..

Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.

What the file says

# Visual Explainer

Generate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually. Use this skill for diagram requests, architecture overviews, diff/plan reviews, project recaps, comparison tables, slide decks, and any visual explanation.

## Trigger and delivery rules

- Prefer an HTML page over terminal ASCII when the output is inherently visual.
- If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary.
- Write files to `~/.agent/diagrams/` or the explicit eval output path. Use descriptive filenames.
- Open generated pages in the browser when running normally. In Pi package installs, use `visual_explainer` with `prepare` for planning/context and `render` only after the complete HTML document exists.
- The final page must be a complete self-contained HTML document, including embedded CSS and any needed JS.

## Reference routing

Read only the references needed for the current output:

| Need | Read |
|---|---|
| Text-heavy architecture/cards | `./templates/architecture.html` |
…

Read the whole file at its exact version.

How to install

Latest version
mdr add coco-research/coco/visual-explainer@v0.8.1
Exact content
mdr add coco-research/coco/visual-explainer@sha256:cc07527554e0020d

Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_gvllbsesm4khaevj.svg)](https://markdownregistry.com/a/art_gvllbsesm4khaevj)

1 badge views in 30 days

Versions

versioncommittedcommitsizeaudit
v0.8.1 latest2026-08-02 1479e32 6,758 BA view · diff
v0.8.12026-07-31 23a3d8d 6,743 BA view

Audit of the latest version

A  17 of 17 checks passed. Deterministic, no model, same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (6758 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

coco-research/coco · 478 stars · license NOASSERTION · pushed 2026-09-25 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_gvllbsesm4khaevj
GET https://markdownregistry.com/api/v1/resolve?ref=coco-research/coco/visual-explainer
GET https://markdownregistry.com/api/v1/blob/cc07527554e0020d6ff861488a1c2501d07c95367308ffb2f37531fda6d9ed6f

Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

More from coco-research/coco

create-rule skill
coco-research/coco · adapters/cursor/skills/create-rule/SKILL.md · Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up…
git:20260426.d53cc6c · audit A · 478 stars
create-skill skill
coco-research/coco · adapters/cursor/skills/create-skill/SKILL.md · Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a…
git:20260426.d53cc6c · audit A · 478 stars
create-subagent skill
coco-research/coco · adapters/cursor/skills/create-subagent/SKILL.md · Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up…
git:20260426.d53cc6c · audit A · 478 stars
migrate-to-skills skill
coco-research/coco · adapters/cursor/skills/migrate-to-skills/SKILL.md · Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent…
git:20260426.d53cc6c · audit A · 478 stars
update-cursor-settings skill
coco-research/coco · adapters/cursor/skills/update-cursor-settings/SKILL.md · Modify Cursor/VSCode user settings in settings.json. Use when the user wants to change editor settings, preferences…
git:20260426.d53cc6c · audit A · 478 stars
agent-lightning skill
coco-research/coco · skills/agent-lightning/SKILL.md · Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting…
git:20260802.1479e32 · audit A · 478 stars
agent-self-eval skill
coco-research/coco · skills/agent-self-eval/SKILL.md · Post-run self-evaluation system that scores agent output on correctness, clarity, actionability, and conciseness. Use…
v0.1.0 · audit A · 478 stars
ai-marketing-videos skill
coco-research/coco · skills/ai-marketing-videos/SKILL.md · Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for…
git:20260914.57d3294 · audit A · 478 stars
ai-product skill
coco-research/coco · skills/ai-product/SKILL.md · Use when building AI features into a product: LLM integration, RAG pipelines, guardrails, streaming, AI UX, prompt…
v0.1.0 · audit A · 478 stars
api-design-principles skill
coco-research/coco · skills/api-design-principles/SKILL.md · Use when designing a new REST or GraphQL API, reviewing an API spec before implementation, setting team API standards…
git:20260914.e75f220 · audit A · 478 stars
pmstudio-arb skill
coco-research/coco · skills/arb-review/SKILL.md · Generate an Architecture Review Board (ARB) presentation in Coco Inc's standard 11-slide format. Use when someone asks…
git:20260802.1479e32 · audit A · 478 stars
arch-index skill
coco-research/coco · skills/arch-index/SKILL.md · Build and validate .arch/index.json — a committed map from each architectural component of this repository to the real…
v1.0.0 · audit A · 478 stars

Every file in coco-research/coco

Other files named visual-explainer

visual-explainer skill
jamditis/claude-skills-journalism · visual-explainer/SKILL.md · HTML explainers, diagrams, architecture, timelines, source maps, slide decks, comparison tables, recaps, plan and diff…
v0.7.4 · audit B · 401 stars
visual-explainer skill
szoloth/skill-pack · skills/visual-explainer/SKILL.md · Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when…
v0.1.1 · audit B · 14 stars

Browse by kind, by grade A, or by owner.