feat(guides): Best Practices Update Juni 2026 — recherchierte Korrekturen

OpenCode:
- /compact hat Alias /summarize; /clear = Alias für /new (klar unterschieden)
- Multi-Agenten erklärt: Tab = primary agents wechseln; @name = Subagent aufrufen
- Agenten via Markdown-Dateien definieren (review.md → @review)
- Slash-Commands als Tabelle statt Bullet-Liste

Cline:
- Plattformen aktualisiert: VS Code, JetBrains, Cursor, Windsurf, Zed, Neovim, CLI (v3.81)
- Memory Bank Konzept ergänzt (projectbrief.md, activeContext.md, progress.md)
- .clinerules/ als Verzeichnis möglich für große Projekte
- Spending Limits (seit April 2026 / v3.78) dokumentiert
- Hinweis: .clinerules-Größe kostet Kontext → kürzer ist besser
- "in VS Code" im Titel entfernt (irreführend)

MCP:
- Empfehlungsliste als Tabelle, nach Anwendungsfall gegliedert
- Playwright (Browser-Automation) ergänzt
- Memory MCPs (mem0) als 2026-Standard ergänzt
- GitHub = meistinstalliert ever; filesystem = meistgenutzt ever
- "36.000+ MCPs verfügbar" als Kontext

Skills & Rules:
- skills.sh: Vercel-Launch Jan 2026, npm-Pendant für Skills erklärt
- Sicherheitshinweis: Snyk-Audit 2026 — 13,4% kritische Probleme in Community-Skills
- SkillHub als qualitätsgeprüfte Alternative ergänzt

AGENTS.md:
- Als plattformübergreifender 2026-Standard hervorgehoben (10+ Tools lesen es nativ)
- 200-500 Zeilen Sweet Spot dokumentiert (Kontext-Overhead)

Konzepte:
- Quantisierung: IQ4_XS als Alternative + Q8_0 für Coding/Reasoning
- Memory Bank als neues Konzept ergänzt
- Skills/Rules: plattformübergreifender Standard erwähnt

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

frontend/src/panels/guides-data.ts

@@ -59,8 +59,8 @@ export const GUIDE_GROUPS: GuideGroup[] = [
             Kein Programmieren, kein Setup. Ideal als Einstieg.</div>
           </div>
           <div class="tut-row">
-            <div class="tut-cell-hd">Ich programmiere und will KI in VS Code</div>
+            <div class="tut-cell-hd">Ich programmiere und will KI in meinem Editor</div>
-            <div class="tut-cell-bd">→ <b>Cline</b> — KI-Assistent direkt im Editor.
+            <div class="tut-cell-bd">→ <b>Cline</b> — KI-Assistent direkt in VS Code, JetBrains, Cursor, Zed u.a.
             Zeigt dir jeden Schritt und fragt vor Änderungen.</div>
           </div>
           <div class="tut-row">
@@ -89,31 +89,61 @@ export const GUIDE_GROUPS: GuideGroup[] = [
           <li><b>Erste Aufgabe geben</b> — z.B.:
             <em>„Lies die Datei README.md und erkläre mir kurz was dieses Projekt macht."</em></li>
         </ol>
-        <p><b>Nützliche Befehle während der Arbeit:</b></p>
+        <p><b>Die wichtigsten Slash-Commands:</b></p>
-        <ul class="tut-steps" style="list-style:disc">
+        <div class="tut-table">
-          <li><code>/model</code> — Modell mitten im Gespräch wechseln (z.B. auf <em>scout</em> für kurze Fragen)</li>
+          <div class="tut-row">
-          <li><code>/compact</code> — Kontext komprimieren wenn er voll wird</li>
+            <div class="tut-cell-hd"><code>/model</code></div>
-          <li><code>/clear</code> — frischer Start, leerer Kontext</li>
+            <div class="tut-cell-bd">Modell wechseln — z.B. mitten im Gespräch auf <em>scout</em> für kurze Fragen</div>
-        </ul>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd"><code>/compact</code> · <code>/summarize</code></div>
+            <div class="tut-cell-bd">Kontext komprimieren wenn er voll wird — fasst die Session zusammen und setzt fort</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd"><code>/clear</code> · <code>/new</code></div>
+            <div class="tut-cell-bd">Neue Session starten — komplett leerer Kontext</div>
+          </div>
+        </div>
         <p>Bevor OpenCode eine Datei ändert, fragt es nach — mit <b>y</b> bestätigen oder <b>n</b> ablehnen.</p>
-        <p class="tut-sources">Weitere Infos: <a href="https://opencode.ai/docs" target="_blank" rel="noopener">opencode.ai/docs</a></p>`],
+        <p><b>Multi-Agenten (2026):</b> Du kannst in OpenCode mehrere spezialisierte Agenten definieren
+        — z.B. einen <em>review</em>-Agent und einen <em>coder</em>-Agent.
+        Mit <b>Tab</b> wechselst du zwischen primären Agenten; mit <b>@review</b> rufst du einen Subagenten direkt im Chat auf.
+        Agenten werden als Markdown-Dateien angelegt: eine Datei <code>review.md</code> im
+        <code>~/.config/opencode/</code>-Ordner erstellt automatisch den Agenten <em>review</em>.</p>
+        <p class="tut-sources">Weitere Infos: <a href="https://opencode.ai/docs" target="_blank" rel="noopener">opencode.ai/docs</a> · <a href="https://opencode.ai/docs/agents/" target="_blank" rel="noopener">Agenten-Docs</a></p>`],
 
-      ["Cline in VS Code verbinden und nutzen", `
+      ["Cline verbinden und nutzen", `
-        <p>Cline ist installiert (VS Code Extension)? So richtest du es ein:</p>
+        <p>Cline (v3.81, Stand Juni 2026) läuft in: <b>VS Code, JetBrains, Cursor, Windsurf, Zed, Neovim</b>
+        und als CLI auf macOS/Linux. Verbinden funktioniert überall gleich:</p>
         <ol class="tut-steps">
-          <li>Das Cline-Panel in VS Code öffnen (Roboter-Icon in der linken Leiste).</li>
+          <li>Das Cline-Panel öffnen (Roboter-Icon in der Seitenleiste).</li>
           <li>Provider <b>„OpenAI Compatible"</b> wählen.</li>
           <li>Tab <b>Verbinden</b> → <em>Cline / Cursor</em> → Basis-URL und Modell-ID kopieren und eintragen.</li>
           <li>API-Key: irgendeinen beliebigen Text eingeben (z.B. <code>local</code>) — wird nicht geprüft.</li>
         </ol>
         <p><b>Plan-Modus vs. Act-Modus:</b></p>
-        <ul class="tut-steps" style="list-style:disc">
+        <div class="tut-table">
-          <li><b>Plan:</b> Cline erklärt erst seinen Plan — du kannst ihn korrigieren bevor er handelt. Ideal für Anfänger.</li>
+          <div class="tut-row">
-          <li><b>Act:</b> Cline handelt sofort, fragt aber vor jeder Dateiänderung um Erlaubnis. Schneller.</li>
+            <div class="tut-cell-hd">Plan</div>
-        </ul>
+            <div class="tut-cell-bd">Cline liest und denkt nach — erklärt den Plan bevor es handelt.
-        <p><b>Unterschied zu OpenCode:</b> Cline arbeitet direkt in VS Code — du siehst Änderungen sofort im Editor.
+            Billiger (weniger Tokens) und ideal für Anfänger.</div>
-        OpenCode ist besser für große, autonome Aufgaben; Cline für Aufgaben die du Schritt für Schritt begleiten willst.</p>
+          </div>
-        <p class="tut-sources">Weitere Infos: <a href="https://cline.bot" target="_blank" rel="noopener">cline.bot</a></p>`],
+          <div class="tut-row">
+            <div class="tut-cell-hd">Act</div>
+            <div class="tut-cell-bd">Cline handelt sofort, fragt aber vor jeder Dateiänderung um Erlaubnis.
+            Schneller für klare Aufgaben.</div>
+          </div>
+        </div>
+        <p><b>Memory Bank (empfohlen):</b> Lege eine Datei <code>projectbrief.md</code> im Projektordner an —
+        Cline liest sie zu Beginn jeder Aufgabe automatisch. Sie ist das Fundament: Projektziel, Tech-Stack,
+        wichtigste Regeln. Ergänzend: <code>activeContext.md</code> für den aktuellen Fokus,
+        <code>progress.md</code> für den Stand.</p>
+        <p><b>.clinerules:</b> Für größere Projekte kannst du statt einer einzelnen Datei ein ganzes
+        Verzeichnis <code>.clinerules/</code> anlegen — jede Datei darin gilt als separate Regel.
+        Achtung: Jedes Zeichen in .clinerules verbraucht Kontext — kurze, präzise Regeln schlagen lange Listen.</p>
+        <p><b>Ausgaben-Limit (seit April 2026):</b> In Settings → Spending Limits kannst du ein
+        Tages- oder Monats-Budget setzen — verhindert dass ein laufender Agent unbemerkt viel Token verbraucht.</p>
+        <p class="tut-sources">Weitere Infos: <a href="https://cline.bot" target="_blank" rel="noopener">cline.bot</a> · <a href="https://docs.cline.bot/best-practices/memory-bank" target="_blank" rel="noopener">Memory Bank Docs</a></p>`],
 
       ["OpenWebUI — chatten ohne Vorkenntnisse", `
         <p>OpenWebUI ist installiert? Verbinden in 3 Schritten:</p>
@@ -149,6 +179,7 @@ export const GUIDE_GROUPS: GuideGroup[] = [
           <li>Bugs finden und in ihrem Kontext beheben</li>
           <li>Code refactoren, Dokumentation schreiben, Tests ergänzen</li>
           <li>Recherchieren und das Ergebnis direkt umsetzen (mit MCP)</li>
+          <li>Parallele Teilaufgaben an Subagenten delegieren (OpenCode 2026)</li>
         </ul>
         <p><b>Was Agenten schlecht können:</b></p>
         <ul class="tut-steps" style="list-style:disc">
@@ -213,17 +244,36 @@ export const GUIDE_GROUPS: GuideGroup[] = [
   }
 }</pre>
         <p>Danach OpenCode neu starten — der Agent nutzt das Werkzeug automatisch wenn er es braucht.</p>
-        <p><b>Empfohlene MCPs für den Einstieg:</b></p>
+        <p><b>Empfohlene MCPs 2026 — nach Anwendungsfall:</b></p>
-        <ul class="tut-steps" style="list-style:disc">
+        <div class="tut-table">
-          <li><b>brave-search / tavily</b> — im Web suchen und recherchieren</li>
+          <div class="tut-row">
-          <li><b>github</b> — Repos, Issues und Pull Requests lesen</li>
+            <div class="tut-cell-hd">Web-Suche</div>
-          <li><b>filesystem</b> — sichere Dateizugriffe außerhalb des Projektordners</li>
+            <div class="tut-cell-bd"><b>brave-search</b> oder <b>tavily</b> — recherchieren, aktuelle Infos holen</div>
-        </ul>
+          </div>
-        <p class="tut-sources"><b>Wo MCPs finden?</b>
+          <div class="tut-row">
+            <div class="tut-cell-hd">GitHub</div>
+            <div class="tut-cell-bd"><b>github</b> — meistinstallierter MCP überhaupt. Issues, PRs, Commits, Repos direkt im Chat verwalten</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Lokale Dateien</div>
+            <div class="tut-cell-bd"><b>filesystem</b> — meistgenutzter MCP überhaupt. Sichere Dateizugriffe auf beliebige Ordner</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Browser</div>
+            <div class="tut-cell-bd"><b>playwright</b> — Browser-Automatisierung und UI-Tests. Agent öffnet Seiten, klickt, prüft</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Gedächtnis</div>
+            <div class="tut-cell-bd"><b>memory / mem0</b> — persistentes Gedächtnis über Sessions hinweg. Agent erinnert sich an deine Präferenzen und Projekt-Kontext auch in neuen Chats</div>
+          </div>
+        </div>
+        <p style="margin-top:8px">Über <b>36.000 MCPs</b> sind mittlerweile verfügbar (Stand Juni 2026).
+        Fang mit filesystem + github an — die decken 80% der täglichen Arbeit ab.</p>
+        <p class="tut-sources"><b>Wo MCPs finden:</b>
           <a href="https://mcp.run" target="_blank" rel="noopener">mcp.run</a> ·
           <a href="https://smithery.ai" target="_blank" rel="noopener">smithery.ai</a> ·
           <a href="https://modelcontextprotocol.io/servers" target="_blank" rel="noopener">modelcontextprotocol.io/servers</a>
-          — oder einfach fragen: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em></p>
+          — oder fragen: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em></p>
         <p><b>Merksatz:</b> Fehlt dem Agenten eine <em>Fähigkeit</em> → MCP.
         Soll er etwas nur <em>besser machen</em> → Skill (nächster Abschnitt).</p>`],
 
@@ -256,13 +306,24 @@ Bevor du Dateien änderst: erkläre kurz was du vorhast.</pre>
           </div>
         </div>
         <p style="margin-top:10px"><b>Fertige Skills finden:</b></p>
-        <ul class="tut-steps" style="list-style:disc">
+        <div class="tut-table">
-          <li><a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a>
+          <div class="tut-row">
-            — Community-Skills und Personas, direkt verwendbar</li>
+            <div class="tut-cell-hd"><a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a></div>
-          <li><a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a>
+            <div class="tut-cell-bd">Von Vercel gestartet (Jan 2026) — das npm für Agent-Skills. Funktioniert mit Claude Code, OpenCode, Cursor u.v.m. One-Command-Installer.
-            — vorgefertigte Rules für React, Vue, Python, etc.</li>
+            <b>Hinweis:</b> Community-Inhalte ohne formale Prüfung — Skill vor dem Einsatz kurz lesen.</div>
-          <li>Einfach fragen: <em>„Schreib mir eine AGENTS.md für ein React + TypeScript Projekt mit Tailwind."</em></li>
+          </div>
-        </ul>`],
+          <div class="tut-row">
+            <div class="tut-cell-hd"><a href="https://skillhub.ai" target="_blank" rel="noopener">SkillHub</a></div>
+            <div class="tut-cell-bd">KI-bewertete Skills (S/A/B-Ranking nach Qualität, Klarheit, Wirkung). Kleinerer Katalog, höhere Signal-Qualität.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd"><a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a></div>
+            <div class="tut-cell-bd">Vorgefertigte Rules für React, Vue, Python, Go etc. — direkt als .clinerules oder AGENTS.md nutzbar.</div>
+          </div>
+        </div>
+        <p style="margin-top:8px"><b>Sicherheitshinweis:</b> Ein Snyk-Audit (2026) fand in 13,4% der Community-Skills
+        kritische Probleme (Prompt Injection, exponierte Secrets). Regel: Skill-Datei kurz lesen bevor du sie einsetzt.</p>
+        <p style="margin-top:8px">Oder einfach fragen: <em>„Schreib mir eine AGENTS.md für ein React + TypeScript Projekt mit Tailwind."</em></p>`],
 
       ["Die Persona — Rolle, Beziehung &amp; Onboarding", `
         <p>Eine Persona hat <b>zwei Dimensionen</b> — beide sind wichtig:</p>
@@ -351,7 +412,10 @@ Wenn du alle Antworten hast, erstelle daraus:
 
       ["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>
+        Diese zwei Dateien lösen das Problem.</p>
+        <p><b>AGENTS.md ist 2026 der plattformübergreifende Standard</b> — nativ gelesen von:
+        OpenCode, Claude Code, Codex CLI, Cursor, Aider, Devin, GitHub Copilot, Gemini CLI, Windsurf, Amazon Q.
+        Eine Datei, alle Tools.</p>
         <div class="tut-table">
           <div class="tut-row">
             <div class="tut-cell-hd">AGENTS.md</div>
@@ -391,7 +455,13 @@ src/
 ## 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>
+- Bei Unklarheiten fragen, nicht raten
+
+<!-- Ziel: 200–500 Zeilen. AGENTS.md wird in jeden Kontext geladen —
+     kürzer = mehr Platz für Code und Gespräch. --></pre>
+        <p style="color:var(--mut);font-size:12px;margin:4px 0 8px">
+          <b>Größe:</b> 200–500 Zeilen sind der empfohlene Sweet Spot (Stand 2026).
+          AGENTS.md wird in jeden Kontext geladen — je kürzer, desto mehr Platz bleibt für Code und Gespräch.</p>
 
         <p><b>SAVEPOINT.MD — Vorlage:</b></p>
         <pre class="tut-code"># Savepoint — [Datum / Uhrzeit]
@@ -479,14 +549,15 @@ src/
 export const CONCEPTS: [string, string][] = [
   ["LLM / Modell", "Die KI selbst — versteht und schreibt Text (wie ChatGPT, nur lokal auf deinem PC). Ein Modell ist eine konkrete Datei, oft auf etwas spezialisiert (Code, Bilder, Chat)."],
   ["GGUF", "Das lokal lauffähige Dateiformat. llama-swap lädt nur GGUF — Repos ohne GGUF kann die Engine nicht nutzen."],
-  ["Quantisierung (Q4_K_M)", "Verkleinert ein Modell (16-Bit → 4-Bit), damit es in den Speicher passt — bei kaum Qualitätsverlust. Q4_K_M ist der bewährte Sweetspot aus Qualität und Geschwindigkeit."],
+  ["Quantisierung (Q4_K_M)", "Verkleinert ein Modell (16-Bit → 4-Bit), damit es in den Speicher passt — bei kaum Qualitätsverlust. Q4_K_M ist der bewährte Sweetspot. Für Coding/Reasoning: Q8_0 (nahezu verlustfrei). Wenn Q4_K_M 1 GB zu groß ist: IQ4_XS als Alternative (ähnliche Qualität, etwas kleiner)."],
   ["Kontextfenster", "Das Kurzzeitgedächtnis: wie viel Text sich das Modell gleichzeitig merken kann. Größer = mehr Überblick, mehr Speicher, etwas langsamer."],
   ["Token", "Die kleinste Einheit die ein Modell verarbeitet — meist 3–4 Zeichen oder ein kurzes Wort. 1 000 Tokens ≈ 750 Wörter. Kontextfenster, Geschwindigkeit und Kosten werden in Tokens gemessen."],
   ["Auto-Swap", "llama-swap lädt/entlädt Modelle automatisch — immer nur eins gleichzeitig. Du managst nichts."],
   ["TTL (Time to Live)", "Wie lange ein Modell nach der letzten Anfrage im RAM bleibt bevor es entladen wird. Standard: 5 Minuten. ∞ = bleibt dauerhaft geladen (sinnvoll für den Scout)."],
   ["Agent", "Ein Programm (OpenCode, Cline, Continue), das das Modell in einer Handlungsschleife laufen lässt — Dateien lesen/ändern, Befehle ausführen, planen, bis die Aufgabe erledigt ist."],
   ["MCP", "Model Context Protocol — der Stecker, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Datenbank, GitHub …). MCP = neue Fähigkeiten."],
-  ["Skills / Rules", "Kurze Textdatei (AGENTS.md, .clinerules …) mit Anweisungen wie der Agent in deinem Projekt arbeiten soll — einmal geschrieben, immer befolgt."],
+  ["Skills / Rules", "Kurze Textdatei (AGENTS.md, .clinerules …) mit Anweisungen wie der Agent in deinem Projekt arbeiten soll — einmal geschrieben, immer befolgt. Seit 2026 plattformübergreifender Standard: AGENTS.md wird von über 10 Tools nativ gelesen."],
+  ["Memory Bank", "Clines Konzept für dauerhaften Projekt-Kontext: projectbrief.md (Ziel & Scope), activeContext.md (aktueller Fokus), progress.md (Stand). Wird zu Beginn jeder Aufgabe automatisch gelesen — ähnlich wie AGENTS.md, aber aufgeteilt nach Zweck."],
   ["System-Prompt", "Eine unsichtbare Anweisung die vor deiner Nachricht steht und das Verhalten des Modells grundlegend prägt (Sprache, Ton, Rolle). Skills nutzen oft den System-Prompt."],
   ["Vision", "Modelle mit Vision-Fähigkeit können Bilder verstehen — Screenshots, Diagramme, Fehlerfotos. Erkennbar am mmproj-Projektor der mitgeladen wird."],
 ]