Skip to content
alyn
mhattingpete

Technical Doc Creator skill

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.

$npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator
View this skill on GitHubmhattingpete/claude-skills-marketplace/visual-documentation-plugin/skills/technical-doc-creator/SKILL.md
Pack stars
694
Pack installs
6.3k
Alyn Score
48/99
Updated
4 months ago
License
Apache-2.0
– views – installs via Alyn

Install Technical Doc Creator

Pick your agent. Every command is ready to paste.

$npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads technical-doc-creator when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the technical-doc-creator skill”. In Codex, type $technical-doc-creator.

The skill itself

SKILL.md

FolderGitHub

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": "john@example.com"
}</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).

Tips for Technical Doc Creator

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
  • • It is part of a pack with 18 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Technical Doc Creator

What does the Technical Doc Creator skill do?

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.

How do I install Technical Doc Creator?

Run "npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Technical Doc Creator work in Cursor and Codex?

Yes. Technical Doc Creator uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Technical Doc Creator free?

Technical Doc Creator is open source on GitHub under the Apache-2.0 license. It is free to install; check the license before commercial use.

Who made Technical Doc Creator?

Technical Doc Creator is published by mhattingpete in the mhattingpete/claude-skills-marketplace repository, together with 17 other skills.

Similar skills. From other creators.