codebase-navigator について
codebase-navigatorは、開発者がコードを探し、プロジェクト構成を把握するためのスキルです。検索・トレース用スクリプトと、アーキテクチャや主要ファイルの案内を備えています。
主な機能
- 01関数、コンポーネント、エンドポイントの検索
- 02APIとデータフローの追跡
- 03シンボルの使用箇所と依存関係の検索
- 04アーキテクチャと主要ファイルの参照
活用シーン
- 01関数やコンポーネントの定義場所を特定
- 02機能の呼び出しやデータフローを追跡
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ srbhr/ resume-matcher --skill codebase-navigatorインストール後、Claude Code で/codebase-navigatorを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/REFERENCE.mdscripts/search.shtrace.sh詳細
コードベースナビゲーター
コードの調査、ファイルの検索、プロジェクト構造の把握では、まずこのスキルを使用してください。
クイックスタート
検索スクリプト(推奨)
よく使う検索には、同梱のスクリプトを実行してください。
# Find functions/methods
.agents/skills/codebase-navigator/scripts/search.sh functions <pattern>
# Find React components
.agents/skills/codebase-navigator/scripts/search.sh components <pattern>
# Find API endpoints
.agents/skills/codebase-navigator/scripts/search.sh endpoints
# Trace an API flow end-to-end
.agents/skills/codebase-navigator/scripts/trace.sh api-flow <endpoint>
# Trace a data field from backend to UI
.agents/skills/codebase-navigator/scripts/trace.sh data-flow <field_name>
# Find component hierarchy
.agents/skills/codebase-navigator/scripts/trace.sh component-tree <ComponentName>
ripgrep の直接パターン
# Find any symbol
rg --no-heading -n '\bMySymbol\b' apps/
# Python function definitions
rg --no-heading -n '(def|async def) my_function' apps/backend/ --type py
# React component usage
rg --no-heading -n '<MyComponent' apps/frontend/ --glob '*.tsx'
# Pydantic models
rg --no-heading -n 'class My.*BaseModel' apps/backend/ --type py
# API route handlers
rg --no-heading -n '@(router|app)\.(get|post|put|patch|delete)' apps/backend/ --type py
アーキテクチャの概要
| 必要な情報 | ドキュメント |
|---|---|
| バックエンドアーキテクチャ | docs/agent/architecture/backend-architecture.md |
| フロントエンドアーキテクチャ | docs/agent/architecture/frontend-architecture.md |
| API コントラクト | docs/agent/apis/front-end-apis.md |
| API フローマップ | docs/agent/apis/api-flow-maps.md |
| ドキュメントの全インデックス | docs/agent/README.md |
プロジェクトのレイアウト
apps/
├── backend/app/
│ ├── main.py # FastAPI entry, CORS, routers
│ ├── config.py # Pydantic settings from env
│ ├── database.py # TinyDB wrapper
│ ├── llm.py # LiteLLM wrapper
│ ├── routers/ # API endpoints
│ ├── services/ # Business logic
│ ├── schemas/ # Pydantic models
│ └── prompts/ # LLM prompt templates
│
└── frontend/
├── app/ # Next.js pages
├── components/ # UI components
├── lib/ # API client, utilities, i18n
├── hooks/ # Custom React hooks
└── messages/ # i18n translations (en, es, zh, ja)
よくあるワークフロー
「X はどこで定義されていますか?」
.agents/skills/codebase-navigator/scripts/search.sh functions my_function
.agents/skills/codebase-navigator/scripts/search.sh components MyComponent
.agents/skills/codebase-navigator/scripts/search.sh classes MyClass
.agents/skills/codebase-navigator/scripts/search.sh types MyType
「X を呼び出しているのは何ですか?」
.agents/skills/codebase-navigator/scripts/search.sh usage my_function
.agents/skills/codebase-navigator/scripts/search.sh deps my_file.py
「機能 X のデータはどのように流れますか?」
.agents/skills/codebase-navigator/scripts/trace.sh api-flow resumes
.agents/skills/codebase-navigator/scripts/trace.sh data-flow personalInfo
.agents/skills/codebase-navigator/scripts/trace.sh component-tree ResumeEditor
主要なエントリーポイント
| 対象 | ファイル |
|---|---|
| バックエンドの起動 | apps/backend/app/main.py |
| フロントエンドのページ | apps/frontend/app/ |
| API クライアント | apps/frontend/lib/api.ts または lib/api-client.ts |
| デザイントークン | apps/frontend/app/globals.css |
| 履歴書のスキーマ | apps/backend/app/schemas/ |
| LLM プロンプト | apps/backend/app/prompts/ |
参考資料
ripgrep のチートシートと高度な検索パターンについては、references/REFERENCE.md を参照してください。
コメント
Markdown 対応