technical-doc-creatorlisted
Install: claude install-skill mhattingpete/claude-skills-marketplace
# 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
1. **Overview**: purpose, key features, tech stack
2. **Getting Started**: installation, setup, quick start
3. **API Reference**: endpoints with request/response examples
4. **Code Examples**: syntax-highlighted code blocks
5. **Architecture**: system diagram (SVG)
6. **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