context-builder

Context Builder

When to use this skill

• Starting work on an unfamiliar codebase or module
• Before implementing a feature that spans multiple files
• When you need to understand existing patterns before writing code
• Before refactoring to avoid breaking implicit contracts
• When onboarding to a new project area

Step 1: Project Structure

Understand the high-level layout:

# Top-level structure
ls -la

# Directory tree (2 levels, excluding noise)
find . -maxdepth 2 -not -path '*/node_modules/*' -not -path '*/.git/*' -not -path '*/dist/*' | head -60

# Package manager and scripts
cat package.json | head -40

Key things to note:

• Monorepo vs single package
• Build system (webpack, vite, esbuild, tsc)
• Test framework (jest, vitest, mocha)
• Available scripts (lint, format, test, build)

Step 2: Dependencies

# Key dependencies
cat package.json | grep -A 30 '"dependencies"'

# Dev dependencies (reveals tooling choices)
cat package.json | grep -A 30 '"devDependencies"'

Identify:

• Framework (React, Vue, Express, Fastify, etc.)
• ORM/database (Prisma, TypeORM, Drizzle, etc.)
• Validation (Zod, Joi, Yup, etc.)
• State management (Redux, Zustand, etc.)
• Testing tools (Jest, Vitest, Playwright, etc.)

Step 3: Configuration

Read configuration files to understand project conventions:

• tsconfig.json — TypeScript settings, path aliases
• .eslintrc / eslint.config.js — Linting rules
• .prettierrc — Formatting rules
• .env.example — Required environment variables
• CLAUDE.md / LOCUS.md — AI agent instructions

Step 4: Patterns

Before writing new code, find existing patterns:

# How are API routes structured?
grep -r "router\.\|app\.\(get\|post\|put\|delete\)" --include="*.ts" -l

# How are components organized?
find src/components -name "*.tsx" -maxdepth 2

# How are tests structured?
find . -name "*.test.*" -o -name "*.spec.*" | head -20

# How are types/interfaces defined?
grep -r "^export interface\|^export type" --include="*.ts" -l | head -10