Technical Documentation Creator
SkillDocs & knowledgeCreate HTML technical documentation with code blocks, API workflows, system architecture diagrams, and syntax highlighting. Use when users request technical documentation, API docs, API references, code examples, or developer documentation.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Technical Documentation Creator skill
What this skill tells your AI
The instructions your AI receives, as published by mhattingpete/claude-skills-marketplace in visual-documentation-plugin/skills/technical-doc-creator/SKILL.md and read by ahel’s review.
Create comprehensive HTML technical documentation with code examples and API workflows.
When to Use
- "Create API documentation for [endpoints]"
- "Generate technical docs for [system]"
- "Document API reference"
- "Create developer documentation"
Components
- Overview: purpose, key features, tech stack
- Getting Started: installation, setup, quick start
- API Reference: endpoints with request/response examples
- Code Examples: syntax-highlighted code blocks
- Architecture: system diagram (SVG)
- Workflows: step-by-step processes
HTML Structure
<!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>
API Endpoint Pattern
<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": "john@example.com"
}</code></pre>
</div>
Code Block Pattern
<pre><code>// Installation
npm install package-name
// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>
Workflow
- Extract API endpoints, methods, parameters
- Create overview and getting started sections
- Document each endpoint with examples
- Add code snippets for common operations
- Include architecture diagram if relevant
- Write to
[system]-docs.html
Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).
Signals
- GitHub stars
- 671
- Forks
- 96
- Last commit
- Jul 2026
Advanced
- Catalog kind
- skill
- Gateway key
technical-doc-creator- Source
- github.com/mhattingpete/claude-skills-marketplace