Agent Skills › mhattingpete/claude-skills-marketplace › technical-doc-creator

technical-doc-creator

GitHub

生成包含代码块、API参考和架构图的HTML技术文档。适用于创建API文档、系统说明及开发者指南，提供标准化的HTML结构和样式模板。

visual-documentation-plugin/skills/technical-doc-creator/SKILL.md mhattingpete/claude-skills-marketplace

Trigger Scenarios

用户请求创建API文档需要生成系统技术文档要求编写开发者指南

Install

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

More Options

Non-standard path

npx skills add https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/technical-doc-creator -g -y

Use without installing

npx skills use mhattingpete/claude-skills-marketplace@technical-doc-creator

指定 Agent (Claude Code)

npx skills add mhattingpete/claude-skills-marketplace --skill technical-doc-creator -a claude-code -g -y

安装 repo 全部 skill

npx skills add mhattingpete/claude-skills-marketplace --all -g -y

预览 repo 内 skill

npx skills add mhattingpete/claude-skills-marketplace --list

SKILL.md

Frontmatter

{
    "name": "technical-doc-creator",
    "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."
}

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

Overview: purpose, key features, tech stack
Getting Started: installation, setup, quick start
API Reference: endpoints with request/response examples
Code Examples: syntax-highlighted code blocks
Architecture: system diagram (SVG)
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>