Generate Tech Stack

generate-tech-stack

任意のプロジェクトをスキャンし、ライト／ダークテーマに対応した、自動適応型の TECH_STACK.html ページを設定不要で生成します。

Claude Code スキル、MCP サーバー、または GitHub Copilot Extension として動作します。

ライブデモ → — fastapi/full-stack-fastapi-template から生成したものです。変更は加えていません。

(実際の CLI 出力です。スクリプトは使用していません — 自動再生を避けたい場合は静止スクリーンショットをご覧ください)

---

生成される内容

生成されるすべてのページには、次の内容が含まれます。

セクション	説明
統計行	ツールの合計数 · カテゴリ数 · AI バックエンド数 · データストア数
アーキテクチャ図	レイヤー構成のフロー図（コンシューマー → API → AI/NLP → データ／監視／フロントエンド）
棒グラフ	カテゴリごとの横棒。色はカテゴリに合わせてあります
ツールカード	カテゴリごとに1枚のカードを表示。各ツールにはドット、名前、説明、バッジが表示されます
バッジの凡例	pip、dep、optional、core、deploy、ci などを説明します
フッター	プロジェクト名 · ツール数 · 生成日
ガイドツアー	すべてのセクションを順に案内します。レポートを初めて開いたときに自動表示され、? ボタンからいつでも再生できます
テーマ切り替え	ツアーボタンの隣にある太陽／月ボタンで、ダークモードとライトモードを切り替えます

---

リポジトリの構成

~/.claude/skills/generate-tech-stack/
├── SKILL.md                  ← Claude Code skill definition
├── INSTALL.md                ← detailed per-platform installation guide
├── README.md                 ← this file
├── scripts/
│   └── analyze.py            ← core scanner + HTML renderer (no dependencies)
├── mcp/
│   ├── server.py             ← MCP stdio server (pip install mcp)
│   └── requirements.txt
└── copilot/
    ├── index.js              ← GitHub Copilot Extension (Express)
    ├── package.json
    └── openai_function.json  ← OpenAI / Antigravity function definition

---

使い方

pip（CLI ＋ MCP サーバー）

pip install generate-tech-stack-mcp

generate-tech-stack . TECH_STACK.html    # CLI: scan and write the report
generate-tech-stack-mcp                   # stdio MCP server

pip をインストールすると、MCP ホストの設定は次のように簡潔になります。

{
  "mcpServers": {
    "generate-tech-stack": { "command": "generate-tech-stack-mcp" }
  }
}

Claude Code

/generate-tech-stack

任意のプロジェクトディレクトリから実行できます。このスキルは scripts/analyze.py を呼び出し、生成結果をブラウザーで開きます。

MCP（Claude Desktop、VS Code、Cursor、Zed、Windsurf、Continue）

pip install mcp

ホストの MCP 設定に追加します（パスは実際のホームディレクトリに置き換えてください）。

{
  "mcpServers": {
    "generate-tech-stack": {
      "command": "python3",
      "args": ["/home/<you>/.claude/skills/generate-tech-stack/mcp/server.py"]
    }
  }
}

次のように尋ねます：generate my tech stack または /generate-tech-stack。

公開される MCP ツール：

• generate_tech_stack — プロジェクトをスキャンし、TECH_STACK.html を書き込み、ブラウザーで開きます
• list_tech_stack — JSON サマリーを返します。ファイルは書き込みません

GitHub Copilot Extension

cd copilot
npm install
npm start        # listens on port 3000
ngrok http 3000  # expose for GitHub to reach

Copilot Extension を有効にして GitHub App を登録し、Agent URL を https://your-url/agent に設定して、アカウントにインストールします。その後、Copilot Chat で次のように入力します。

@generate-tech-stack /generate-tech-stack
@generate-tech-stack /generate-tech-stack /path/to/project

コマンドライン（単独実行）

python3 ~/.claude/skills/generate-tech-stack/scripts/analyze.py /path/to/project
# output: /path/to/project/TECH_STACK.html

# custom output path:
python3 scripts/analyze.py . ~/Desktop/TECH_STACK.html

analyze.py にサードパーティ製の依存関係はありません。Python 3.8 以降のみ必要です。

---

検出対象

ソースファイル	検出されるツール
requirements.txt / pyproject.toml	Python パッケージ（Web、DB、AI、テスト、可観測性、セキュリティ…）
package.json	Node／npm パッケージ（フレームワーク、フロントエンド、DB ドライバー、ツール類）
go.mod	Go 言語
Cargo.toml	Rust 言語
pom.xml / build.gradle	Java／Kotlin
Gemfile	Ruby
composer.json	PHP
**/*.py ソース	importlib.find_spec() のパターンを使って、オプション／動的 SDK を検出
docker-compose.yml / .env	PostgreSQL、Redis、MongoDB、SQLite の接続文字列
Dockerfile	Docker
docker-compose.yml	Docker Compose
.github/workflows/	GitHub Actions
.gitlab-ci.yml	GitLab CI
alembic.ini	Alembic マイグレーション
nginx.conf / Caddyfile	リバースプロキシ
tsconfig.json / src/**/*.ts	TypeScript

---

検出されたカテゴリ

カテゴリ	色	例
言語・ランタイム	緑	Python, Go, Rust, TypeScript
Web／API フレームワーク	紫	FastAPI, Express, Django, Next.js
データベース／ストレージ	緑	SQLAlchemy, Prisma, Redis, ChromaDB
AI SDK	青	OpenAI, Anthropic, LangChain, GuardrailsAI, NVIDIA NeMo, Presidio
NLP／ML	青緑	spaCy, Transformers, Sentence Transformers
オブザーバビリティ	青緑	Prometheus, OpenTelemetry, Sentry, Loguru
テスト	黄	pytest, Jest, Cypress, Playwright
セキュリティ／認証	ローズ	PyJWT, bcrypt, Authlib, Helmet
インフラ／デプロイ	オレンジ	Docker, Kubernetes, Celery, Boto3
フロントエンド／ダッシュボード	グレー	React, Vue, Tailwind, Recharts
メッセージング／通信	青	Kafka, RabbitMQ, Socket.io
開発ツール	グレー	ESLint, Prettier, Vite, TypeScript

---

デザイン

デフォルトはダークモードで、ライトモードへの切り替え機能があります（右上隅。設定は保存されず、再読み込みするとダークモードに戻ります）。フォントはIBM Plex Sans（本文）とJetBrains Mono（コード／バッジ）を使用し、Google Fonts から読み込みます。Vanilla JS はガイド付きツアーとテーマ切り替えのみに使用し、それ以外はすべてプレーンな HTML と CSS です。単一ファイルで完結しており、オフラインでも任意のブラウザーで開けます。

---

関連項目

• INSTALL.md — プラットフォーム別のセットアップ手順
• SKILL.md — Claude Code スキルの仕様