---
description: Strukturierter Workflow für konzept-basierte Feature-Implementierung mit Requirement Analysis + User Approval
args: <feature-name> <konzept-file>
model: 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:**
```python
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:

```json
{
  "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}}`.