# AI Pair Programming — Working with Claude Code

<!-- hint:slides topic="AI pair programming: mental model, when AI helps vs struggles, prompting patterns, and the human-AI feedback loop" slides="5" -->

## Mental Model

Think of AI as a pair programmer: fast, knowledgeable, but without full context of your codebase, conventions, or constraints. You steer; the AI proposes. You verify; the AI iterates.

## When AI Helps vs When It Doesn't

### AI Excels At
- **Boilerplate** — repetitive setup, configs, scaffolding
- **Translating intent** — "add validation for email format" → code
- **Explaining** — "what does this regex do?"
- **Exploring options** — "show me three ways to implement X"
- **Fixing known patterns** — common bugs, linter fixes

### AI Struggles With
- **Project-specific context** — your naming, architecture, existing patterns
- **Live state** — what's running, current errors, env vars
- **Ambiguity** — "make it better" (better how?)
- **Multi-file refactors** — keeping the whole system consistent
- **Creative design** — you know the product; AI infers

## Effective Prompting Patterns

### Be Specific
❌ "Fix this function."  
✅ "This function should return null when `input` is empty; it currently throws. Also add a JSDoc."

### Provide Context
❌ "Write a React component."  
✅ "Write a React component for a user avatar. We use Tailwind, and `user` has `name` and `avatarUrl`. Match the pattern in `ProfileCard.jsx`."

### Show Examples
❌ "Use our API style."  
✅ "Follow this pattern: `const { data, error } = useApi('/users');` — same hook, different endpoint."

### Break Down Large Tasks
❌ "Build a full auth flow."  
✅ "Step 1: Add a login form component. Step 2: Wire it to the existing `auth.login` function. Step 3: Add error handling for invalid credentials."

## Iterating on Output

1. **Run and verify** — don't assume it works; run tests, try the flow
2. **Narrow feedback** — "The `fetch` URL is wrong; it should use `API_BASE` from config"
3. **Escalate gradually** — if the AI keeps missing, add more context or take over that part

## Reviewing AI-Generated Code

Treat it like any code review:

- **Correctness** — does it do what you asked?
- **Safety** — no hardcoded secrets, proper input validation
- **Fit** — matches your patterns, conventions, architecture
- **Maintainability** — clear, readable, not over-engineered

```javascript
// AI might produce this:
const key = "sk-12345";  // ❌ Never commit secrets

// You ensure:
const key = process.env.API_KEY;  // ✅ From env
```

## Claude Code Features

### Skills
Skills are reusable procedures. If your task matches a skill, invoke it: the agent follows the skill's steps. Example: `spec-writer`, `argus-integration`.

### Subagents
Heavy or parallel work can be delegated. The main agent coordinates; subagents focus on specific batches (e.g., screen customization, testing).

### MCP (Model Context Protocol)
Tools like Argus (testing), appxray (inspection), code search. Enable the right MCP for your task so the agent can inspect, test, and validate.

## When to Take Over Manually

- **Subtle bugs** — AI keeps proposing wrong fixes; you know the cause
- **Architecture decisions** — you own the design
- **Sensitive logic** — auth, billing, security-critical paths
- **Performance** — AI may not know your bottlenecks

## Human-AI Collaboration Loop

```mermaid
flowchart LR
    A[You: goal + context] --> B[AI: proposal]
    B --> C{You: verify}
    C -->|Pass| D[Ship it]
    C -->|Fail| E[You: specific feedback]
    E --> B
```

The loop tightens when feedback is **specific** and **iterative**. "Try again" rarely helps; "use `useCallback` here because the parent re-renders often" does.

---

## Key Takeaways

1. **You're the architect** — AI implements; you verify and integrate
2. **Context is king** — the more you give, the better the output
3. **Iterate with precision** — narrow, concrete feedback beats vague "fix this"
4. **Review everything** — AI code can have subtle bugs and security issues
5. **Know when to take over** — some work is yours to do