home / skills / srbhr / resume-matcher / codebase-navigator

codebase-navigator skill

/.agents/skills/codebase-navigator

This skill helps you navigate and understand a TypeScript codebase using fast search, trace, and architecture insights to accelerate onboarding.

npx playbooks add skill srbhr/resume-matcher --skill codebase-navigator

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
4.9 KB
---
name: codebase-navigator
description: |
  Navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. Find functions, classes, components, API endpoints, trace data flows, and understand architecture. Use FIRST when exploring code, finding files, or understanding project structure.
metadata:
  author: resume-matcher
  version: "1.0.0"
allowed-tools: Bash(rg:*) Bash(ack:*) Bash(grep:*) Bash(find:*) Bash(tree:*) Read
---

# Codebase Navigator

> **Use this skill FIRST** when exploring code, finding files, or understanding project structure.

## Quick Start

### Search scripts (preferred)

Run the bundled scripts for common searches:

```bash
# Find functions/methods
./scripts/search.sh functions <pattern>

# Find React components
./scripts/search.sh components <pattern>

# Find API endpoints
./scripts/search.sh endpoints

# Trace an API flow end-to-end
./scripts/trace.sh api-flow <endpoint>

# Trace a data field from backend to UI
./scripts/trace.sh data-flow <field_name>

# Find component hierarchy
./scripts/trace.sh component-tree <ComponentName>
```

Scripts are at: `.agents/skills/codebase-navigator/scripts/`

### Direct ripgrep patterns

When you need something the scripts don't cover:

```bash
# 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'

# Type definitions
rg --no-heading -n '(type|interface) MyType' apps/frontend/ --glob '*.ts'

# 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

# Imports of a module
rg --no-heading -n 'from.*my_module.*import|import.*my_module' apps/
```

## Architecture Overview

Read these docs for full understanding:

| Need | Document |
|------|----------|
| Backend architecture | `docs/agent/architecture/backend-architecture.md` |
| Frontend architecture | `docs/agent/architecture/frontend-architecture.md` |
| API contracts | `docs/agent/apis/front-end-apis.md` |
| API flow maps | `docs/agent/apis/api-flow-maps.md` |
| Full doc index | `docs/agent/README.md` |

## Project Layout

```
apps/
├── backend/app/
│   ├── main.py              # FastAPI entry, CORS, routers
│   ├── config.py            # Pydantic settings from env
│   ├── database.py          # TinyDB wrapper
│   ├── llm.py               # LiteLLM wrapper (multi-provider AI)
│   ├── routers/             # API endpoints
│   │   ├── config_router.py # GET/PUT /api/v1/config
│   │   ├── health_router.py # GET /api/v1/health
│   │   ├── resume_router.py # CRUD /api/v1/resumes
│   │   └── jobs_router.py   # CRUD /api/v1/jobs
│   ├── services/            # Business logic
│   │   ├── parser.py        # Resume parsing
│   │   └── improver.py      # AI resume improvement
│   ├── schemas/             # Pydantic request/response models
│   └── prompts/             # LLM prompt templates
│
└── frontend/
    ├── app/                 # Next.js pages (dashboard, builder, tailor, print)
    ├── components/          # Reusable UI components
    ├── lib/                 # API client, utilities, i18n
    ├── hooks/               # Custom React hooks
    └── messages/            # i18n translations (en, es, zh, ja)
```

## Common Search Workflows

### "Where is X defined?"
```bash
./scripts/search.sh functions my_function
./scripts/search.sh components MyComponent
./scripts/search.sh classes MyClass
./scripts/search.sh types MyType
```

### "What calls X?"
```bash
./scripts/search.sh usage my_function
./scripts/search.sh deps my_file.py
```

### "How does data flow for feature X?"
```bash
./scripts/trace.sh api-flow resumes
./scripts/trace.sh data-flow personalInfo
./scripts/trace.sh component-tree ResumeEditor
```

### "What API routes exist?"
```bash
./scripts/search.sh api-routes
```

### "What environment config is used?"
```bash
./scripts/search.sh config
```

### "What needs fixing?"
```bash
./scripts/search.sh todos
```

## Key Entry Points

| What | File |
|------|------|
| Backend startup | `apps/backend/app/main.py` |
| Frontend pages | `apps/frontend/app/` |
| API client | `apps/frontend/lib/api.ts` or `lib/api-client.ts` |
| Design tokens | `apps/frontend/app/globals.css` |
| Resume schemas | `apps/backend/app/schemas/` |
| LLM prompts | `apps/backend/app/prompts/` |

## Tips

- Always check `docs/agent/` before deep-diving into code
- Use `rg --type py` for Python, `rg --glob '*.tsx'` for React components
- When tracing a feature, start from the API route and follow imports
- Check `apps/frontend/components/` for reusable UI patterns
- Check `apps/backend/app/services/` for business logic

Overview

This skill helps you navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. It speeds up finding functions, components, API endpoints, and tracing data flows so you can map architecture and implement changes faster. Use this skill FIRST when exploring files or understanding project structure.

How this skill works

Built around small search and trace scripts plus recommended ripgrep patterns, the skill locates definitions, usages, and route handlers across the monorepo. It guides you to entry points (backend startup, frontend pages, API client) and documentation pages for architecture and API contracts so you can follow imports and data flows end-to-end. Scripts live under .agents/skills/codebase-navigator/scripts/ and cover common queries like functions, components, endpoints, and trace flows.

When to use it

  • Exploring the repository for the first time to find where features live
  • Locating a function, class, type, or React component definition quickly
  • Tracing an API endpoint from route to frontend usage
  • Following a data field from backend schemas to UI components
  • Listing API routes or scanning for TODOs and config usage

Best practices

  • Run the bundled scripts first for common tasks (functions, components, endpoints, traces)
  • Use ripgrep patterns for targeted or custom searches not covered by scripts
  • Start traces at API routes and follow imports into services and frontend layers
  • Consult docs/agent/ architecture and API contract docs before deep dives
  • Prefer repository root search paths (apps/) to limit noise

Example use cases

  • Find where resume parsing logic is implemented (apps/backend/app/services/parser.py) and trace how parsed fields map to frontend forms
  • Locate a React component and the pages that render it using components and component-tree scripts
  • Discover all API endpoints under apps/backend/app/routers/ and inspect the Pydantic schemas in apps/backend/app/schemas/
  • Trace how a UI field (personalInfo) flows from backend schema to API to frontend form
  • Search for TODO comments or environment config keys before refactoring or deploying

FAQ

Where are the main architecture docs?

See docs/agent/ for backend-architecture.md, frontend-architecture.md, API flow maps, and API contract docs.

What search tool should I use?

Use the included scripts first; use ripgrep (rg) with the provided patterns for more control.