Claude Code Setup für moderne Webprojekte

Claude Code ist eines der mächtigsten Tools für KI-unterstütztes Programmieren. Dieser Guide zeigt dir, wie du es optimal für Web-Entwicklung einrichtest.

Installation & Grundsetup

1. Editor-Integration

Claude Code funktioniert am besten mit:

• VS Code: Official Extension verfügbar
• Cursor: Native Integration
• JetBrains IDEs: Plugin in Beta

Für diesen Guide fokussieren wir auf VS Code.

code --install-extension anthropic.claude-code

2. API-Key konfigurieren

1. Gehe zu console.anthropic.com
2. Erstelle einen neuen API Key
3. In VS Code: Cmd/Ctrl + Shift + P → "Claude Code: Set API Key"
4. Key einfügen und bestätigen

3. Workspace-Einstellungen

Erstelle .vscode/settings.json in deinem Projekt:

{
  "claude.maxTokens": 4096,
  "claude.temperature": 0.7,
  "claude.autoSuggest": true,
  "claude.contextWindow": "large",
  "claude.codeStyle": {
    "typescript": {
      "semicolons": true,
      "quotes": "single",
      "trailingComma": "es5"
    },
    "react": {
      "componentStyle": "functional",
      "stateManagement": "hooks"
    }
  }
}

Projekt-spezifische Konfiguration

Next.js Projekte

Erstelle .claude/project.md im Root:

# Projekt: [Projektname]

## Tech Stack
- Next.js 13+ (App Router)
- TypeScript
- Tailwind CSS
- shadcn/ui Components

## Code-Konventionen
- Functional Components mit TypeScript
- 'use client' für client-side Hooks
- Server Components als Default
- Absolute Imports mit @ alias

## Architektur
- /app: Next.js App Router Pages
- /components: Wiederverwendbare UI Components
- /lib: Utility Functions & Helpers
- /types: TypeScript Definitions

## Best Practices
- Type-Safety überall
- Props mit Interfaces definieren
- Comments nur wo nötig
- DRY Prinzip befolgen

React + TypeScript

Für reine React-Projekte:

# Projekt: [Projektname]

## Stack
- React 18+
- TypeScript 5+
- Vite
- React Router

## Patterns
- Custom Hooks für Logic
- Context für globalen State
- Compound Components wo sinnvoll
- Controlled Components bevorzugen

## Testing
- Vitest für Unit Tests
- React Testing Library
- E2E mit Playwright

Claude optimal nutzen

Effektive Prompts

❌ Schlecht:

Mach eine Komponente

✅ Gut:

Erstelle eine TypeScript React Component für ein User Profile Card.
Props: user (name, email, avatar), onEdit callback.
Style: Tailwind CSS, card layout, responsive.
Include hover effects und loading state.

Context Management

Claude versteht deinen Code besser, wenn du Kontext gibst:

Befehle:

• @file - Spezifische Datei referenzieren
• @folder - Ganzen Ordner einbeziehen
• @terminal - Terminal-Output teilen
• @browser - Screenshot oder URL teilen

Beispiel:

@file app/page.tsx
Füge eine neue Section für Featured Posts hinzu.
Style sollte konsistent mit bestehenden Sections sein.

Workflow-Patterns

1. Neue Features

1. Brief: Feature beschreiben mit Requirements
2. Plan: Claude um Implementierungsplan bitten
3. Review: Plan absegnen oder anpassen
4. Implement: Schrittweise umsetzen lassen
5. Test: Tests schreiben lassen
6. Refine: Iterieren bis zufrieden

2. Debugging

1. Error teilen: @terminal oder Error Message
2. Context: @file der betroffenen Datei
3. Analyze: Claude um Diagnose bitten
4. Fix: Lösung implementieren
5. Verify: Testen ob behoben

3. Refactoring

1. Target: Code identifizieren
2. Goal: Refactoring-Ziel beschreiben
3. Constraints: Bestehende Funktionalität bewahren
4. Execute: Refactoring durchführen
5. Test: Alles noch funktioniert

Erweiterte Features

Custom Instructions

Erstelle .claude/instructions.md für projektweite Rules:

# Global Instructions

## Code Style
- Immer TypeScript
- Prefer const über let
- Async/await statt Promises
- Early returns für bessere Lesbarkeit

## Components
- Props Interface immer exportieren
- Destructure Props im Parameter
- Default exports für Components
- Named exports für Utils

## Performance
- React.memo für teure Components
- useMemo für teure Berechnungen
- Lazy Loading für große Components

Snippets & Templates

Definiere oft genutzte Patterns:

# Component Template

\`\`\`typescript
interface [Name]Props {
  // props
}

export function [Name]({ /* props */ }: [Name]Props) {
  // component logic

  return (
    // jsx
  );
}
\`\`\`

Claude wird diese Templates respektieren und nutzen.

Troubleshooting

Claude versteht Kontext nicht

Problem: Antworten sind zu generisch Lösung: Mehr Context geben mit @file, @folder

Inkonsistenter Code-Stil

Problem: Code folgt nicht deinen Conventions Lösung: .claude/project.md mit expliziten Style-Rules

Zu langsam

Problem: Responses dauern lange Lösung: Kleinere Context Windows, spezifischere Prompts

Rate Limits

Problem: "Too many requests" Lösung: Pause einlegen, oder API-Tier upgraden

Best Practices

1. Start clean: Neues Feature = neuer Chat Context
2. Be specific: Vage Prompts = vage Results
3. Iterate: Selten beim ersten Mal perfekt
4. Review always: KI-Code immer prüfen
5. Learn patterns: Erfolgreiche Prompts dokumentieren

Integration mit anderen Tools

Mit Git

Claude kann:

• Commit Messages generieren
• PR Descriptions schreiben
• Code Reviews durchführen

@terminal git diff
Erstelle eine aussagekräftige Commit Message für diese Changes.

Mit Testing

@file components/Button.tsx
Erstelle umfassende Tests mit React Testing Library.
Coverage: Props, Events, Edge Cases, Accessibility.

Mit Documentation

@folder lib/
Erstelle eine README.md mit Dokumentation für alle Utils.
Include: Purpose, Parameters, Return Values, Examples.

Nächste Schritte

1. Setup durchführen
2. Erstes Feature mit Claude bauen
3. Eigene Patterns entwickeln
4. Im Forum teilen und lernen

Happy Coding mit Claude! 🚀