Technical Doc Creator

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

  [API/System] Documentation
  
    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; }
  

  [System] Documentation
  

API Endpoint Pattern

  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

// 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).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mhattingpete
• Source: mhattingpete/claude-skills-marketplace
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.