--- name: Technical Documentation Creator slug: technical-documentation-creator category: Writing description: Technical Documentation Creator generates HTML technical docs with API references, code examples, workflows, and architecture diagrams. Use it for developer documentation, endpoint references, and system docs. github: "https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/technical-doc-creator" language: HTML stars: 664 forks: 95 install: "npx degit https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/technical-doc-creator ~/.claude/skills/technical-doc-creator" installs_to: ~/.claude/skills/technical-doc-creator source_path: visual-documentation-plugin/skills/technical-doc-creator/SKILL.md collection_size: 18 category_size: 1012 collection_url: "https://dirskills.com/collections/mhattingpete/claude-skills-marketplace" added: 2026-08-24T05:17:03.977Z last_synced: 2026-08-24T05:17:03.977Z canonical_url: "https://dirskills.com/skills/technical-documentation-creator" --- # Technical Documentation Creator Technical Documentation Creator generates HTML technical docs with API references, code examples, workflows, and architecture diagrams. Use it for developer documentation, endpoint references, and system docs. **Install:** ```bash npx degit https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/technical-doc-creator ~/.claude/skills/technical-doc-creator ``` ## README # 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).