/initialize-web

name: initialize-web
description: "Manual override: initialize ast-index for TypeScript/JavaScript web project"

Initialize ast-index for Web Project

This command sets up ast-index integration for TypeScript/JavaScript web projects (React, Vue, Svelte, Angular, NestJS, etc.).

Steps to Execute

1. Check Prerequisites

Verify ast-index is installed:

ast-index version

If not installed, inform user to run:

brew tap defendend/ast-index
brew install ast-index

2. Create/Update .claude/settings.json

First, ensure the directory exists:

mkdir -p .claude

Then create or merge into `.claude/settings.json`. If file doesn't exist, create it with this content:

{
  "extraKnownMarketplaces": {
    "ast-index": {
      "source": {
        "source": "github",
        "repo": "defendend/Claude-ast-index-search"
      }
    }
  },
  "enabledPlugins": {
    "ast-index@ast-index": true
  },
  "permissions": {
    "allow": [
      "Bash(ya tool ast-index *)",
      "Bash(ast-index *)"
    ]
  }
}

**Important**: If `.claude/settings.json` already exists, MERGE the keys (don't replace the whole file).

3. Create .claude/rules/ast-index.md (CRITICAL)

Create the rules directory and ast-index rules file:

mkdir -p .claude/rules

Create file `.claude/rules/ast-index.md` with this content:

# ast-index Rules

## Mandatory Search Rules

1. **ALWAYS use ast-index FIRST** for any code search task
2. **NEVER duplicate results** — if ast-index found usages/implementations, that IS the complete answer
3. **DO NOT run grep "for completeness"** after ast-index returns results
4. **Use grep/Search ONLY when:**
   - ast-index returns empty results
   - Searching for regex patterns (ast-index uses literal match)
   - Searching for string literals inside code (`"some text"`)
   - Searching in comments content

## Why ast-index

ast-index is 17-69x faster than grep (1-10ms vs 200ms-3s) and returns structured, accurate results.

## Command Reference

| Task | Command | Time |
|------|---------|------|
| Universal search | `ast-index search "query"` | ~10ms |
| Find class/component | `ast-index class "ComponentName"` | ~1ms |
| Find symbol | `ast-index symbol "SymbolName"` | ~1ms |
| Find usages | `ast-index usages "SymbolName"` | ~8ms |
| Find implementations | `ast-index implementations "Interface"` | ~5ms |
| Call hierarchy | `ast-index call-tree "function" --depth 3` | ~1s |
| Find callers | `ast-index callers "functionName"` | ~1s |
| Module deps | `ast-index deps "module-name"` | ~10ms |
| File outline | `ast-index outline "File.tsx"` | ~1ms |

## TypeScript/JavaScript-Specific Commands

| Task | Command |
|------|---------|
| Find React components | `ast-index class "Component"` |
| Find React hooks | `ast-index search "use" --kind function` |
| Find decorators | `ast-index search "@Controller"` |
| Find interfaces | `ast-index class "Props"` |
| Find types | `ast-index symbol "DTO"` |

## Index Management

- `ast-index rebuild` — Full reindex (run once after clone)
- `ast-index update` — After git pull/merge
- `ast-index stats` — Show index statistics

4. Build the Index

Run initial indexing:

ast-index rebuild

Show progress and report statistics when done.

5. Verify Setup

Run a quick search to verify everything works:

ast-index stats
ast-index search "Component"

Output

After completion, inform user:

• settings.json has been configured with ast-index permissions
• Rules file created at .claude/rules/ast-index.md
• Index has been built with X files and Y symbols
• Ready to use ast-index for code search

Supported File Types

This initialization supports:

• `.ts`, `.tsx`, `.mts` - TypeScript (including React TSX and ES modules)
• `.js`, `.jsx` - JavaScript (including React JSX)
• `.mjs`, `.cjs` - ES modules and CommonJS
• `.vue` - Vue Single File Components
• `.svelte` - Svelte components

Framework Detection

After indexing, you can detect the framework:

# Check for React
ast-index search "useState" --kind function

# Check for Vue
ast-index search "defineComponent"

# Check for Svelte
ast-index search "export let"

# Check for NestJS
ast-index search "@Controller"

# Check for Angular
ast-index search "@Component"