visual-explainer
From the author
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.
Install
npx skills add coco-research/coco --skill visual-explainer -a claude-code
Installs to .claude/skills/visual-explainer/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 87
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- oma-explanationfirst-fluke/oh-my-agentCreate an offline HTML explanation of a code change (diff, PR, branch) or of a topic, system, or question. Use when a visual walkthrough document is requested.Engineering★ 1.4K
- explainer-video0xsline/OpenChatCutCreate finished explainer videos from a topic, script, outline, voiceover, product logic, data, technical concept, course material, or reference assets. Use when the user wants narration, motion graphics, stock footage, generated visuals, or mixed visuals to explain an idea.Media★ 2.6K
- visualizecode-yeongyu/oh-my-openagentBuilds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread. Use before calling show_html_page, html_preview or html_render, or whenever an answer reads better as a page than as prose.Writing★ 70.3K
- code-explainermohitagw15856/pm-claude-skillsExplain what a piece of code does in plain English, at the depth the reader needs. Use when asked to explain code, walk through a function, understand an unfamiliar snippet, or onboard to a file. Produces a one-line summary, a step-by-step walkthrough, the non-obvious parts called out, and any bugs or smells spotted along the way.Engineering★ 1.5K
- answer-me-with-htmlQingYunA/answer-me-with-htmlTurns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.Media★ 4.2K
- generative-uihimself65/finance-skillsDesign system and templates for interactive HTML/SVG visuals in Claude and Codex, using an available inline renderer or a standalone HTML file. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating displays — including financial data shown visually and requests phrased as "show me", "visualize", "draw", or "chart this".Design★ 3.4K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in