Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From visual-documentation-skills
Generates HTML technical docs with syntax-highlighted code blocks, API endpoint examples, workflows, and SVG architecture diagrams for APIs and systems.
How this skill is triggered — by the user, by Claude, or both
Slash command
/visual-documentation-skills:technical-doc-creatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create comprehensive HTML technical documentation with code examples and API workflows.
Create comprehensive HTML technical documentation with code examples and API workflows.
<!DOCTYPE html>
<html>
<head>
<title>[API/System] Documentation</title>
<style>
body { font-family: system-ui; max-width: 1000px; margin: 0 auto; }
pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; overflow-x: auto; }
.endpoint { background: #f7fafc; padding: 15px; margin: 10px 0; border-left: 4px solid #4299e1; }
code { background: #e2e8f0; padding: 2px 6px; border-radius: 3px; }
</style>
</head>
<body>
<h1>[System] Documentation</h1>
<!-- Overview, Getting Started, API Reference, Examples -->
</body>
</html>
<div class="endpoint">
<h3><span style="color: #48bb78;">GET</span> /api/users/{id}</h3>
<p>Retrieve user by ID</p>
<h4>Request</h4>
<pre><code>curl -X GET https://api.example.com/users/123</code></pre>
<h4>Response</h4>
<pre><code>{
"id": 123,
"name": "John Doe",
"email": "[email protected]"
}</code></pre>
</div>
<pre><code>// Installation
npm install package-name
// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>
[system]-docs.htmlUse semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).
npx claudepluginhub p/huonghamd9-visual-documentation-skills-visual-documentation-plugin4plugins reuse this skill
First indexed Jun 6, 2026
Generates architecture documentation for technical projects, including API docs, user guides, and automation patterns.
Generates API docs, architecture diagrams, user guides, and technical references from code with automation and consistency checks.
Guides creation of README files, API docs, user guides, developer guides, and troubleshooting docs with structured process, templates, and best practices.