Zum Hauptinhalt springen

CLAUDE.md Suprematie

Was ist CLAUDE.md?​

CLAUDE.md ist Claude Codes zentrale Konfigurationsdatei, die sich im Projektverzeichnis befindet. Sie fungiert wie ein Projekthandbuch für Claude und definiert den Projektkontext, Regeln, Konventionen und Erwartungen.

Dies ist nicht nur eine Konfigurationsdatei, sondern eine Brücke für die Mensch-KI-Kollaboration.

Warum ist CLAUDE.md so wichtig?​

1. Kontext ist Macht​

Claude Codes Fähigkeiten hängen weitgehend von seinem Verständnis des Projekts ab. Eine gut gestaltete CLAUDE.md kann:

  • 🧠 Projekterkennung aufbauen: Claude dabei helfen, Projektziele und -struktur tiefgreifend zu verstehen
  • 🎯 Arbeitsstandards setzen: Codequalität und Stilanforderungen definieren
  • ⚡ Ausführungseffizienz verbessern: Wiederholende Erklärungen und falsche Richtungen vermeiden
  • 🛡️ Konsistenz gewährleisten: Teammitglieder teilen dieselben Kollaborationsregeln

2. Vom Chaos zur Ordnung​

Projekt ohne CLAUDE.md:

> Hilf mir, diese Funktion zu refaktorieren

Claude: Was macht diese Funktion? Welches Framework? Irgendwelche Konventionen?
Sie: Das ist eine React-Komponente, wir verwenden TypeScript...
Claude: Verstanden, gibt es andere Regeln?
Sie: Wir verwenden funktionale Komponenten, keine Klassenkomponenten...
Claude: Verstanden, welches Test-Framework?
Sie: Jest... (endloser Zyklus)

Projekt mit CLAUDE.md:

> Hilf mir, diese Funktion zu refaktorieren

Claude: Verstanden, basierend auf der Projektkonfiguration verwende ich funktionale Komponenten, TypeScript-Typen, befolge Ihre Namenskonventionen und füge entsprechende Jest-Tests hinzu. Beginne mit Refaktorierung...

CLAUDE.md Struktur​

Grundvorlage​

# Projektname

## Projektübersicht
[Kurze Beschreibung und Hauptziele des Projekts]

## Tech Stack
- Frontend: React 18 + TypeScript
- State Management: Redux Toolkit
- Styling: Styled Components
- Testing: Jest + React Testing Library
- Build: Vite

## Projektstruktur

src/ ├── components/ # Wiederverwendbare Komponenten ├── pages/ # Seitenkomponenten ├── hooks/ # Custom Hooks ├── services/ # API-Services ├── store/ # Redux Store ├── types/ # TypeScript-Typen ├── utils/ # Hilfsfunktionen └── styles/ # Style-Dateien


## Coding-Standards
- Verwende funktionale Komponenten + Hooks
- Alle Komponenten müssen TypeScript-Typen haben
- Verwende ESLint + Prettier für Formatierung
- Komponentennamen verwenden PascalCase
- Dateinamen verwenden kebab-case
- Bevorzuge Named Exports

## Testanforderungen
- Alle Komponenten müssen Unit-Tests haben
- Coverage-Anforderung: >80%
- Testdatei-Benennung: `*.test.tsx`

## Git Workflow
- Verwende Feature-Branches
- Commit-Nachrichtenformat: `type(scope): description`
- PR muss alle Prüfungen bestehen

## Wichtige Hinweise
- API-Aufrufe müssen Fehlerbehandlung haben
- Sensible Informationen verwenden Umgebungsvariablen
- Neue Features benötigen Dokumentationsupdates

Erweiterte Konfigurationstipps​

1. Modulare Konfiguration​

Bei großen Projekten kann die Konfiguration in mehrere Teile aufgeteilt werden:

# Meine große Anwendung

## Kerninformationen
[Grundlegende Projektinformationen]

## Architecture Decision Records (ADR)

### ADR-001: State Management Wahl
Wir haben Redux Toolkit über Context API gewählt, weil:
- Komplexe State-Logik
- Time-Travel-Debugging benötigt
- Team vertraut mit Redux-Ökosystem

### ADR-002: API-Layer-Design
Verwende RTK Query für Datenabruf:
- Automatisches Caching und Synchronisation
- Eingebaute Loading/Error-States
- TypeScript first

## Entwicklungs-Workflow

### Neue Feature-Entwicklungsprozess
1. Erstelle Feature-Branch: `feature/feature-name`
2. Verwende TDD-Ansatz: schreibe Tests zuerst, dann implementiere
3. Stelle sicher, dass TypeScript keine Fehler hat
4. Führe vollständige Test-Suite aus
5. Reiche PR ein und bitte um Code-Review

### Code-Review-Checkliste
- [ ] TypeScript-Typen sind korrekt
- [ ] Tests decken neue Funktionalität ab
- [ ] Fehlerbehandlung ist vollständig
- [ ] Performance-Überlegungen (memo, callback, etc.)
- [ ] Barrierefreiheit unterstützt

2. Kontextanreicherung​

## Geschäftskontext

### Zielbenutzer
- Primär: 25-40 Jahre alte Fachkräfte
- Geräte: Mobile-first, Desktop-Support
- Anwendungsfälle: Pendelzeit, Büropausen

### Kernfeatures
1. **Benutzer-Authentifizierung**: OAuth2 + JWT
2. **Datensynchronisation**: Echtzeit-Sync, Offline-Support
3. **Benachrichtigungssystem**: Push + E-Mail-Alerts

### Performance-Anforderungen
- Erster Seitenladevorgang: <2 Sekunden
- Interaktionsantwort: <100ms
- Unterstützt 1000+ gleichzeitige Benutzer

3. Team-Kollaborationsstandards​

## Team-Konventionen

### Benennungsstandards
- **Komponenten**: `UserProfile.tsx`
- **Hooks**: `useUserData.ts`
- **Services**: `userService.ts`
- **Typen**: `UserType.ts`

### Fehlerbehandlungsmuster
```typescript
// Einheitliche Fehlerbehandlung für API-Aufrufe
try {
  const data = await userService.getProfile();
  return { data, error: null };
} catch (error) {
  logger.error('Failed to get user profile', error);
  return { data: null, error: error.message };
}

Code-Review-Standards​

  • Funktionale Korrektheit ✅
  • Code-Lesbarkeit ✅
  • Performance-Auswirkung ✅
  • Sicherheitsüberlegungen ✅

## Praxisbeispiele

### Fall 1: Refaktorierung-Fehler

**Problem**: Keine klare CLAUDE.md-Konfiguration
```bash
> Refaktoriere Benutzer-Authentifizierungsmodul

# Claudes Verwirrung:
# - Welches Authentifizierungsschema verwenden?
# - Was ist der bestehende Code-Stil?
# - Rückwärtskompatibilität benötigt?
# - Was sind die Testanforderungen?

Ergebnis: Refaktorierungsrichtung entsprach nicht den Projektanforderungen, mehrere Überarbeitungen nötig.

Fall 2: Refaktorierung-Erfolg​

Konfiguration: Detaillierte CLAUDE.md

## Authentifizierungssystem-Konfiguration
- Verwende JWT + Refresh Token
- Unterstütze mehrere Anmeldemethoden: E-Mail, Dritt-OAuth
- Session-Management: Redis-Speicher
- Sicherheitsanforderungen: 2FA-Unterstützung, Passwort-Richtlinien-Durchsetzung

## Bestehendes Authentifizierungsmodul
- `src/auth/` Verzeichnis enthält allen authentifizierungsbezogenen Code
- `AuthContext` bietet globalen Authentifizierungsstatus
- `authService` verwaltet API-Aufrufe
- `authUtils` bietet Authentifizierungsdienstprogramme

Ausführung:

> Refaktoriere Benutzer-Authentifizierungsmodul, verbessere Sicherheit und füge 2FA-Unterstützung hinzu

Ergebnis: Claude verstand die Anforderungen genau und vollendete hochqualitative Refaktorierung auf Anhieb.

Dynamische Konfigurationsstrategie​

1. Progressive Verbesserung​

Beginne einfach, reichere schrittweise an:

Woche 1: Grundstruktur

# Projektname
- React + TypeScript
- Verwende funktionale Komponenten

Monat 1: Detaillierte Spezifikationen

# Projektname
[Detaillierter Tech Stack, Dateistruktur, Coding-Standards]

Monat 3: Tiefer Kontext

# Projektname
[Einschließlich Geschäftslogik, Architekturentscheidungen, Team-Konventionen]

2. Team-Kollaboration​

  • 📝 Versionskontrolle: CLAUDE.md in Git-Verwaltung einschließen
  • 🔄 Regelmäßige Updates: Synchron mit Projektentwicklung aktualisieren
  • 👥 Team-Konsens: Sicherstellen, dass alle Mitglieder verstehen und folgen
  • 🔍 Regelmäßige Überprüfung: Konfigurationseffektivität und -genauigkeit prüfen

Best Practices Zusammenfassung​

✅ Richtig machen​

  1. Spezifisch und klar sein: Vage Beschreibungen vermeiden
  2. Aktuell halten: Konfiguration mit Projektentwicklung aktualisieren
  3. Beispiele einschließen: Code-Beispiele und Muster bereitstellen
  4. Entscheidungen dokumentieren: Wichtige architektonische und technische Entscheidungen aufzeichnen
  5. Team-Konsistenz: Sicherstellen, dass Teammitglieder Konfiguration teilen

❌ Fallen vermeiden​

  1. Überdetailliert: Keinen Roman schreiben, prägnant und praktisch halten
  2. Veraltete Informationen: Regelmäßig nutzlose oder falsche Informationen bereinigen
  3. Persönliche Vorlieben: Übermäßig personalisierte Konfigurationen vermeiden
  4. Geschäft ignorieren: Technische Konfiguration sollte mit Geschäftsanforderungen übereinstimmen
  5. Statisches Denken: Konfiguration sollte sich an Projektänderungen anpassen

Nach Beherrschung der Essenz von CLAUDE.md können Sie weiter Plan Mode lernen, um zu verstehen, wie komplexe mehrstufige Aufgaben bewältigt werden.