mcpField
T
technical-doc-creator

technical-doc-creator

github.com/mhattingpeteDevelopment689218 installsUpdated 14w ago
Repository

About technical-doc-creator

A skill for creating HTML technical documentation with code examples and API workflows. It is intended for developers documenting systems, APIs, and endpoint usage.

Key features

  1. 01Write system overviews and setup guides
  2. 02Document endpoints with request and response examples
  3. 03Add syntax-highlighted code snippets
  4. 04Include SVG architecture diagrams
  5. 05Describe step-by-step workflows

Use cases

  1. 01Generate API reference documentation
  2. 02Document a system's technical design
  3. 03Create developer docs with code examples
  4. 04Describe endpoint workflows

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill technical-doc-creator

After installing, type/technical-doc-creatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/templates/
base_template.html
references/
design_patterns.md
svg_library.md

Details

From the project 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

<!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

<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": "[email protected]"
}</code></pre>
</div>

Code Block Pattern

<pre><code>// Installation
npm install package-name

// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>

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

Comments

Markdown supported