jpskill.com
💬 コミュニケーション コミュニティ

fetching-library-docs

ReactやNext.js、Prismaなどのライブラリに関するAPIリファレンスやコード例、使い方を効率的に取得し、公式APIの学習や利用方法に関する質問に的確に答えるSkill。

📜 元の英語説明(参考)

Token-efficient library API documentation fetcher using Context7 MCP with 77% token savings. Fetches code examples, API references, and usage patterns for published libraries (React, Next.js, Prisma, etc). Use when users ask "how do I use X library", need code examples, want API syntax, or are learning a framework's official API. Triggers: "Show me React hooks", "Prisma query syntax", "Next.js routing API". NOT for exploring repo internals/source code (use researching-with-deepwiki) or local files.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ReactやNext.js、Prismaなどのライブラリに関するAPIリファレンスやコード例、使い方を効率的に取得し、公式APIの学習や利用方法に関する質問に的確に答えるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o fetching-library-docs.zip https://jpskill.com/download/17301.zip && unzip -o fetching-library-docs.zip && rm fetching-library-docs.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17301.zip -OutFile "$d\fetching-library-docs.zip"; Expand-Archive "$d\fetching-library-docs.zip" -DestinationPath $d -Force; ri "$d\fetching-library-docs.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して fetching-library-docs.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → fetching-library-docs フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
11

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Context7 効率的なドキュメント取得ツール

シェルパイプラインを通じて、自動で77%のトークン削減を実現するライブラリドキュメント取得ツールです。

クイックスタート

常にトークン効率の良いシェルパイプラインを使用してください:

# ライブラリの自動解決 + フィルタリング
bash scripts/fetch-docs.sh --library <library-name> --topic <topic>

# 例:
bash scripts/fetch-docs.sh --library react --topic useState
bash scripts/fetch-docs.sh --library nextjs --topic routing
bash scripts/fetch-docs.sh --library prisma --topic queries

結果: 約934トークンではなく、約205トークンを返します(77%削減)。

標準ワークフロー

ドキュメントのリクエストを行う際は、以下のワークフローに従ってください。

1. ライブラリとトピックの特定

ユーザーのクエリから抽出:

  • Library: React, Next.js, Prisma, Express など
  • Topic: 特定の機能 (hooks, routing, queries など)

2. シェルパイプラインで取得

bash scripts/fetch-docs.sh --library <library> --topic <topic> --verbose

--verbose フラグは、トークン削減の統計情報を表示します。

3. フィルタリングされた出力を使用

スクリプトは自動的に以下を行います:

  • 完全なドキュメントを取得 (934トークン、サブプロセス内に保持)
  • コード例 + API シグネチャ + 主要な注釈にフィルタリング
  • 必須コンテンツのみを Claude に返す (205トークン)

パラメータ

基本的な使い方

bash scripts/fetch-docs.sh [OPTIONS]

必須 (いずれか1つを選択):

  • --library <name> - ライブラリ名 (例: "react", "nextjs")
  • --library-id <id> - 直接 Context7 ID (より高速、解決をスキップ)

オプション:

  • --topic <topic> - 焦点を当てる特定の機能
  • --mode <code|info> - コード例の場合は code (デフォルト)、概念の場合は info
  • --page <1-10> - より多くの結果を得るためのページネーション
  • --verbose - トークン削減の統計情報を表示

モードの選択

Code Mode (デフォルト): コード例 + API シグネチャを返します

--mode code

Info Mode: 概念的な説明 + 少数の例を返します

--mode info

一般的なライブラリ ID

より高速な検索のために --library-id を使用してください (解決をスキップ):

React:      /reactjs/react.dev
Next.js:    /vercel/next.js
Express:    /expressjs/express
Prisma:     /prisma/docs
MongoDB:    /mongodb/docs
Fastify:    /fastify/fastify
NestJS:     /nestjs/docs
Vue.js:     /vuejs/docs
Svelte:     /sveltejs/site

ワークフローパターン

パターン 1: クイックコード例

ユーザーの質問: "React useState の例を見せて"

bash scripts/fetch-docs.sh --library react --topic useState --verbose

戻り値: 5つのコード例 + API シグネチャ + 注釈 (~205トークン)

パターン 2: 新しいライブラリの学習

ユーザーの質問: "Prisma を始めるにはどうすればいいですか?"

# ステップ 1: 概要を取得
bash scripts/fetch-docs.sh --library prisma --topic "getting started" --mode info

# ステップ 2: コード例を取得
bash scripts/fetch-docs.sh --library prisma --topic queries --mode code

パターン 3: 特定の機能の検索

ユーザーの質問: "Next.js のルーティングはどのように機能しますか?"

bash scripts/fetch-docs.sh --library-id /vercel/next.js --topic routing

正確な ID がわかっている場合は、--library-id を使用するとより高速です。

パターン 4: 深い探求

ユーザーは包括的な情報を必要としています:

# ページ 1: 基本的な例
bash scripts/fetch-docs.sh --library react --topic hooks --page 1

# ページ 2: 高度なパターン
bash scripts/fetch-docs.sh --library react --topic hooks --page 2

トークン効率

仕組み:

  1. fetch-docs.shfetch-raw.sh を呼び出します (これは mcp-client.py を使用します)
  2. 完全なレスポンス (934トークン) はサブプロセスのメモリに保持されます
  3. シェルフィルタ (awk/grep/sed) が必須要素を抽出します (LLMトークンは使用されません)
  4. フィルタリングされた出力 (205トークン) を Claude に返します

削減量:

  • 直接 MCP: クエリあたり 934 トークン
  • このアプローチ: クエリあたり 205 トークン
  • 77% 削減

mcp-client.py を直接使用しないでください - フィルタリングをバイパスし、トークンを浪費します。

高度な使い方: ライブラリの解決

ライブラリ名が失敗する場合は、バリエーションを試してください:

# さまざまな形式を試す
--library "next.js"    # ドット付き
--library "nextjs"     # ドットなし
--library "next"       # 短縮形

# または手動で検索
bash scripts/fetch-docs.sh --library "your-library" --verbose
# 推奨されるライブラリ ID を出力で確認

検証

実行: python3 scripts/verify.py

期待される結果: ✓ fetch-docs.sh ready

検証が失敗した場合

  1. 診断を実行: ls -la scripts/fetch-docs.sh
  2. 確認: スクリプトが存在し、実行可能であること
  3. 修正: chmod +x scripts/fetch-docs.sh
  4. それでも失敗する場合は停止して報告してください - ダウンストリームの手順に進まないでください

トラブルシューティング

問題 解決策
ライブラリが見つからない 名前を変えてみるか、より広い検索語を使用する
結果がない --mode info またはより広いトピックを使用する
より多くの例が必要 ページを増やす: --page 2
完全なコンテキストが必要 説明については --mode info を使用する
許可が拒否されました 実行: chmod +x scripts/*.sh

参考文献

詳細な Context7 MCP ツールのドキュメントについては、以下を参照してください:

実装に関する注記

コンポーネント (参照のみ、fetch-docs.sh を使用):

  • mcp-client.py - ユニバーサル MCP クライアント (基盤)
  • fetch-raw.sh - MCP ラッパー
  • extract-code-blocks.sh - コード例フィルタ (awk)
  • extract-signatures.sh - API シグネチャフィルタ (awk)
  • extract-notes.sh - 重要な注釈フィルタ (grep)
  • fetch-docs.sh - メインオーケストレーター (常にこれを使用)

アーキテクチャ: シェルパイプラインはサブプロセスでドキュメントを処理し、完全なレスポンスを Claude のコンテキストから除外します。 フィルタリングされた必須要素のみが LLM コンテキストに入り、100% の機能を維持しながら 77% のトークン削減を実現します。

Anthropic の "Code Execution with MCP" ブログ投稿 に基づいています。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Context7 Efficient Documentation Fetcher

Fetch library documentation with automatic 77% token reduction via shell pipeline.

Quick Start

Always use the token-efficient shell pipeline:

# Automatic library resolution + filtering
bash scripts/fetch-docs.sh --library <library-name> --topic <topic>

# Examples:
bash scripts/fetch-docs.sh --library react --topic useState
bash scripts/fetch-docs.sh --library nextjs --topic routing
bash scripts/fetch-docs.sh --library prisma --topic queries

Result: Returns ~205 tokens instead of ~934 tokens (77% savings).

Standard Workflow

For any documentation request, follow this workflow:

1. Identify Library and Topic

Extract from user query:

  • Library: React, Next.js, Prisma, Express, etc.
  • Topic: Specific feature (hooks, routing, queries, etc.)

2. Fetch with Shell Pipeline

bash scripts/fetch-docs.sh --library <library> --topic <topic> --verbose

The --verbose flag shows token savings statistics.

3. Use Filtered Output

The script automatically:

  • Fetches full documentation (934 tokens, stays in subprocess)
  • Filters to code examples + API signatures + key notes
  • Returns only essential content (205 tokens to Claude)

Parameters

Basic Usage

bash scripts/fetch-docs.sh [OPTIONS]

Required (pick one):

  • --library <name> - Library name (e.g., "react", "nextjs")
  • --library-id <id> - Direct Context7 ID (faster, skips resolution)

Optional:

  • --topic <topic> - Specific feature to focus on
  • --mode <code|info> - code for examples (default), info for concepts
  • --page <1-10> - Pagination for more results
  • --verbose - Show token savings statistics

Mode Selection

Code Mode (default): Returns code examples + API signatures

--mode code

Info Mode: Returns conceptual explanations + fewer examples

--mode info

Common Library IDs

Use --library-id for faster lookup (skips resolution):

React:      /reactjs/react.dev
Next.js:    /vercel/next.js
Express:    /expressjs/express
Prisma:     /prisma/docs
MongoDB:    /mongodb/docs
Fastify:    /fastify/fastify
NestJS:     /nestjs/docs
Vue.js:     /vuejs/docs
Svelte:     /sveltejs/site

Workflow Patterns

Pattern 1: Quick Code Examples

User asks: "Show me React useState examples"

bash scripts/fetch-docs.sh --library react --topic useState --verbose

Returns: 5 code examples + API signatures + notes (~205 tokens)

Pattern 2: Learning New Library

User asks: "How do I get started with Prisma?"

# Step 1: Get overview
bash scripts/fetch-docs.sh --library prisma --topic "getting started" --mode info

# Step 2: Get code examples
bash scripts/fetch-docs.sh --library prisma --topic queries --mode code

Pattern 3: Specific Feature Lookup

User asks: "How does Next.js routing work?"

bash scripts/fetch-docs.sh --library-id /vercel/next.js --topic routing

Using --library-id is faster when you know the exact ID.

Pattern 4: Deep Exploration

User needs comprehensive information:

# Page 1: Basic examples
bash scripts/fetch-docs.sh --library react --topic hooks --page 1

# Page 2: Advanced patterns
bash scripts/fetch-docs.sh --library react --topic hooks --page 2

Token Efficiency

How it works:

  1. fetch-docs.sh calls fetch-raw.sh (which uses mcp-client.py)
  2. Full response (934 tokens) stays in subprocess memory
  3. Shell filters (awk/grep/sed) extract essentials (0 LLM tokens used)
  4. Returns filtered output (205 tokens) to Claude

Savings:

  • Direct MCP: 934 tokens per query
  • This approach: 205 tokens per query
  • 77% reduction

Do NOT use mcp-client.py directly - it bypasses filtering and wastes tokens.

Advanced: Library Resolution

If library name fails, try variations:

# Try different formats
--library "next.js"    # with dot
--library "nextjs"     # without dot
--library "next"       # short form

# Or search manually
bash scripts/fetch-docs.sh --library "your-library" --verbose
# Check output for suggested library IDs

Verification

Run: python3 scripts/verify.py

Expected: ✓ fetch-docs.sh ready

If Verification Fails

  1. Run diagnostic: ls -la scripts/fetch-docs.sh
  2. Check: Script exists and is executable
  3. Fix: chmod +x scripts/fetch-docs.sh
  4. Stop and report if still failing - do not proceed with downstream steps

Troubleshooting

Issue Solution
Library not found Try name variations or use broader search term
No results Use --mode info or broader topic
Need more examples Increase page: --page 2
Want full context Use --mode info for explanations
Permission denied Run: chmod +x scripts/*.sh

References

For detailed Context7 MCP tool documentation, see:

Implementation Notes

Components (for reference only, use fetch-docs.sh):

  • mcp-client.py - Universal MCP client (foundation)
  • fetch-raw.sh - MCP wrapper
  • extract-code-blocks.sh - Code example filter (awk)
  • extract-signatures.sh - API signature filter (awk)
  • extract-notes.sh - Important notes filter (grep)
  • fetch-docs.sh - Main orchestrator (ALWAYS USE THIS)

Architecture: Shell pipeline processes documentation in subprocess, keeping full response out of Claude's context. Only filtered essentials enter the LLM context, achieving 77% token savings with 100% functionality preserved.

Based on Anthropic's "Code Execution with MCP" blog post.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。