visual-explainer
Visual Explainer is an agent skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables and project recaps.
- Skill
nicobailon · 10,707 stars
Workflow
Diagram Design
Workflow for Claude Code by Cathryn Lavery, listed in awesome-claude-code under Design & UI/UX.
Checked 2026-10-31
Install
npx skills add cathrynlavery/diagram-designCommands come from the project's own docs or registry entry. Check them against the source before you run them.
Loading poll...
Diagram Design is a skill for producing editorial-style diagrams as self-contained HTML and SVG, with 45 diagram types according to its description. It names Claude Code, Codex, GitHub Copilot and Cursor among the agents it supports, and it avoids shadows and Mermaid output on purpose. The author is Cathryn Lavery, the licence is MIT, and the install line is npx skills add cathrynlavery/diagram-design, with a plugin marketplace route for Claude Code as well. We would recommend it to writers and engineers who want diagrams that look designed and can be dropped straight into a page. Because the output is plain HTML and SVG, you own it and can edit it by hand. The catch is that it is opinionated about style, so teams with a house diagram look may want something else. The repository has 63.3 thousand stars and was last pushed on 27 October 2026.
Mentioned here
draw.io MCP
This is the draw.io MCP server from jgraph, the maintainers of draw.io.
- MCP server
- Official
jgraph · 5,741 stars
Next AI Draw.io MCP
Next AI Draw.io lets you draw and edit draw.io diagrams by chatting with a model, and it ships as a web app, a desktop app and an MCP server.
- MCP server
DayuanJiang · 36,508 stars
Dev Browser
Dev Browser is a Claude skill that gives an agent the ability to use a web browser.
- Skill
Sawyer Hood · 6,709 stars
Agent Skills: Directory and Install Guide
Checked 2026-10-31
Claude Code Plugins: Directory and Install Guide
Checked 2026-10-31
MCP Servers: What They Are and Which to Install
Checked 2026-10-31
Claude Code MCP Servers: Setup, Scopes and Picks
Checked 2026-10-31
Best MCP Servers for Coding Agents
Checked 2026-10-31
Works with
Tried it with one of these? Vote below: works for me, or not.
Questions
How do I install Diagram Design?
Run this command: npx skills add cathrynlavery/diagram-design. The install box on this page has the command for each agent it works with.
Is Diagram Design free?
It is published under the MIT licence.
Who maintains Diagram Design?
It is maintained by Cathryn Lavery. The code is at github.com/cathrynlavery/diagram-design.
Loading poll...
Reviews
Loading reviews…
Only members can review this page. Sign in
Similar
Everything Claude Code (ECC)
Everything Claude Code, shortened to ECC, calls itself an agent harness performance optimization system and bundles skills, memory, security checks and research-first development habits.
- Workflow
Affaan Mustafa · 293,389 stars
gstack
gstack is Garry Tan's published Claude Code setup, described in the repository as 23 opinionated tools that act as CEO, designer, engineering manager, release manager, docs engineer and QA.
- Workflow
Garry Tan · 138,322 stars
Claude Scientific Skills
Scientific Agent Skills, listed here as Claude Scientific Skills, is a library of 177 ready-made skills plus more than 100 scientific databases, covering biology, chemistry, medicine and drug discovery, according to its README.
- Workflow
K-Dense · 55,403 stars
SuperClaude
SuperClaude is a configuration framework for Claude Code that adds specialised commands, cognitive personas and development methodologies.
- Workflow
SuperClaude-Org · 23,916 stars
SkillSpector
SkillSpector is a security scanner for agent skills from NVIDIA.
- Workflow
NVIDIA · 23,533 stars
claude-obsidian
Claude Obsidian turns an Obsidian vault into a knowledge base that Claude Code maintains.
- Workflow
Agrici Daniel · 16,008 stars
