# Technical Doc Creator

Create HTML technical documentation with code blocks, API workflows, system...

- Repository: https://github.com/mhattingpete/claude-skills-marketplace (689 stars)
- Category: Writing
- License: Apache-2.0
- Last updated: 2026-07-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator -g -a claude-code -y`
Codex: `npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator -g -a codex -y`
Cursor: `npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator -g -a cursor -y`
Gemini CLI: `npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mhattingpete/claude-skills-marketplace`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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": 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

The rest: https://github.com/mhattingpete/claude-skills-marketplace/blob/HEAD/visual-documentation-plugin/skills/technical-doc-creator/SKILL.md