technical-doc-creator

@mhattingpete · 收录于 1 周前 · 上游提交 4 个月前

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.

场景技术文档 api文档开发手册

适合你，如果需要为项目编写结构清晰的技术文档

/ 下载安装

technical-doc-creator.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill ↓ .zip

用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录

Claude Code~/.claude/skills/(项目级 .claude/skills/)

Codex CLI~/.codex/skills/

Cursor自动读取上面两处目录

其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同

/ 通过 npx 安装 校验哈希

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

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- mhattingpete/claude-skills-marketplace/technical-doc-creator

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify mhattingpete/claude-skills-marketplace/technical-doc-creator

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

644GitHub stars

~518最小装载

~518含声明引用

~8.5K文本包总量

镜像托管

怎么用

技能原文 SKILL.md作者撰写 · Apache-2.0 · 3fa16a9

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>

Workflow

Extract API endpoints, methods, parameters
Create overview and getting started sections
Document each endpoint with examples
Add code snippets for common operations
Include architecture diagram if relevant
Write to [system]-docs.html

Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).

按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…