$ -weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code
-weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code
-weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code
claude --version
claude /doctor
claude --version
claude /doctor
claude --version
claude /doctor
mkdir my-first-project && cd my-first-project
-weight: 500;">git init
claude
mkdir my-first-project && cd my-first-project
-weight: 500;">git init
claude
mkdir my-first-project && cd my-first-project
-weight: 500;">git init
claude
Create a React app with TypeScript that displays a real-time cryptocurrency price dashboard. Use Vite for the build tool, Tailwind CSS for styling, and the CoinGecko free API for data. Include a search bar, favorites list, and auto-refresh every 30 seconds.
Create a React app with TypeScript that displays a real-time cryptocurrency price dashboard. Use Vite for the build tool, Tailwind CSS for styling, and the CoinGecko free API for data. Include a search bar, favorites list, and auto-refresh every 30 seconds.
Create a React app with TypeScript that displays a real-time cryptocurrency price dashboard. Use Vite for the build tool, Tailwind CSS for styling, and the CoinGecko free API for data. Include a search bar, favorites list, and auto-refresh every 30 seconds.
.claude/
├── CLAUDE.md # Project instructions (the big one)
├── settings.json # Claude Code configuration
├── settings.local.json # Local overrides (gitignored)
├── commands/ # Custom slash commands
│ ├── review.md # /review command
│ └── deploy.md # /deploy command
├── skills/ # Reusable capabilities
│ └── my-skill/
│ └── skill.md
└── rules/ # Constraints and patterns ├── no-any.md └── error-handling.md
.claude/
├── CLAUDE.md # Project instructions (the big one)
├── settings.json # Claude Code configuration
├── settings.local.json # Local overrides (gitignored)
├── commands/ # Custom slash commands
│ ├── review.md # /review command
│ └── deploy.md # /deploy command
├── skills/ # Reusable capabilities
│ └── my-skill/
│ └── skill.md
└── rules/ # Constraints and patterns ├── no-any.md └── error-handling.md
.claude/
├── CLAUDE.md # Project instructions (the big one)
├── settings.json # Claude Code configuration
├── settings.local.json # Local overrides (gitignored)
├── commands/ # Custom slash commands
│ ├── review.md # /review command
│ └── deploy.md # /deploy command
├── skills/ # Reusable capabilities
│ └── my-skill/
│ └── skill.md
└── rules/ # Constraints and patterns ├── no-any.md └── error-handling.md
# Project: CryptoDash
Architecture
- React 18 + TypeScript + Vite
- State management: Zustand (NOT Redux — we migrated away in v2.1)
- API layer: TanStack Query with custom hooks in src/hooks/api/
- Styling: Tailwind CSS with custom design tokens in tailwind.config.ts
Conventions
- All components use named exports (not default exports)
- API hooks follow the pattern: useGet{Resource}, useMutate{Resource}
- Error boundaries wrap every route-level component
- Tests colocate with source: Component.tsx → Component.test.tsx
Do NOT
- Use any type — use unknown with type guards instead
- Import from barrel files (index.ts) in the same package
- Add dependencies without checking bundle size impact first
# Project: CryptoDash
Architecture
- React 18 + TypeScript + Vite
- State management: Zustand (NOT Redux — we migrated away in v2.1)
- API layer: TanStack Query with custom hooks in src/hooks/api/
- Styling: Tailwind CSS with custom design tokens in tailwind.config.ts
Conventions
- All components use named exports (not default exports)
- API hooks follow the pattern: useGet{Resource}, useMutate{Resource}
- Error boundaries wrap every route-level component
- Tests colocate with source: Component.tsx → Component.test.tsx
Do NOT
- Use any type — use unknown with type guards instead
- Import from barrel files (index.ts) in the same package
- Add dependencies without checking bundle size impact first
# Project: CryptoDash
Architecture
- React 18 + TypeScript + Vite
- State management: Zustand (NOT Redux — we migrated away in v2.1)
- API layer: TanStack Query with custom hooks in src/hooks/api/
- Styling: Tailwind CSS with custom design tokens in tailwind.config.ts
Conventions
- All components use named exports (not default exports)
- API hooks follow the pattern: useGet{Resource}, useMutate{Resource}
- Error boundaries wrap every route-level component
- Tests colocate with source: Component.tsx → Component.test.tsx
Do NOT
- Use any type — use unknown with type guards instead
- Import from barrel files (index.ts) in the same package
- Add dependencies without checking bundle size impact first
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "command", "command": "npx prettier --write \"$CLAUDE_FILE_PATH\"" } ] } ] }
}
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "command", "command": "npx prettier --write \"$CLAUDE_FILE_PATH\"" } ] } ] }
}
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "command", "command": "npx prettier --write \"$CLAUDE_FILE_PATH\"" } ] } ] }
}
{ "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "echo 'Blocked: no direct DB access in production'", "if": "echo $CLAUDE_TOOL_INPUT | grep -q 'psql.*prod'" } ] } ] }
}
{ "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "echo 'Blocked: no direct DB access in production'", "if": "echo $CLAUDE_TOOL_INPUT | grep -q 'psql.*prod'" } ] } ] }
}
{ "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "echo 'Blocked: no direct DB access in production'", "if": "echo $CLAUDE_TOOL_INPUT | grep -q 'psql.*prod'" } ] } ] }
}
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "prompt", "prompt": "Review this file change for security vulnerabilities. If you find any, return BLOCK. If safe, return ALLOW.", "model": "claude-haiku-4" } ] } ] }
}
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "prompt", "prompt": "Review this file change for security vulnerabilities. If you find any, return BLOCK. If safe, return ALLOW.", "model": "claude-haiku-4" } ] } ] }
}
{ "hooks": { "PostToolUse": [ { "matcher": "Write", "hooks": [ { "type": "prompt", "prompt": "Review this file change for security vulnerabilities. If you find any, return BLOCK. If safe, return ALLOW.", "model": "claude-haiku-4" } ] } ] }
}
{ "autoFix": { "enabled": true, "github": { "ciChecks": ["test", "lint", "typecheck", "build"], "maxAttempts": 3, "branchPattern": "feat/*" } }
}
{ "autoFix": { "enabled": true, "github": { "ciChecks": ["test", "lint", "typecheck", "build"], "maxAttempts": 3, "branchPattern": "feat/*" } }
}
{ "autoFix": { "enabled": true, "github": { "ciChecks": ["test", "lint", "typecheck", "build"], "maxAttempts": 3, "branchPattern": "feat/*" } }
}
name: Claude Auto-Fix
on: check_suite: types: [completed] jobs: autofix: if: github.event.check_suite.conclusion == 'failure' runs-on: ubuntu-latest steps: - uses: anthropic/claude-code-action@v1 with: mode: auto-fix max-attempts: 3
name: Claude Auto-Fix
on: check_suite: types: [completed] jobs: autofix: if: github.event.check_suite.conclusion == 'failure' runs-on: ubuntu-latest steps: - uses: anthropic/claude-code-action@v1 with: mode: auto-fix max-attempts: 3
name: Claude Auto-Fix
on: check_suite: types: [completed] jobs: autofix: if: github.event.check_suite.conclusion == 'failure' runs-on: ubuntu-latest steps: - uses: anthropic/claude-code-action@v1 with: mode: auto-fix max-attempts: 3
Main Agent (Opus 4.6)
├── Subagent 1: "Implement the API endpoints" (Opus)
├── Subagent 2: "Write tests for the API" (Sonnet)
├── Subagent 3: "Update documentation" (Haiku)
└── Subagent 4: "Review all changes" (Opus)
Main Agent (Opus 4.6)
├── Subagent 1: "Implement the API endpoints" (Opus)
├── Subagent 2: "Write tests for the API" (Sonnet)
├── Subagent 3: "Update documentation" (Haiku)
└── Subagent 4: "Review all changes" (Opus)
Main Agent (Opus 4.6)
├── Subagent 1: "Implement the API endpoints" (Opus)
├── Subagent 2: "Write tests for the API" (Sonnet)
├── Subagent 3: "Update documentation" (Haiku)
└── Subagent 4: "Review all changes" (Opus)
-weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code
-weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code
-weight: 500;">npm -weight: 500;">install -g @anthropic-ai/claude-code - Node.js 18+ (Claude Code is an -weight: 500;">npm package)
- An Anthropic account with a Max subscription ($100/month for unlimited Opus 4.6) or Pro ($20/month with Sonnet 4.5 and limited Opus)
- A terminal — macOS Terminal, iTerm2, Windows Terminal, or any Linux terminal
- Git installed and configured - Plan — outline the architecture and file structure
- Scaffold — create package.json, vite.config.ts, tsconfig.json, Tailwind config
- Implement — write components, hooks, API integration, types
- Configure — set up routing, environment variables, dev scripts
- Test — run the dev server to verify everything works - ~/.claude/CLAUDE.md — Global instructions (your personal coding style, always applied)
- ./CLAUDE.md or ./.claude/CLAUDE.md — Project root (team-shared, committed to -weight: 500;">git)
- ./src/CLAUDE.md — Directory-specific (instructions for specific parts of the codebase) - Scheduled maintenance — "Every Monday at 9 AM, audit dependencies and open PRs for outdated packages"
- Event-driven workflows — "When a new issue is labeled bug, create a branch, investigate, and open a draft PR"
- Continuous documentation — "After every merge to main, -weight: 500;">update the API docs and changelog" - Write Your CLAUDE.md Before Writing Code — 15 minutes saves hours.
- Use /compact Strategically — Run it when Claude starts making mistakes.
- Start Conversations with Context — Reference specific files and patterns.
- Git Commit Frequently — Gives you rollback points.
- Trust But Verify — Always review the diff before merging.
- Use the Right Model for the Job — Opus for architecture, Sonnet for features, Haiku for docs.
- Hooks Are Your Guardrails — PreToolUse to block, PostToolUse to format, Notification to alert.
