mitai-jinkendo/.claude/commands/implement-feature.md

description	args	model
Strukturierter Workflow für konzept-basierte Feature-Implementierung mit Requirement Analysis + User Approval	<feature-name> <konzept-file>	sonnet

Feature-Implementierung Workflow

Du wurdest aufgerufen mit:

• Feature: {{feature-name}}
• Konzept: {{konzept-file}}

Dieser Skill führt den strukturierten 5-Stufen-Prozess aus .claude/rules/IMPLEMENTATION_RULES.md aus.

---

STUFE 1: Anforderungsanalyse

Aufgabe:

1. Lies das Konzept-Dokument {{konzept-file}} VOLLSTÄNDIG
2. Finde alle Anforderungen für {{feature-name}}
3. Erstelle eine detaillierte Checkliste

Gehe dabei wie folgt vor:

1.1 Konzept lesen

• Öffne {{konzept-file}} mit dem Read tool
• Suche nach Abschnitten die {{feature-name}} betreffen
• Lies ALLE relevanten Abschnitte vollständig (nicht nur überfliegen)

1.2 Anforderungs-Matrix erstellen

Erstelle eine Tabelle mit folgenden Spalten:

Anforderung	Datenquelle	Status	Notizen
Kalorienaufnahme täglich	nutrition_log.kcal	✓ Vorhanden	-
Trainingskalorien	activity_log.kcal	✗ Fehlt	Muss aggregiert werden
...	...	...	...

Status-Codes:

• ✓ Vorhanden: Bereits implementiert (data_layer Funktion existiert)
• ⚠ Partial: Teilweise vorhanden, muss erweitert werden
• ✗ Fehlt: Muss neu gebaut werden

1.3 Gap-Analyse

Listen auf:

• Welche data_layer Funktionen existieren bereits?
• Welche data_layer Funktionen müssen neu geschrieben werden?
• Welche Tabellen werden benötigt?
• Welche Berechnungen sind nötig? (Formeln dokumentieren)

1.4 Offene Fragen

Dokumentiere alle Unklarheiten:

• Interpretation unklar?
• Mehrere Umsetzungsmöglichkeiten?
• Fehlende Informationen im Konzept?

OUTPUT: Zeige dem User die Anforderungs-Matrix und Gap-Analyse.

---

STUFE 2: Umsetzungskonzept erstellen

Aufgabe: Erstelle ein detailliertes technisches Umsetzungskonzept mit:

2.1 Backend-Design

Neue Endpoints:

GET /api/charts/{{feature-name}}?param1=value1

Args:
    param1: Beschreibung (default=X, range Y-Z)
    session: Auth session (injected)

Returns:
    Chart.js-compatible JSON (siehe unten)

Neue data_layer Funktionen:

def get_xyz_data(profile_id: str, days: int) -> Dict:
    """
    Beschreibung was die Funktion tut.

    Berechnung:
    1. Schritt 1 (SQL Query oder Formel)
    2. Schritt 2

    Returns:
        {"key": value, ...}
    """

Datenquellen:

• Welche Tabellen? (nutrition_log, activity_log, etc.)
• Welche Spalten?
• Welche JOINs?

Berechnungen:

• Formeln dokumentieren (z.B. "7d avg = sum(values[-7:]) / 7")
• Aggregationen beschreiben
• Edge Cases behandeln (keine Daten, Division durch 0, etc.)

2.2 Response-Format

Zeige ein vollständiges Beispiel der JSON-Response:

{
  "chart_type": "line" | "bar" | "mixed" | "scatter",
  "data": {
    "labels": ["2026-01-01", "2026-01-02", ...],
    "datasets": [
      {
        "type": "line",  // nur bei chart_type: mixed
        "label": "Label für Legende",
        "data": [100, 105, 103, ...],
        "borderColor": "#1D9E75",
        "backgroundColor": "rgba(29, 158, 117, 0.1)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": false,
        "yAxisID": "y1"  // bei Dual-Axis
      }
    ]
  },
  "metadata": {
    "confidence": "high" | "medium" | "low" | "insufficient",
    "data_points": 28,
    "avg_value": 123.4,
    "custom_field": "..."
  }
}

2.3 Frontend-Design

Component:

• Welche Datei? (z.B. NutritionCharts.jsx)
• Welche Funktion? (z.B. renderEnergyBalance())

Chart-Library:

• Recharts oder Chart.js?
• Welcher Chart-Typ? (LineChart, BarChart, ComposedChart, etc.)
• Welche Features? (Tooltip, Legend, Dual-Axis, etc.)

API-Integration:

• API-Funktion in api.js hinzufügen
• State-Management (useState, useEffect)
• Loading + Error Handling

2.4 Dependencies

• Müssen andere Module angepasst werden?
• Neue npm-Pakete nötig?
• DB-Migrationen nötig?

OUTPUT: Zeige dem User das vollständige Umsetzungskonzept.

---

STUFE 3: User-Approval einholen

Aufgabe:

1. Zeige Anforderungs-Matrix (Stufe 1)
2. Zeige Umsetzungskonzept (Stufe 2)
3. Liste offene Fragen auf
4. Frage explizit: "Soll ich mit der Implementierung beginnen? (ja/nein/Änderungen)"

WICHTIG:

• Warte auf die Antwort des Users
• Beginne NICHT mit der Implementierung ohne explizites "ja"
• Bei Änderungswünschen: Passe das Konzept an und zeige es erneut

---

STUFE 4: Implementierung

NUR ausführen wenn User "ja" gesagt hat!

4.1 Backend implementieren

1. Neue data_layer Funktionen:

   • Erstelle/erweitere Dateien in backend/data_layer/
   • Implementiere genau nach Konzept (Stufe 2.1)
   • Docstrings mit Beschreibung + Args + Returns

2. Neue Endpoints:

   • Erstelle/erweitere Router in backend/routers/
   • Implementiere genau nach Konzept (Stufe 2.1)
   • Response-Format exakt wie spezifiziert (Stufe 2.2)

3. Tests (falls vorhanden):

   • Unit-Tests für data_layer Funktionen
   • Integration-Tests für Endpoints

4.2 Frontend implementieren

1. API-Funktion hinzufügen:

   • Ergänze frontend/src/utils/api.js
   • Syntax: getXyzChart: (days=28) => req(\/charts/xyz?days=${days}`)`

2. Component erstellen/erweitern:

   • Implementiere Chart-Darstellung
   • Verwende Chart-Library wie spezifiziert
   • Loading + Error Handling

3. Integration:

   • Füge Component in Parent-Page ein
   • Teste UI-Flow

4.3 Commit

feat: {{feature-name}} (konzept-konform)

Backend:
- data_layer: [Liste neue Funktionen]
- Endpoint: [Liste neue Endpoints]

Frontend:
- Component: [Beschreibung]
- Chart-Type: [Typ]

Konzept: {{konzept-file}}

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---

STUFE 5: Compliance-Check

Aufgabe: Prüfe JEDE Anforderung aus der Anforderungs-Matrix (Stufe 1):

□ Anforderung 1: [Beschreibung] - Status: ✓ / ✗
□ Anforderung 2: [Beschreibung] - Status: ✓ / ✗
...

Alle Checkboxen müssen ✓ sein vor Push!

Falls ✗:

• Identifiziere was fehlt
• Implementiere nach
• Erneut prüfen

OUTPUT: Zeige dem User die Final-Checkliste.

---

WICHTIG: Workflow-Reihenfolge

Stufe 1 (Anforderungen) → Stufe 2 (Konzept) → Stufe 3 (Approval)
                                                      ↓
                                                    User sagt "ja"?
                                                      ↓
Stufe 4 (Implementierung) → Stufe 5 (Compliance-Check) → Push

Niemals:

• Stufen überspringen
• Ohne Approval implementieren
• "Ähnliches" statt Gefordertes bauen

---

Los geht's!

Beginne jetzt mit STUFE 1: Anforderungsanalyse.

Lies {{konzept-file}} und erstelle die Anforderungs-Matrix für {{feature-name}}.