Hitonabi/mission-control
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Hitonabi
2026-06-23 09:00:36 +02:00
parent 18236fc6d6
commit 05acad5af8
4 changed files with 197 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/panels/GuidesPanel.svelte
+14
View File
@@ -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
+81 -36
View File
@@ -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>,
<a href="https://smithery.ai" target="_blank" rel="noopener">smithery.ai</a>,
oder direkt: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em> im Chat fragen.</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>
<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", `
<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>
["Die Persona — Rolle, Beziehung &amp; Onboarding", `
<p>Eine Persona hat <b>zwei Dimensionen</b> — beide sind wichtig:</p>
<div class="tut-table">
<div class="tut-row">
<div class="tut-cell-hd">Was der Agent tut</div>
<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.
Gilt nur dort.</div>
<div class="tut-cell-bd">Erste Zeilen der <code>AGENTS.md</code> im Projektordner.</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>
<div class="tut-cell-hd">Global (überall)</div>
<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-bd">Einfach schreiben: <em>„Ab jetzt bist du ein …"</em> —
gilt nur für diese Unterhaltung.</div>
<div class="tut-cell-hd">Nur dieser Chat</div>
<div class="tut-cell-bd"><em>„Ab jetzt bist du …"</em> direkt eintippen.</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>`],
<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>`],
["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>`],
],
},