technical-doc-creator
npx machina-cli add skill mhattingpete/claude-skills-marketplace/technical-doc-creator --openclawTechnical Documentation Creator
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).
Source
git clone https://github.com/mhattingpete/claude-skills-marketplace/blob/main/visual-documentation-plugin/skills/technical-doc-creator/SKILL.mdView on GitHub Overview
Technical Documentation Creator generates comprehensive HTML documentation with code examples and API workflows. It organizes content into Overview, Getting Started, API Reference, Code Examples, Architecture, and Workflows, and supports syntax-highlighted blocks, API endpoint patterns, and SVG diagrams to visualize systems.
How This Skill Works
The tool analyzes inputs to extract endpoints, methods, and parameters, then builds structured sections (Overview, Getting Started, API Reference, Code Examples, Architecture, Workflows). It renders syntax-highlighted code blocks, formats API endpoints with request/response samples, and embeds architecture diagrams (SVG). The output follows the [system]-docs.html convention and uses semantic colors for HTTP methods (GET green, POST blue, DELETE red).
When to Use It
- Create API documentation for specific endpoints
- Generate technical docs for a system
- Document API references with request/response examples
- Create developer documentation with code samples
- Produce workflow-driven docs for API usage and integration
Quick Start
- Step 1: Provide the system name and list endpoints to document
- Step 2: Run the documentation generator to output [system]-docs.html
- Step 3: Review sections, update examples, and adjust diagrams as needed
Best Practices
- Define endpoints with method and path in a consistent format
- Use the API Endpoint Pattern for each endpoint with clear Request and Response sections
- Provide curl or HTTP examples for requests and sample JSON responses
- Include syntax-highlighted Code Block Pattern for code snippets
- Add an architecture diagram (SVG) when relevant and apply semantic colors to HTTP methods
Example Use Cases
- User management API docs with endpoints like GET /users/{id} and POST /users
- Payments API reference including charge, refund, and webhook endpoints with sample payloads
- Microservices architecture doc featuring system diagram and component interactions
- OAuth2 / auth flow documentation with token requests and responses
- Webhook integration docs showing event triggers and delivery examples
