feat(guides): Persona + AGENTS.MD/SAVEPOINT.MD Tutorials

Zwei neue Tutorials in der Gruppe „Agenten meistern":

1. Die Persona — deinem Agenten eine Rolle geben
   Erklärt was eine Persona ist, warum sie den Unterschied macht,
   + Copy-paste-ready Template + 2 konkrete Beispiele (Coding-Assistent,
   Lernbegleiter) + Tabelle wo man sie einträgt (pro Projekt vs. global).

2. AGENTS.MD & SAVEPOINT.MD — Gedächtnis für den Agenten
   Erklärt den Unterschied (was das Projekt ist vs. wo wir stehen),
   + vollständige Vorlagen für beide Dateien die direkt nutzbar sind,
   + 2-Schritt-Workflow (Session starten / beenden).

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

frontend/src/panels/guides-data.ts

@@ -256,6 +256,129 @@ Bevor du Dateien änderst: erkläre kurz was du vorhast.</pre>
             — vorgefertigte Rules für React, Vue, Python, etc.</li>
           <li>Einfach fragen: <em>„Schreib mir eine AGENTS.md für ein React + TypeScript Projekt mit Tailwind."</em></li>
         </ul>`],
+
+      ["Die Persona — deinem Agenten eine Rolle geben", `
+        <p>Eine <b>Persona</b> ist eine Rolle, die du dem Agenten gibst — über den System-Prompt oder
+        die erste Zeile deiner AGENTS.md. Sie bestimmt grundlegend wie der Agent antwortet:
+        Ton, Fokus, Detailtiefe und Verhalten.</p>
+        <p><b>Ohne Persona:</b> Allgemeines Sprachmodell. <b>Mit Persona:</b> Dein persönlicher
+        Senior-Entwickler, der genau weiß wie du arbeitest und was dir wichtig ist.</p>
+
+        <p><b>Das Persona-Template:</b></p>
+        <pre class="tut-code">Du bist [Name], [Rolle].
+Dein Fokus: [Hauptaufgabe]
+Dein Stil: [Kommunikationsstil — z.B. direkt, knapp, kein Smalltalk]
+Sprache: Immer auf Deutsch antworten. Code-Kommentare auf Englisch.
+Grenzen: [Was du ablehnst oder nachfragst statt zu raten]</pre>
+
+        <p><b>Beispiel 1 — Coding-Assistent:</b></p>
+        <pre class="tut-code">Du bist Alex, ein erfahrener Senior-Entwickler spezialisiert auf TypeScript und React.
+Dein Fokus: Code schreiben, reviewen und erklären — immer mit konkreten Beispielen.
+Dein Stil: direkt, pragmatisch. Keine unnötigen Erklärungen wenn der Code für sich spricht.
+Sprache: Deutsch. Code-Kommentare auf Englisch.
+Grenzen: Schreib keinen Code ohne den Kontext der Datei zu kennen. Frag lieber nach.</pre>
+
+        <p><b>Beispiel 2 — Lernbegleiter:</b></p>
+        <pre class="tut-code">Du bist Sam, eine geduldige Lernbegleiterin für Programmier-Anfänger.
+Dein Fokus: Konzepte einfach erklären, Fehler ohne Kritik korrigieren, ermutigen.
+Dein Stil: freundlich, mit Analogien aus dem Alltag. Fachbegriffe immer sofort erklären.
+Sprache: Immer auf Deutsch. Niemals Englisch ohne Übersetzung.</pre>
+
+        <p><b>Wo die Persona eintragen:</b></p>
+        <div class="tut-table">
+          <div class="tut-row">
+            <div class="tut-cell-hd">Für ein Projekt</div>
+            <div class="tut-cell-bd">Erste Zeilen der <code>AGENTS.md</code> im Projektordner.
+            Gilt nur dort.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Global (immer)</div>
+            <div class="tut-cell-bd"><code>~/.config/opencode/AGENTS.md</code> (OpenCode)<br>
+              Settings → System Prompt (OpenWebUI)</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Im laufenden Chat</div>
+            <div class="tut-cell-bd">Einfach schreiben: <em>„Ab jetzt bist du ein …"</em> —
+            gilt nur für diese Unterhaltung.</div>
+          </div>
+        </div>
+        <p style="margin-top:10px"><b>Tipp:</b> Eine gute Persona hat immer eine <em>Grenze</em>
+        — was der Agent nicht tun soll. Das verhindert, dass er bei Unklarheiten rät statt fragt.</p>`],
+
+      ["AGENTS.MD &amp; SAVEPOINT.MD — Gedächtnis für den Agenten", `
+        <p>Jedes Mal wenn du einen neuen Chat startest, weiß der Agent <b>nichts</b> über dein Projekt.
+        Diese zwei Dateien lösen das Problem:</p>
+        <div class="tut-table">
+          <div class="tut-row">
+            <div class="tut-cell-hd">AGENTS.md</div>
+            <div class="tut-cell-bd"><b>Was das Projekt ist</b> — Tech-Stack, Konventionen,
+            Struktur. Wird vor jeder Aufgabe gelesen. Einmal schreiben, immer wirksam.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">SAVEPOINT.md</div>
+            <div class="tut-cell-bd"><b>Wo wir gerade stehen</b> — aktueller Stand, offene Punkte,
+            nächste Schritte. Wird am Ende einer Session aktualisiert und zu Beginn der nächsten gelesen.</div>
+          </div>
+        </div>
+
+        <p style="margin-top:14px"><b>AGENTS.MD — Vorlage:</b></p>
+        <pre class="tut-code"># Projekt: [Name]
+
+## Persona
+Du bist [Name], [Rolle]. [Stil, Sprache, Grenzen]
+
+## Tech-Stack
+- Frontend: [z.B. React 18, TypeScript, Tailwind CSS]
+- Backend:  [z.B. FastAPI, Python 3.12]
+- Datenbank:[z.B. PostgreSQL via Prisma]
+
+## Konventionen
+- Variablen:  camelCase (JS) / snake_case (Python)
+- Kommentare: auf Deutsch
+- Commits:    konventionell (feat/fix/chore/docs)
+- Tests:      immer mit describe/it-Blöcken
+
+## Projektstruktur
+src/
+  components/  → UI-Komponenten (eine Datei = eine Komponente)
+  pages/       → Seiten / Routes
+  api/         → Backend-Calls und Typen
+
+## Regeln
+- Vor jeder Dateiänderung kurz erklären was geplant ist
+- Keine neuen Dependencies ohne Rückfrage hinzufügen
+- Bei Unklarheiten fragen, nicht raten</pre>
+
+        <p><b>SAVEPOINT.MD — Vorlage:</b></p>
+        <pre class="tut-code"># Savepoint — [Datum / Uhrzeit]
+
+## Aktueller Stand
+[1–2 Sätze: wo steht das Projekt gerade?]
+
+## Zuletzt erledigt
+- [Aufgabe] ✓
+- [Aufgabe] ✓
+
+## In Arbeit / halbfertig
+- [Was noch offen ist — welche Datei, welcher Schritt fehlt noch]
+
+## Als nächstes
+1. [Konkrete nächste Aufgabe]
+2. [Übernächste Aufgabe]
+
+## Wichtige Entscheidungen
+- [Was entschieden wurde]: [Warum]
+
+## Bekannte Probleme
+- [Problem]: [Was bekannt ist, noch nicht gelöst]</pre>
+
+        <p><b>Workflow:</b></p>
+        <ol class="tut-steps">
+          <li><b>Session starten:</b> <em>„Lies AGENTS.md und SAVEPOINT.md und mach weiter."</em></li>
+          <li><b>Session beenden:</b> <em>„Aktualisiere SAVEPOINT.md mit dem aktuellen Stand."</em></li>
+        </ol>
+        <p><b>Tipp:</b> Lass den Agenten die SAVEPOINT.md selbst schreiben — er sieht was er getan hat.
+        Du prüfst nur ob der Stand stimmt und ergänzt bei Bedarf.</p>`],
     ],
   },