Claude Code Setup

This guide walks you through installing Claude Code and verifying it works with your Vibestacks project.

Prerequisites

• Node.js 18+ - Required to run Claude Code
• Anthropic API Key - Get one from console.anthropic.com
• Vibestacks Project - Already set up and running locally

Installation

npm install -g @anthropic-ai/claude-code

claude --version

claude auth

cd your-project
claude

> What database ORM does this project use?

Configuration Files

Vibestacks includes these pre-configured files in your project:

CLAUDE.md

The main context file at the root of your project. Contains:

• Available commands (pnpm dev, pnpm db:push, etc.)
• Project architecture and file structure
• Database schema information
• Authentication setup details
• Code conventions

Claude reads this file automatically when you start a session.

.claude/settings.json

Permissions configuration:

{
  "permissions": {
    "allow": [
      "Bash(pnpm dev)",
      "Bash(pnpm build)",
      "Bash(pnpm db:*)",
      "Bash(pnpm email)"
    ],
    "deny": [
      "Read(**/.env*)",
      "Read(**/node_modules/**)"
    ]
  }
}

This allows Claude to run common development commands without prompting you each time, while preventing access to sensitive files.

.claude/rules/

Modular coding standards that Claude follows:

• code-style.md - TypeScript conventions, imports, naming
• components.md - React patterns, Server vs Client components
• database.md - Drizzle queries, schema, migrations
• api.md - Route handlers, validation, error handling
• auth.md - Better Auth patterns
• stripe.md - Subscription handling

.claude/commands/

Custom slash commands for common tasks (see Commands).

Usage Tips

Starting a Session

Always start Claude Code from your project root:

cd your-vibestacks-project
claude

Effective Prompts

Be specific about what you want:

# Good - specific and clear
> Add a settings page at /dashboard/settings where users can update their name and email

# Less effective - vague
> Add settings

Multi-Step Tasks

For complex features, break them down:

> First, let's add a database table for team invitations.
> The table should have: inviter, invitee email, team ID, status, and expiration.

# After Claude creates the table...

> Now add an API route to create invitations. It should send an email using Resend.

# After the API is done...

> Finally, create a UI for the team admin to invite members.

Reviewing Changes

Claude will show you what it's about to do. Review the changes before accepting:

Claude: I'll create the following files:
- db/invitation.ts (schema)
- app/api/invitations/route.ts (API)
- components/emails/invitation.tsx (email template)

Proceed? [y/n]

Troubleshooting

"CLAUDE.md not found"

Make sure you're running claude from the project root directory where CLAUDE.md exists.

"Permission denied" errors

Check .claude/settings.json - you may need to add the command to the allow list.

Claude doesn't understand the project

Try running /init in Claude Code to refresh the project context:

> /init

Rate limiting

If you hit API rate limits, wait a few minutes or upgrade your Anthropic plan.

Next Steps

• Learn the Slash Commands - Use pre-built commands for common tasks
• Understand the Rules - See what patterns Claude follows
• Customize the Configuration - Adapt to your preferences