New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Visual Explainer

by coco-research in coco-research/coco

Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts.

MITAuto-check passedDocuments & Office

Install Visual Explainer

skills CLI
$ npx skills add coco-research/coco --skill visual-explainer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install coco-research/coco visual-explainer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/visual-explainer .claude/skills/visual-explainer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
visual-explainer
GitHub stars
473
Token cost
~1.7k tokens
SKILL.md length
775 words
Files
17 (incl. references)
Skills in repo
60
Repo updated
First seen
Licence
MIT

At a glance

Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts.

  • Architecture overviews
  • SKILL.md covers Trigger and delivery rules, Reference routing, Choose the representation and Mermaid invariants, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Comparison tables

What it does

Visual Explainer is an agent 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.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files, including reference files (for example `commands/diff-review.md`, `commands/fact-check.md` and `commands/generate-slides.md`). Compatibility notes: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.

It sits in Documents & Office, covering Diagrams, Slides and decks and Infographics. It works with Mermaid. The repository describes itself as: CoCo Super Intelligence is the orchestration layer that turns Claude Code, Cursor, or Codex into an engineering department: a routed advisory board, 226 skills, 386 commands… The licence is MIT.

When your agent uses it

  • Architecture overviews
  • Comparison tables
  • Other visual explanations

Example prompts

  • “/visual-explainer”

Requirements

  • Compatibility (from SKILL.md): Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.

What it can do on your machine

Read from SKILL.md and the folder at commit 6036e9c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.

    From compatibility in the SKILL.md frontmatter.

Context cost

Visual Explainer loads about 1.7k tokens when it runs, and up to ~31k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 775 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~31k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from coco-research/coco at commit 6036e9c, republished under its MIT licence (© coco-research). 775 words, ~1,688 tokens.

Download SKILL.mdSave it as .claude/skills/visual-explainer/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
name
visual-explainer
description
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.
compatibility
Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.
license
MIT
metadata.author
nicobailon
metadata.version
0.8.1
domain
design

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:

NeedRead
Text-heavy architecture/cards./templates/architecture.html
Mermaid flowcharts, sequence, ER, state, class, C4, data flow./templates/mermaid-flowchart.html, Mermaid sections in ./references/libraries.md
Data tables, comparisons, audits./templates/data-table.html
Slide decks./templates/slide-deck.html, ./references/slide-patterns.md
CSS layout, overflow, depth, collapsibles, SVG connectors, generated images./references/css-patterns.md
Pages with 4+ major sections./references/responsive-nav.md
Prose-heavy pages“Prose Page Elements” in css-patterns.md, typography sections in libraries.md

Choose the representation

ContentDefault representation
Flowchart, pipeline, state machine, decision treeMermaid
Sequence, ER/schema, class, C4, topology-focused architectureMermaid
Text-heavy architecture, module internals, implementation plansCSS grid cards, optionally with a Mermaid overview
15+ element architectureHybrid: small Mermaid overview + CSS detail cards
Comparison/audit/status matrixSemantic HTML <table>
Timeline/roadmapCSS timeline
Dashboard/metricsCSS grid + charts/KPIs
Slide deck100dvh slides using slide template patterns

Mermaid invariants

  • Use theme: 'base' with custom themeVariables matching the page palette.
  • For complex diagrams use ELK layout when available.
  • Never use bare <pre class="mermaid">.
  • Use the canonical diagram-shell pattern from templates/mermaid-flowchart.html: .diagram-shell > .mermaid-wrap > .zoom-controls + .mermaid-viewport > .mermaid-canvas.
  • Every Mermaid diagram needs zoom in/out/reset/expand controls, Ctrl/Cmd+scroll zoom, drag panning, and click-to-expand.
  • Prefer flowchart TD for complex diagrams. Use LR only for simple 3–4 node linear flows.
  • Use <br/> in quoted flowchart labels. Do not use escaped \n labels.
  • Never define page-level .node; Mermaid uses it internally. Use namespaced page classes such as .ve-card.
  • For 15+ elements, do not cram everything into one Mermaid diagram. Use the hybrid overview + cards pattern.

Layout and style invariants

  • Use semantic HTML where it helps accessibility and copy/paste: <table>, headings, lists, <details>, captions.
  • Use CSS custom properties for palette: --bg, --surface, --border, --text, --text-dim, and 3–5 accents.
  • Pick a clear aesthetic direction before writing: blueprint, editorial, paper/ink, terminal, IDE-inspired, or data-dense.
  • Avoid generic defaults: no body font that is only Inter, Roboto, Arial, Helvetica, or system-ui; no violet/fuchsia Tailwind-default accents as the main palette (#8b5cf6, #7c3aed, #a78bfa, #d946ef); no cyan+magenta+purple neon dashboard; no gradient-mesh blobs.
  • Good font pair families: DM Sans + Fira Code; Instrument Serif + JetBrains Mono; IBM Plex Sans + IBM Plex Mono; Bricolage Grotesque + Fragment Mono; Plus Jakarta Sans + Azeret Mono.
  • Good accent directions: terracotta+sage, teal+slate, rose+cranberry, amber+emerald, deep blue+gold.
  • Prevent overflow: min-width: 0 on grid/flex children, overflow-wrap: break-word for long text, and scroll containers for wide tables/code.
  • Do not set display: flex directly on <li> when list markers matter.
  • Use depth sparingly: hero/elevated only for primary sections; flat/recessed for reference material.
  • Use entrance/hover animation only when it clarifies hierarchy. Respect prefers-reduced-motion. Do not use continuous glow, pulse, or breathing effects on static content.
Show full SKILL.md (223 more words)Show less

Slide deck mode

Use slides only when explicitly requested or when a command asks for slides. Slides are a different medium, not a paginated article:

  • Each slide is one viewport (100dvh) with no page-level scrolling.
  • Use larger type, fewer objects per slide, varied compositions, and visible navigation.
  • Include slide nav chrome from slide-deck.html: prev/next controls, slide count, keyboard navigation, and carousel dots/indicators.
  • Before writing HTML, inventory the source and map every source item to slides.
  • Do not drop content to fit a fixed slide count. Add slides instead.
  • Use the 10 slide types from slide-patterns.md: Title, Section Divider, Content, Split, Diagram, Dashboard, Table, Code, Quote, Full-Bleed.

Optional generated images

If surf is available, generated images may be embedded as base64 for hero banners, conceptual illustrations, or educational visuals. Skip images for data-heavy, structural, or Mermaid/CSS-suitable content. Pages must stand on CSS, typography, and diagrams without images.

Final checklist

Before delivery, verify:

  • complete HTML document;
  • output written to the requested path;
  • no console errors when opened;
  • no horizontal overflow at normal desktop width;
  • fonts load with fallbacks;
  • tables preserve rows/columns and wrap long text;
  • Mermaid diagrams use diagram-shell with zoom/pan/expand;
  • slides fit one viewport, include carousel dots, and preserve source coverage;
  • visual hierarchy makes the main idea obvious in the first viewport;
  • styling would still be recognizable if compared against a generic dark/violet template.

© coco-research, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (references) in skills/visual-explainer of coco-research/coco.

  • SKILL.md
  • LICENSE
  • commands/diff-review.md
  • commands/fact-check.md
  • commands/generate-slides.md
  • commands/generate-visual-plan.md
  • commands/generate-web-diagram.md
  • commands/plan-review.md
  • commands/project-recap.md
  • references/css-patterns.md
  • references/libraries.md
  • references/responsive-nav.md
  • references/slide-patterns.md
  • templates/architecture.html
  • templates/data-table.html
  • templates/mermaid-flowchart.html
  • templates/slide-deck.html

Open the folder on GitHubat commit 6036e9c

Compare with similar skills

Visual Explainer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Visual Explainer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visual Explainer this skillcoco-research/coco473—~1.7kAutomated safety check: PassMIT
Show Mefmflurry/settings-opencode171—~1.2kAutomated safety check: PassMIT
Bm Mdmiantiao-me/bm.md616—~2.1kAutomated safety check: PassLGPL-3.0
Visual Explainernicobailon/visual-explainer10k—~3.3kAutomated safety check: PassMIT
SVG Technical Infographic Authormodu-ai/moai-adk1.2k—~5.2kAutomated safety check: NotesApache-2.0
Markstream VueSimon-He95/markstream-vue3k—~2.2kAutomated safety check: PassMIT

Similar skills

  • Show Me

    fmflurry/settings-opencode

    Help the user understand the current topic visually. An agent skill from fmflurry/settings-opencode.

    171 GitHub stars~1.2k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed

  • Bm Md

    miantiao-me/bm.md

    使用 bm.md 写作、改写、排版或渲染 Markdown；生成 Mermaid 与 AntV Infographic，设置图片尺寸、高亮重点，以及执行 HTML/纯文本转换和 Markdown lint

    616 GitHub stars~2.1k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

  • Visual Explainer

    nicobailon/visual-explainer

    Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.

    10k GitHub stars~3.3k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • SVG Technical Infographic Author

    modu-ai/moai-adk

    Builds hand-editable SVG diagrams from computed layout coordinates, lints the source and renders a 2x PNG, with rules for when mermaid is the better choice.

    1.2k GitHub stars~5.2k tokensUpdated today
    Media & CreativeAuto-check: notes

  • Markstream Vue

    Simon-He95/markstream-vue

    Integrate markstream-vue into a Vue 3 app. An agent skill from Simon-He95/markstream-vue.

    3k GitHub stars~2.2k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Visual Explainer

    jamditis/claude-skills-journalism

    HTML explainers, diagrams, architecture, timelines, source maps, slide decks, comparison tables, recaps, plan and diff reviews.

    416 GitHub stars~11k tokensUpdated 3 days ago
    Documents & OfficeAuto-check passed

More from coco-research/coco

All 60 skills in this repo

  • Coco Ads

    coco-research/coco

    Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.

    473 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Arch Index

    coco-research/coco

    Build and validate .arch/index.json — a committed map from each architectural component of this repository to the real directories and files that implement it, pinned to a git commit, with every…

    473 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Skill Evolution

    coco-research/coco

    A skill your agent uses when running, reviewing or changing coco's self-evolution cycle: the 30-day loop that observes how skills are actually used, proposes evidence-backed edits to them as one…

    473 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Coco Diagram

    coco-research/coco

    A skill your agent uses for architecture, current-state, process, data-flow, medallion, or DP diagrams, including redrawing .drawio and Mermaid sources.

    473 GitHub stars~9.2k tokensUpdated today
    Auto-check passed

  • Brain

    coco-research/coco

    A skill your agent uses when the user says brain, project knowledge, what do we know about, open tasks, or recent decisions, or runs /brain or /brain-update.

    473 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • M0

    coco-research/coco

    A skill your agent uses when the user says 'm0', 'm0 status', 'start m0', 'cross-tool memory', 'operational thread', or 'where is my memory stored', or when the M0 daemon or MCP wiring needs…

    473 GitHub stars~755 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Visual Explainer

What does Visual Explainer do?

Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Visual Explainer is an agent skill from coco-research/coco. Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts.

When should I use Visual Explainer?

Visual Explainer fits situations like: architecture overviews; comparison tables; other visual explanations.

How do I install Visual Explainer in Claude Code?

Run `npx skills add coco-research/coco --skill visual-explainer -a claude-code`. Or copy the skill folder (skills/visual-explainer in coco-research/coco) into .claude/skills/visual-explainer in your project. Claude Code loads it when a task matches its description.

How do I install Visual Explainer in Codex?

Run `npx skills add coco-research/coco --skill visual-explainer -a codex`. Or copy the skill folder (skills/visual-explainer in coco-research/coco) into .agents/skills/visual-explainer in your project. Codex loads it when a task matches its description.

Can I use Visual Explainer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add coco-research/coco --skill visual-explainer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-explainer, .gemini/skills/visual-explainer, .github/skills/visual-explainer and .opencode/skills/visual-explainer in your project.

What does Visual Explainer need to run?

SKILL.md names no scripts, command-line tools or credentials: Visual Explainer is instructions for the agent only. Compatibility (from SKILL.md): Requires a browser to view generated HTML files. Optional surf-cli for AI image generation..

Does Visual Explainer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visual Explainer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Visual Explainer use?

Visual Explainer is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Visual Explainer use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 29k tokens, read only when the agent opens those files.

What are the alternatives to Visual Explainer?

Skills that share tags, products or a category with Visual Explainer: Show Me (fmflurry/settings-opencode, 171 stars), Bm Md (miantiao-me/bm.md, 616 stars), Visual Explainer (nicobailon/visual-explainer, 10k stars) and SVG Technical Infographic Author (modu-ai/moai-adk, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Explainer?

coco-research (a GitHub user) maintains it in coco-research/coco, which has 473 GitHub stars. The repository holds 60 skills in this directory. The repository was last updated on October 7, 2026.

Source: coco-research/coco on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.