Claude Navigator
A VS Code extension to browse and understand all Claude Code assets across personal and project scopes.
Features
- Sidebar tree view — browse Skills, Agents, MCP Servers, Hooks, Plugins, and Commands in a collapsible tree grouped by kind
- Detail panel — click any asset to see full metadata, configuration, and raw file content in a webview
- Multi-scope scanning — discovers assets from
~/.claude (personal), .claude/ (project), and settings.local.json (local overrides)
- Smart parsing — handles SKILL.md frontmatter, settings.json hooks/MCP entries, plugin directories, markdown commands, and agent definitions
- Search & filter — filter by scope (personal/project/local), kind, status (enabled/disabled/invalid), or free-text search
- Problems panel — detects and reports invalid JSON, malformed frontmatter, missing files, and broken references
- Auto-refresh — file watchers automatically re-index when config files change
- Diagnostics integration — problems appear in VS Code's built-in Problems panel
Data Sources
The extension scans:
| Location |
Scope |
~/.claude/settings.json |
Personal |
~/.claude/plugins/ |
Personal |
~/.claude/commands/ |
Personal |
<workspace>/.claude/settings.json |
Project |
<workspace>/.claude/settings.local.json |
Local |
<workspace>/.claude/commands/ |
Project |
Set CLAUDE_CONFIG_DIR to override the personal config directory.
Commands
| Command |
Description |
| Claude Navigator: Refresh |
Re-scan and rebuild the index |
| Claude Navigator: Search Assets |
Free-text search across all assets |
| Claude Navigator: Filter by Scope |
Filter tree by personal/project/local |
| Claude Navigator: Filter by Kind |
Filter tree by asset type |
| Claude Navigator: Filter by Status |
Filter tree by enabled/disabled/invalid |
| Claude Navigator: Clear Filters |
Remove all active filters |
| Claude Navigator: Open File |
Open the asset's source file |
| Claude Navigator: Reveal in Explorer |
Show file in OS file manager |
| Claude Navigator: Copy Name |
Copy asset name to clipboard |
| Claude Navigator: Copy Path |
Copy file path to clipboard |
| Claude Navigator: Show Details |
Open the detail webview panel |
| Claude Navigator: Open Claude Config Folder |
Open ~/.claude in file manager |
Development
# Install dependencies
npm install
# Compile
npm run compile
# Watch mode
npm run watch
Press F5 in VS Code to launch the Extension Development Host.
Architecture
src/
├── extension.ts # Entry point
├── constants.ts # Shared constants
├── models/types.ts # Domain types
├── services/
│ ├── configResolver.ts # Resolves config directories
│ ├── scanner.ts # Walks directories for files
│ ├── indexer.ts # Orchestrates scan → parse → index
│ ├── diagnostics.ts # VS Code diagnostics integration
│ ├── fileWatcher.ts # Auto-refresh on file changes
│ └── parsers/
│ ├── frontmatterUtils.ts
│ ├── skillParser.ts
│ ├── settingsParser.ts
│ ├── pluginParser.ts
│ ├── commandParser.ts
│ └── agentParser.ts
├── views/
│ ├── treeProvider.ts # TreeDataProvider
│ ├── treeItems.ts # TreeItem subclasses
│ └── webviewPanel.ts # Detail webview
└── commands/commands.ts # All registered commands
| |
