--- name: technical-doc-creator description: Create 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. --- # 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 [API/System] Documentation

[System] Documentation

``` ## API Endpoint Pattern ```html

GET /api/users/{id}

Retrieve user by ID

Request

curl -X GET https://api.example.com/users/123

Response

{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}
``` ## Code Block Pattern ```html 
// Installation
npm install package-name

// Usage
import { feature } from 'package-name';
const result = feature.doSomething();
``` ## Workflow 1. Extract API endpoints, methods, parameters 2. Create overview and getting started sections 3. Document each endpoint with examples 4. Add code snippets for common operations 5. Include architecture diagram if relevant 6. Write to `[system]-docs.html` Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).