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. 04SVG アーキテクチャ図の掲載
  5. 05手順ごとのワークフローの記述

活用シーン

  1. 01API リファレンスの生成
  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 対応