feat(guides): Quellen überall + Persona-Onboarding

Quellen/Links:
- OpenCode → opencode.ai/docs
- Cline → cline.bot
- OpenWebUI → openwebui.com
- MCP → mcp.run, smithery.ai, modelcontextprotocol.io/servers
- Skills & Rules → skills.sh (neu), cursor.directory
- Persona → skills.sh, cursor.directory
- AGENTS.MD → skills.sh, opencode.ai/docs
Neue .tut-sources CSS-Klasse: dezente Trennlinie, Teal-Links.

Persona-Tutorial grundlegend erweitert:
- Zwei Dimensionen erklärt (WAS der Agent tut vs. WIE er mit dir umgeht)
- Template um Beziehungs-/Interaktionszeile erweitert
- Beispiele zeigen jetzt auch Feedback-Stil, Proaktivität, Fehlerkultur
- Neues Onboarding-Interview-Template: Agent befragt den Nutzer selbst
  (6-8 Fragen, eine nach der anderen) und schreibt daraus eine
  maßgeschneiderte AGENTS.md — der schnellste Weg zu einer echten Persona.

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

frontend/src/panels/GuidesPanel.svelte

@@ -83,6 +83,20 @@
     color: var(--fg);
   }
 
+  /* Source / link lines at bottom of tutorials */
+  :global(.tut-sources) {
+    margin-top: 14px;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+    font-size: 11.5px;
+    color: var(--mut);
+  }
+  :global(.tut-sources a) {
+    color: var(--accent);
+    text-decoration: none;
+  }
+  :global(.tut-sources a:hover) { text-decoration: underline; }
+
   /* Code blocks inside tutorials */
   :global(.tut-code) {
     display: block;

frontend/src/panels/guides-data.ts

@@ -95,7 +95,8 @@ export const GUIDE_GROUPS: GuideGroup[] = [
           <li><code>/compact</code> — Kontext komprimieren wenn er voll wird</li>
           <li><code>/clear</code> — frischer Start, leerer Kontext</li>
         </ul>
-        <p>Bevor OpenCode eine Datei ändert, fragt es nach — mit <b>y</b> bestätigen oder <b>n</b> ablehnen.</p>`],
+        <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>`],
 
       ["Cline in VS Code verbinden und nutzen", `
         <p>Cline ist installiert (VS Code Extension)? So richtest du es ein:</p>
@@ -111,7 +112,8 @@ export const GUIDE_GROUPS: GuideGroup[] = [
           <li><b>Act:</b> Cline handelt sofort, fragt aber vor jeder Dateiänderung um Erlaubnis. Schneller.</li>
         </ul>
         <p><b>Unterschied zu OpenCode:</b> Cline arbeitet direkt in VS Code — du siehst Änderungen sofort im Editor.
-        OpenCode ist besser für große, autonome Aufgaben; Cline für Aufgaben die du Schritt für Schritt begleiten willst.</p>`],
+        OpenCode ist besser für große, autonome Aufgaben; Cline für Aufgaben die du Schritt für Schritt begleiten willst.</p>
+        <p class="tut-sources">Weitere Infos: <a href="https://cline.bot" target="_blank" rel="noopener">cline.bot</a></p>`],
 
       ["OpenWebUI — chatten ohne Vorkenntnisse", `
         <p>OpenWebUI ist installiert? Verbinden in 3 Schritten:</p>
@@ -125,7 +127,8 @@ export const GUIDE_GROUPS: GuideGroup[] = [
         <p><b>Bilder analysieren:</b> Mit einem Vision-Modell (z.B. <em>qwen3-vl</em>) einfach ein Bild
         per Drag & Drop ins Chat-Fenster ziehen — das Modell beschreibt und analysiert es.</p>
         <p><b>Gut für:</b> Texte schreiben, übersetzen, zusammenfassen, erklären lassen, Brainstorming —
-        alles ohne Programmierkenntnisse.</p>`],
+        alles ohne Programmierkenntnisse.</p>
+        <p class="tut-sources">Weitere Infos: <a href="https://openwebui.com" target="_blank" rel="noopener">openwebui.com</a></p>`],
     ],
   },
 
@@ -216,9 +219,11 @@ export const GUIDE_GROUPS: GuideGroup[] = [
           <li><b>github</b> — Repos, Issues und Pull Requests lesen</li>
           <li><b>filesystem</b> — sichere Dateizugriffe außerhalb des Projektordners</li>
         </ul>
-        <p><b>Wo MCPs finden?</b> → <a href="https://mcp.run" target="_blank" rel="noopener">mcp.run</a>,
+        <p class="tut-sources"><b>Wo MCPs finden?</b>
-        <a href="https://smithery.ai" target="_blank" rel="noopener">smithery.ai</a>,
+          <a href="https://mcp.run" target="_blank" rel="noopener">mcp.run</a> ·
-        oder direkt: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em> im Chat fragen.</p>
+          <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>
         <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>`],
 
@@ -252,58 +257,97 @@ Bevor du Dateien änderst: erkläre kurz was du vorhast.</pre>
         </div>
         <p style="margin-top:10px"><b>Fertige Skills finden:</b></p>
         <ul class="tut-steps" style="list-style:disc">
+          <li><a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a>
+            — Community-Skills und Personas, direkt verwendbar</li>
           <li><a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a>
             — 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", `
+      ["Die Persona — Rolle, Beziehung &amp; Onboarding", `
-        <p>Eine <b>Persona</b> ist eine Rolle, die du dem Agenten gibst — über den System-Prompt oder
+        <p>Eine Persona hat <b>zwei Dimensionen</b> — beide sind wichtig:</p>
-        die erste Zeile deiner AGENTS.md. Sie bestimmt grundlegend wie der Agent antwortet:
+        <div class="tut-table">
-        Ton, Fokus, Detailtiefe und Verhalten.</p>
+          <div class="tut-row">
-        <p><b>Ohne Persona:</b> Allgemeines Sprachmodell. <b>Mit Persona:</b> Dein persönlicher
+            <div class="tut-cell-hd">Was der Agent tut</div>
-        Senior-Entwickler, der genau weiß wie du arbeitest und was dir wichtig ist.</p>
+            <div class="tut-cell-bd">Fokus, Fachgebiet, Grenzen — die klassische Rollenbeschreibung.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Wie er mit dir umgeht</div>
+            <div class="tut-cell-bd">Ton, Proaktivität, Feedback-Stil — antwortet er kurz oder ausführlich?
+            Hakt er nach oder liefert er einfach? Spricht er Fehler direkt an oder verpackt er sie?</div>
+          </div>
+        </div>
+        <p style="margin-top:10px">Ein Agent der technisch gleich konfiguriert ist, verhält sich komplett anders
+        wenn er weiß: <em>Du willst kurze Antworten ohne Erklärung.</em> Oder: <em>Du lernst noch —
+        ermutige mich und erkläre immer warum.</em></p>
 
-        <p><b>Das Persona-Template:</b></p>
+        <p><b>Das vollständige 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>
+Fokus: [Was du hauptsächlich tust]
+Wie du kommunizierst: [Stil — direkt/erklärend/ermutigend, kurze oder ausführliche Antworten]
+Wie du mit mir umgehst: [Proaktivität, Rückfragen, Feedback-Stil, Fehlerkultur]
+Sprache: Immer auf Deutsch. Code-Kommentare auf Englisch.
+Grenzen: [Was du nicht tust, was du nachfragst statt zu raten]</pre>
+
+        <p><b>Beispiel 1 — Coding-Assistent (direkt, erfahren):</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>
+Fokus: Code schreiben, reviewen, erklären — immer mit konkreten Beispielen.
+Wie du kommunizierst: direkt, pragmatisch. Keine Erklärung wenn der Code für sich spricht.
+Wie du mit mir umgehst: Du fragst nach bevor du loslegst wenn die Aufgabe unklar ist.
+  Fehler sprichst du klar an — aber ohne Schuldzuweisungen. Du machst Gegenvorschläge
+  wenn du eine bessere Lösung siehst, aber respektierst meine Entscheidung.
+Sprache: Deutsch. Code-Kommentare auf Englisch.
+Grenzen: Kein Code ohne Datei-Kontext. Keine neuen Dependencies ohne Rückfrage.</pre>
+
+        <p><b>Beispiel 2 — Lernbegleiter (geduldig, ermutigend):</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.
+Fokus: Konzepte erklären, Fehler korrigieren, Schritt für Schritt führen.
+Wie du kommunizierst: freundlich, mit Analogien aus dem Alltag. Fachbegriffe sofort erklären.
+Wie du mit mir umgehst: Du lobst Fortschritte, auch kleine. Fehler sind Lernchancen —
+  du zeigst was falsch war und warum, ohne zu urteilen. Du fragst ob ich es verstanden
+  habe bevor du weitermachst.
 Sprache: Immer auf Deutsch. Niemals Englisch ohne Übersetzung.</pre>
 
-        <p><b>Wo die Persona eintragen:</b></p>
+        <hr style="border:none;border-top:1px solid var(--line);margin:18px 0">
+        <p><b>Der schnellste Weg: Onboarding-Interview</b></p>
+        <p>Statt die Persona selbst auszufüllen — lass den Agenten <em>dich</em> befragen.
+        Starte einen frischen Chat und gib ihm diesen Prompt:</p>
+        <pre class="tut-code">Ich möchte dich in mein Projekt und meinen Arbeitsstil einarbeiten.
+Führe mit mir ein kurzes Interview durch — stelle mir 6–8 Fragen,
+eine nach der anderen — um zu verstehen:
+
+1. Wer ich bin und wie ich am liebsten kommuniziere
+2. Was unser Projekt ist und welches Ziel es hat
+3. Was ich gut kann und wobei ich Unterstützung brauche
+4. Meine Arbeitsgewohnheiten und Präferenzen
+5. Was mir wichtig ist und was mich stört
+
+Wenn du alle Antworten hast, erstelle daraus:
+- Eine vollständige AGENTS.md als dauerhaftes Fundament
+- Einen Satz der zusammenfasst wer ich für dich bin</pre>
+        <p>Das Ergebnis: eine maßgeschneiderte Persona die <em>wirklich</em> zu dir passt —
+        weil du sie nicht selbst formulieren musstest, sondern im Gespräch entstanden ist.</p>
+
+        <p><b>Wo 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.
+            <div class="tut-cell-bd">Erste Zeilen der <code>AGENTS.md</code> im Projektordner.</div>
-            Gilt nur dort.</div>
           </div>
           <div class="tut-row">
-            <div class="tut-cell-hd">Global (immer)</div>
+            <div class="tut-cell-hd">Global (überall)</div>
-            <div class="tut-cell-bd"><code>~/.config/opencode/AGENTS.md</code> (OpenCode)<br>
+            <div class="tut-cell-bd"><code>~/.config/opencode/AGENTS.md</code> (OpenCode) ·
               Settings → System Prompt (OpenWebUI)</div>
           </div>
           <div class="tut-row">
-            <div class="tut-cell-hd">Im laufenden Chat</div>
+            <div class="tut-cell-hd">Nur dieser Chat</div>
-            <div class="tut-cell-bd">Einfach schreiben: <em>„Ab jetzt bist du ein …"</em> —
+            <div class="tut-cell-bd"><em>„Ab jetzt bist du …"</em> direkt eintippen.</div>
-            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>
+        <p class="tut-sources" style="margin-top:10px">Fertige Personas: <a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a> · <a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a></p>`],
-        — 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.
@@ -378,7 +422,8 @@ src/
           <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>`],
+        Du prüfst nur ob der Stand stimmt und ergänzt bei Bedarf.</p>
+        <p class="tut-sources">Vorlagen &amp; Inspiration: <a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a> · <a href="https://opencode.ai/docs" target="_blank" rel="noopener">opencode.ai/docs</a></p>`],
     ],
   },
 

static/dist/main.css

@@ -1 +1 @@
-.guide-card.svelte-112sh7i{padding:0;overflow:hidden;margin-bottom:8px}.guide-group-hd.svelte-112sh7i{padding:9px 18px 7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:#2dd4bf0f;border-bottom:1px solid var(--line)}.tut-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px;font-size:12.5px}.tut-row{display:grid;grid-template-columns:1fr 2fr;border-bottom:1px solid var(--line)}.tut-row:last-child{border-bottom:none}.tut-cell-hd{padding:10px 14px;font-weight:500;border-right:1px solid var(--line);background:#ffffff06;line-height:1.5}.tut-cell-hd.bad{color:var(--mut);text-decoration:line-through;font-style:italic}.tut-cell-bd{padding:10px 14px;line-height:1.6;color:var(--fg)}.tut-code{display:block;background:var(--bg, #0d0d0d);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:10px 0;color:var(--fg)}
+.guide-card.svelte-112sh7i{padding:0;overflow:hidden;margin-bottom:8px}.guide-group-hd.svelte-112sh7i{padding:9px 18px 7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:#2dd4bf0f;border-bottom:1px solid var(--line)}.tut-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px;font-size:12.5px}.tut-row{display:grid;grid-template-columns:1fr 2fr;border-bottom:1px solid var(--line)}.tut-row:last-child{border-bottom:none}.tut-cell-hd{padding:10px 14px;font-weight:500;border-right:1px solid var(--line);background:#ffffff06;line-height:1.5}.tut-cell-hd.bad{color:var(--mut);text-decoration:line-through;font-style:italic}.tut-cell-bd{padding:10px 14px;line-height:1.6;color:var(--fg)}.tut-sources{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut)}.tut-sources a{color:var(--accent);text-decoration:none}.tut-sources a:hover{text-decoration:underline}.tut-code{display:block;background:var(--bg, #0d0d0d);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:10px 0;color:var(--fg)}