Claude Code Deep Dive

# Install Claude Code globally
npm install -g @anthropic-ai/claude-code

# Navigate to any project and start
cd my-project
claude

# Or start with a specific task
claude "add a dark mode toggle to the settings page"

# Project CLAUDE.md

## Stack
- Next.js 15, TypeScript, Tailwind v4
- Motion for animations (import from "motion/react")
- localStorage for game state — no backend

## Rules
- Use context7 to check API docs before writing code
- All game state in localStorage
- Never commit .env files
- Use cn() from utils for className composition
- Icons: lucide-react exclusively

## File Structure
- app/ — Next.js pages
- components/ui/ — reusable components
- lib/ — utilities, types, game state
- lib/data/ — game content data files

# .claude/skills/component.md
# Skill: /component

When creating a new React component:
1. Create the file in components/ui/ or components/game/ as appropriate
2. Use TypeScript with explicit prop interfaces
3. Use cn() for className composition
4. Add keyboard support and focus-visible states
5. Export the component as a named export
6. Use Motion for any animations (import from "motion/react")

# Install community plugins
claude plugins:add superpowers
claude plugins:add compound-engineering

# Superpowers plugin provides workflow skills:
# - brainstorming — explore design before writing code
# - writing-plans — create step-by-step implementation plans
# - executing-plans — follow plans with review checkpoints
# - systematic-debugging — diagnose before fixing
# - verification-before-completion — verify work before declaring done

# Compound Engineering plugin provides review agents:
# - code-reviewer — general code review
# - security-sentinel — security-focused review
# - performance-oracle — performance analysis
# - architecture-strategist — architectural review

// .claude/settings.json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx tsc --noEmit 2>&1 | head -5"
      },
      {
        "matcher": "Write|Edit",
        "command": "npx eslint --fix --quiet $(git diff --name-only) 2>&1 | head -10"
      }
    ],
    "PreToolUse": [
      {
        "matcher": "Bash",
        "command": "echo 'Running shell command...'"
      }
    ]
  }
}

# Pattern: Main agent decomposes and delegates

# 1. Main agent analyzes the plan
claude "Read docs/plan.md and list all independent tasks"

# 2. Launch parallel subagents for independent work
claude --background "Create the UserProfile component per the spec in docs/plan.md"
claude --background "Add the /api/users endpoint per the spec in docs/plan.md"
claude --background "Write unit tests for the auth module per the spec in docs/plan.md"

# 3. Main agent reviews results when subagents finish
claude "Review the changes from recent commits and check for integration issues"

// .claude/settings.json — MCP server configuration
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token-here"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/dir"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

# The Claude Code Best Practices Cycle:
#
# 1. CLAUDE.md    — Define your project context and rules
#       |
# 2. Skills       — Encode your workflows as reusable templates
#       |
# 3. Hooks        — Automate quality gates on every change
#       |
# 4. Review       — Use review agents to catch issues
#       |
# 5. Update       — Feed learnings back into CLAUDE.md
#       |
#    (repeat)
#
# Each cycle makes Claude smarter about YOUR project.