.claude/skills/codebase-navigator/SKILL.md
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.
npx skillsauth add dankofly/Swing_B2B codebase-navigatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Use this skill FIRST when exploring code, finding files, or understanding project structure.
Run the bundled scripts for common searches:
# 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/
When you need something the scripts don't cover:
# 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/
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 |
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)
./scripts/search.sh functions my_function
./scripts/search.sh components MyComponent
./scripts/search.sh classes MyClass
./scripts/search.sh types MyType
./scripts/search.sh usage my_function
./scripts/search.sh deps my_file.py
./scripts/trace.sh api-flow resumes
./scripts/trace.sh data-flow personalInfo
./scripts/trace.sh component-tree ResumeEditor
./scripts/search.sh api-routes
./scripts/search.sh config
./scripts/search.sh todos
| 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/ |
docs/agent/ before deep-diving into coderg --type py for Python, rg --glob '*.tsx' for React componentsapps/frontend/components/ for reusable UI patternsapps/backend/app/services/ for business logictools
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
development
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
development
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
development
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation