mcpField
T
technical-doc-creator

technical-doc-creator

github.com/mhattingpete开发689218 次安装14 周前更新
代码仓库

关于 technical-doc-creator

该技能根据系统或 API 信息创建包含代码示例和工作流的 HTML 技术文档，适合编写 API 参考与开发者文档。

主要功能

  1. 01编写系统概述和入门指南
  2. 02记录端点及请求响应示例
  3. 03添加语法高亮代码片段
  4. 04加入 SVG 架构图
  5. 05整理分步工作流

适用场景

  1. 01生成 API 参考文档
  2. 02编写系统技术说明
  3. 03制作含代码示例的开发者文档
  4. 04记录端点操作流程

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/technical-doc-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

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

详细介绍

技术文档创建器

创建包含代码示例和 API 工作流的完整 HTML 技术文档。

适用场景

  • “为 [endpoints] 创建 API 文档”
  • “为 [system] 生成技术文档”
  • “编写 API 参考文档”
  • “创建开发者文档”

组件

  1. 概述：用途、主要功能、技术栈
  2. 快速入门：安装、设置、快速开始
  3. API 参考：包含请求和响应示例的端点
  4. 代码示例：带语法高亮的代码块
  5. 架构：系统图（SVG）
  6. 工作流：分步流程

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>
  
</body>
</html>

API 端点模式

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

代码块模式

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

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

工作流

  1. 提取 API 端点、方法和参数
  2. 创建概述和快速入门章节
  3. 为每个端点编写文档并附上示例
  4. 为常见操作添加代码片段
  5. 根据需要添加架构图
  6. 保存为 [system]-docs.html

HTTP 方法使用语义化颜色：GET（绿色）、POST（蓝色）、DELETE（红色）。

评论

支持 Markdown