Install, authenticate, and use Claude Code CLI as a native coding tool for any OpenClaw agent system.
SKILL.md
Skill: Claude Code CLI for OpenClaw
Description
This skill teaches OpenClaw agents how to install, authenticate, configure, and use Claude Code CLI as a coding tool. Claude Code is an official Anthropic CLI that provides file-based context efficiency, reducing token usage by 80-90% compared to raw API calls for coding tasks.
Key Benefits:
Token Efficiency: ~500 tokens per task vs 10k-50k with raw API (Claude Code reads files via tools instead of dumping full content into context)
Flat-Rate Billing: Uses Claude Max subscription (OAuth), not per-token API billing
Verify in gateway logs or test by spawning a coding session.
Available Models
claude-cli/sonnet-4.6 → Claude Sonnet 4.6 (fast, general coding)
claude-cli/opus-4.6 → Claude Opus 4.6 (complex reasoning, architecture)
Use as primary model, fallback, or invoke directly via exec.
Project Setup (CLAUDE.md)
Critical: Every project using Claude Code should have a CLAUDE.md file in its root directory. This is the "project brain" — Claude Code reads it automatically at session start.
## Key Files
- `src/App.tsx` - Main app component, routing
- `src/lib/supabase.ts` - Database client
- `supabase/functions/` - Edge functions (24 total)
## Coding Standards
- Use TypeScript strict mode
- Functional components (React)
- Tailwind CSS for styling
- ESLint + Prettier configured
## Deployment
- Platform: Netlify (frontend), Supabase (backend)
- Deploy command: `npm run build`
- Environment: `.env.local` (never commit)
## Critical Rules
- Never commit API keys
- Always run `npm run build` before pushing
- All functions must have TypeScript types
## Testing
- `npm test` - Run Jest tests
- `npm run lint` - Check code style
Template Usage
Copy the provided template and customize:
cp /root/.openclaw/workspace/skills/claude-code/templates/CLAUDE.md.template /path/to/your/project/CLAUDE.md
# Edit with project-specific details
Real Example
For MissionDeck project, we created:
/root/.openclaw/workspace/missiondeck/CLAUDE.md
Result: Claude Code instantly knew: 24 edge functions, signup flow, all routes, coding standards
Zero extra context needed in prompts
Agent Workflow
Daily Coding Workflow
Step 1: Sync Project
cd /path/to/project
git pull origin main
Step 2: Run Claude Code with Task
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Fix the signup redirect bug in src/pages/AuthVerify.tsx — users aren't being redirected to /dashboard after magic link verification"
Step 3: Review Proposed Changes
Claude Code will:
Search the codebase
Identify affected files
Propose changes with diffs
Explain reasoning
Step 4: Build Check
npm run build # or npm test, cargo build, etc.
Step 5: Commit and Push
git checkout -b agent/fix-signup-redirect
git add .
git commit -m "fix: redirect to /dashboard after magic link verification"
git push origin agent/fix-signup-redirect
exec({
command: `cd /path/to/project && CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Your task here"`,
workdir: "/path/to/project",
pty: false // PTY not needed for --print mode
})
Subagent Spawn Pattern (Future)
Once ACP harness is configured:
sessions_spawn({
runtime: "acp",
agentId: "claude-code",
message: "Fix the navbar bug in components/Navbar.tsx",
label: "claude-code-navbar-fix"
})
Prompting Patterns
Effective prompts yield better results. Here are proven patterns:
1. Plan-First Approach
"Show me your plan first. List every file you'll touch and what changes you'll make. Wait for my approval before implementing."
Why: Prevents unwanted changes, gives you control
2. Challenge Mode
"Fix the authentication bug. After you're done, grill yourself — what edge cases did you miss? What could break?"
Why: Forces deeper reasoning, catches edge cases
3. RPI Workflow (Research → Plan → Implement)
For complex tasks, use 3 separate prompts:
Prompt 1 (Research):
"Research how the payment flow works. Show me all relevant files and how they connect."
Prompt 2 (Plan):
"Now plan how to add recurring billing. List the changes step-by-step."
Prompt 3 (Implement):
"Implement the plan. Make the changes."
Why: Breaks complexity into manageable phases
4. Precise Specifications
"In src/pages/AuthVerify.tsx, line 42, the redirect after magic link verification is broken. Expected behavior: redirect to /dashboard. Current behavior: stays on /verify. Fix it."
Why: Clear context = precise fixes
5. File-Focused Tasks
"Refactor src/lib/database.ts — extract the connection pool logic into a separate file src/lib/db-pool.ts"
Why: Claude Code excels at file-level operations
Anti-Patterns (Avoid These)
❌ Vague: "Make the app better"
❌ No context: "Fix the bug"
❌ Too broad: "Rewrite the entire codebase"
❌ Missing paths: "Update the config file" (which one?)
✅ Specific: "Fix the redirect bug in src/pages/AuthVerify.tsx — users should go to /dashboard after email verification"
✅ Scoped: "Refactor the authentication logic in src/lib/auth.ts to use async/await instead of promises"
✅ Clear paths: "Update the database connection pool size in src/config/database.ts from 10 to 20"
Why Claude Code vs Raw API
Token Usage Comparison
Method
Tokens per Task
Cost Model
Raw API (full file dump)
10,000 - 50,000
Per-token ($)
Claude Code (tool-based)
~500
Flat-rate (Claude Max subscription)
Savings: 80-90% reduction in token usage
How It Works
Raw API Approach:
User: "Fix the bug in App.tsx"
Agent: [reads entire App.tsx] [dumps 5,000 tokens into context] [generates fix] [writes back]
Cost: ~7,000 tokens
Claude Code Approach:
User: "Fix the bug in App.tsx"
Claude Code: [uses file tool to read App.tsx] [analyzes in isolation] [generates fix] [uses edit tool]
Cost: ~500 tokens
Result: Same quality, 90% fewer tokens, flat-rate billing
Code Quality Benefits
Codebase Exploration: Claude Code searches files, understands structure
Precise Edits: Tool-based editing, not regex replacement
Context Awareness: Reads CLAUDE.md automatically, no prompt overhead
Multi-file Operations: Handles imports, dependencies across files
Real-World Example
Task
"Remove the offer/discount banner from MissionDeck navbar"
Process
Claude Code Execution:
cd /root/.openclaw/workspace/missiondeck
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Remove the discount banner from the navbar"
What Happened:
Claude Code searched codebase for "banner", "discount", "navbar"
Found DiscountBanner component in src/components/Navbar.tsx
Identified exactly 2 changes needed:
Remove import { DiscountBanner } from './DiscountBanner'
cd /path/to/project
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "your task"
Issue: Changes not applied
Cause: Claude Code proposes changes, but requires approval in interactive mode
Fix: Use --print flag for non-interactive mode (outputs to stdout)
claude --print "your task" # No approval needed, just shows output
For interactive mode (approval required):
claude # Interactive, will wait for y/n approval
Advanced Usage
Batch Operations
Process multiple tasks sequentially:
cd /path/to/project
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Task 1: Fix auth bug"
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Task 2: Add new endpoint"
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Task 3: Update tests"
Model Selection
Force specific model:
claude --model opus-4.6 --print "Complex architecture refactor"
claude --model sonnet-4.6 --print "Quick bug fix"
Integration with Git Workflow
# Create feature branch
git checkout -b feature/claude-code-implementation
# Run Claude Code
CLAUDE_CODE_OAUTH_TOKEN=$CLAUDE_CODE_OAUTH_TOKEN claude --print "Implement feature X"
# Review changes
git diff
# Commit
git add .
git commit -m "feat: implement X using claude-code"
# Push
git push origin feature/claude-code-implementation
