Technical 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
html<!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
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": "john@example.com" }</code></pre> </div>
Code Block Pattern
html<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).
