@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/de-DE/server.mdx

@@ -7,13 +7,77 @@ description: "Nitro-Serverrouten, Plugins, im Framework bereitgestellte Routen,
 
 Agent-native Apps verwenden [Nitro](https://nitro.build) für Serverrouten und Plugins. Das meiste Produktverhalten sollte in [Actions](/docs/actions) leben; Benutzerdefinierte Routen gelten für Protokolloberflächen, für die actions nicht geeignet ist: Uploads, Streaming, öffentliche Seiten, webhooks-, OAuth-Rückrufe und anbieterspezifische APIs.
 
-```an-diagram title="Was auf dem Server läuft" summary="Aktionen sind die Standardeinstellung. Benutzerdefinierte Dateirouten und im Framework bereitgestellte Routen nutzen dieselbe Nitro-App und dieselbe SQL-Datenbank."
-{
-  "html": "<div class=\"diagram-server\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">Browser / Benutzeroberfläche</div><div class=\"diagram-node\">Agentenschleife</div><div class=\"diagram-node\">Externe Clients<br><small class=\"diagram-muted\">HTTP · MCP · A2A</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Nitro-Server</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">Standardoberfläche</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/_agent-native/*</span><small class=\"diagram-muted\">framework routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/api/*</span><small class=\"diagram-muted\">custom file routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">plugins</span><small class=\"diagram-muted\">Start: Migrationen, Jobs</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL-Datenbank<br><small class=\"diagram-muted\">Drizzle · Koordinationspunkt</small></div></div>",
-  "css": ".diagram-server{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-server .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-server .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.diagram-server .diagram-row{display:flex;align-items:center;gap:8px}.diagram-server .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1x03es6" title={"Was auf dem Server läuft"} summary={"Aktionen sind die Standardeinstellung. Benutzerdefinierte Dateirouten und im Framework bereitgestellte Routen nutzen dieselbe Nitro-App und dieselbe SQL-Datenbank."}>
+
+```html
+<div class="diagram-server">
+  <div class="diagram-col entry">
+    <div class="diagram-node">Browser / Benutzeroberfläche</div>
+    <div class="diagram-node">Agentenschleife</div>
+    <div class="diagram-node">
+      Externe Clients<br /><small class="diagram-muted">HTTP · MCP · A2A</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Nitro-Server</strong>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">Actions</span
+      ><small class="diagram-muted">Standardoberfläche</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/_agent-native/*</span
+      ><small class="diagram-muted">framework routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/api/*</span
+      ><small class="diagram-muted">custom file routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">plugins</span
+      ><small class="diagram-muted">Start: Migrationen, Jobs</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL-Datenbank<br /><small class="diagram-muted"
+      >Drizzle · Koordinationspunkt</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-server {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-server .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-server .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.diagram-server .diagram-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-server .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Dateibasierte Routen {#file-based-routes}
 
 Routen leben in `server/routes/` und Nitro ordnet Dateinamen Methoden und Pfaden zu:
@@ -185,13 +249,51 @@ Agent-native verlässt sich nicht auf Dateisystem-Watcher oder einen Sticky-In-M
 
 Dies funktioniert bei serverlosen und Multi-Instanz-Bereitstellungen, da die Datenbank der Koordinationspunkt ist. Wenn Sie benutzerdefinierte Mutationen außerhalb von actions schreiben, verwenden Sie Framework-Helfer oder geben Sie die entsprechende Synchronisierungsinvalidierung aus, also öffnen Sie die Aktualisierung von UIs.
 
-```an-diagram title="SQL-backed Synchronisierungsschleife" summary="Keine Beobachter, kein klebriger Zustand. Ein Schreibvorgang stößt eine Version in SQL an; Jeder Client fragt die Version ab und ruft sie erneut ab."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-box\" data-rough>Action / Helper<br><small class=\"diagram-muted\">mutates data</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>SQL-Datenbank</strong><small class=\"diagram-muted\">sync version increments</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">useDbSync()<br><small class=\"diagram-muted\">polls /_agent-native/poll</small></div><div class=\"diagram-pill ok\">invalidate caches &rarr; UI refreshes</div></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sync .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-16wa4ma" title="SQL-backed Synchronisierungsschleife" summary={"Keine Beobachter, kein klebriger Zustand. Ein Schreibvorgang stößt eine Version in SQL an; Jeder Client fragt die Version ab und ruft sie erneut ab."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-box" data-rough>
+    Action / Helper<br /><small class="diagram-muted">mutates data</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL-Datenbank</strong
+    ><small class="diagram-muted">sync version increments</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useDbSync()<br /><small class="diagram-muted"
+        >polls /_agent-native/poll</small
+      >
+    </div>
+    <div class="diagram-pill ok">invalidate caches &rarr; UI refreshes</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-la2pz2" title="Der Umfrageendpunkt" method="GET" path="/_agent-native/poll" summary={"Gibt die aktuellen Datenbanksynchronisierungsversionen pro Quelle zurück, damit der Client Änderungen erkennen kann."} auth="Session cookie (request-scoped identity)" responses={[
   {
     "status": "200",
@@ -213,13 +315,70 @@ Eingehender webhooks sollte überprüft werden, bestehen bleiben und schnell zur
 4. 200 sofort zurückgeben.
 5. Lassen Sie die neue Prozessorausführung die Agentenschleife ausführen und das Ergebnis veröffentlichen.
 
-```an-diagram title="Muster der Integrationswarteschlange" summary="Der Webhook-Handler gibt in Millisekunden zurück; Eine separate signierte Ausführung führt die Arbeit des langsamen Agenten aus."
-{
-  "html": "<div class=\"diagram-webhook\"><div class=\"diagram-box\" data-rough>Eingehender Webhook<br><small class=\"diagram-muted\">Slack · Stripe · email</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Handler</strong><div class=\"diagram-step\"><span class=\"diagram-pill\">1</span><small class=\"diagram-muted\">verify signature</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><small class=\"diagram-muted\">Arbeit in SQL einfügen</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">3</span><small class=\"diagram-muted\">self-fire processor</small></div><div class=\"diagram-step\"><span class=\"diagram-pill ok\">4</span><small class=\"diagram-muted\">return 200 now</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Signed processor<br><small class=\"diagram-muted\">führt die Agentenschleife aus und postet das Ergebnis</small></div></div>",
-  "css": ".diagram-webhook{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-webhook .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-webhook .diagram-step{display:flex;align-items:center;gap:8px}.diagram-webhook .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-y62aic" title="Muster der Integrationswarteschlange" summary={"Der Webhook-Handler gibt in Millisekunden zurück; Eine separate signierte Ausführung führt die Arbeit des langsamen Agenten aus."}>
+
+```html
+<div class="diagram-webhook">
+  <div class="diagram-box" data-rough>
+    Eingehender Webhook<br /><small class="diagram-muted"
+      >Slack · Stripe · email</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Handler</strong>
+    <div class="diagram-step">
+      <span class="diagram-pill">1</span
+      ><small class="diagram-muted">verify signature</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span
+      ><small class="diagram-muted">Arbeit in SQL einfügen</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">3</span
+      ><small class="diagram-muted">self-fire processor</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill ok">4</span
+      ><small class="diagram-muted">return 200 now</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Signed processor<br /><small class="diagram-muted"
+      >führt die Agentenschleife aus und postet das Ergebnis</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-webhook {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-webhook .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+.diagram-webhook .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-webhook .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!WARNING]
 > Verlassen Sie sich nicht auf unerwartete Versprechen, nachdem Sie eine Antwort zurückgegeben haben – serverlose Hosts frieren die Ausführung ein. Informationen zur kanonischen Integrationswarteschlange finden Sie unter [Messaging](/docs/messaging).
 

package/docs/content/locales/de-DE/sharing.mdx

@@ -27,13 +27,54 @@ Die grobe Sichtbarkeit lebt von der Ressource selbst; Fein abgestufte Zuteilunge
 
 `public` ist eine bewusst ruhige Ebene: Eine öffentliche Ressource ist über einen direkten Link erreichbar, sie wird jedoch **nicht** in den Seitenleisten, Listen oder der Suche anderer Benutzer angezeigt. Dadurch bleibt „Öffentlich für die gemeinsame Nutzung des URL“ von „Öffentlich für benutzerübergreifende Erkennung“ getrennt. Galerien und Vorlagenkataloge, die wirklich eine benutzerübergreifende Erkennung wünschen, entscheiden sich ausdrücklich dafür.
 
-```an-diagram title="Sichtbarkeit, die sich nach außen erweitert" summary="Grobe Sichtbarkeit auf der Ressource legt den Boden fest; Durch explizite Aktienzuteilungen in der Begleittabelle werden benannte Personen oben hinzugefügt."
-{
-  "html": "<div class=\"share-tiers\"><div class=\"diagram-card\"><span class=\"diagram-pill\">private</span><small class=\"diagram-muted\">owner + explicit grants only &middot; <strong>default</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">org</span><small class=\"diagram-muted\">+ anyone in the same org (read-only)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">public</span><small class=\"diagram-muted\">+ anyone with the link (read-only) &middot; hidden from others' lists/search</small></div></div>",
-  "css": ".share-tiers{display:flex;flex-direction:column;align-items:stretch;gap:8px}.share-tiers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.share-tiers .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-888xgo" title={"Sichtbarkeit, die sich nach außen erweitert"} summary={"Grobe Sichtbarkeit auf der Ressource legt den Boden fest; Durch explizite Aktienzuteilungen in der Begleittabelle werden benannte Personen oben hinzugefügt."}>
+
+```html
+<div class="share-tiers">
+  <div class="diagram-card">
+    <span class="diagram-pill">private</span
+    ><small class="diagram-muted"
+      >owner + explicit grants only &middot; <strong>default</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">org</span
+    ><small class="diagram-muted">+ anyone in the same org (read-only)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">public</span
+    ><small class="diagram-muted"
+      >+ anyone with the link (read-only) &middot; hidden from others'
+      lists/search</small
+    >
+  </div>
+</div>
+```
+
+```css
+.share-tiers {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+.share-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.share-tiers .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Rollen bei einer Aktienzuteilung {#roles}
 
 Wenn Sie etwas mit einem bestimmten Benutzer oder einer bestimmten Organisation teilen, wählen Sie eine Rolle aus:

package/docs/content/locales/de-DE/skills-guide.mdx

@@ -13,13 +13,72 @@ Skills live unter `.agents/skills/<name>/SKILL.md` und enthalten detaillierte An
 
 Die Frontmatter `name` und `description` jedes Skills werden immer in den skills-Block der Systemeingabeaufforderung eingefügt, damit der Agent weiß, welche skills vorhanden sind. Der vollständige Fertigkeitskörper wird bei Bedarf geladen, wenn der Agent entscheidet, dass eine Fertigkeit für die Aufgabe relevant ist (er wird auch über `docs-search` angezeigt). Aus diesem Grund ist es wichtig, Beschreibungen kurz und auslöserspezifisch zu halten: Die Beschreibung ist das Einzige, was der Agent liest, bevor er entscheidet, ob er den Rest lädt.
 
-```an-diagram title="Progressive Offenlegung" summary="Nur der Name + die Beschreibung jeder Fähigkeit sind immer im Kontext. Der gesamte Körper wird bedarfsgerecht belastet, wenn die Aufgabe passt."
-{
-  "html": "<div class=\"sk-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Immer im Systemprompt</span><div class=\"sk-list\"><span class=\"diagram-pill\">storing-data &mdash; <small class=\"diagram-muted\">add data models&hellip;</small></span><span class=\"diagram-pill\">real-time-sync &mdash; <small class=\"diagram-muted\">wire polling&hellip;</small></span><span class=\"diagram-pill\">create-skill &mdash; <small class=\"diagram-muted\">add a skill&hellip;</small></span></div><small class=\"diagram-muted\">just name + description (cheap)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><small class=\"diagram-muted\">task matches a description</small><span class=\"diagram-pill accent\">load on demand</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Full <code>SKILL.md</code> body<br><small class=\"diagram-muted\">Regeln, Code, Dos und Don’ts</small></div></div>",
-  "css": ".sk-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.sk-flow .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:240px}.sk-flow .sk-list{display:flex;flex-direction:column;gap:6px}.sk-flow .center{display:flex;flex-direction:column;align-items:center;gap:6px}.sk-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-1a8p3wm" title="Progressive Offenlegung" summary={"Nur der Name + die Beschreibung jeder Fähigkeit sind immer im Kontext. Der gesamte Körper wird bedarfsgerecht belastet, wenn die Aufgabe passt."}>
+
+```html
+<div class="sk-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Immer im Systemprompt</span>
+    <div class="sk-list">
+      <span class="diagram-pill"
+        >storing-data &mdash;
+        <small class="diagram-muted">add data models&hellip;</small></span
+      ><span class="diagram-pill"
+        >real-time-sync &mdash;
+        <small class="diagram-muted">wire polling&hellip;</small></span
+      ><span class="diagram-pill"
+        >create-skill &mdash;
+        <small class="diagram-muted">add a skill&hellip;</small></span
+      >
+    </div>
+    <small class="diagram-muted">just name + description (cheap)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <small class="diagram-muted">task matches a description</small
+    ><span class="diagram-pill accent">load on demand</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Full <code>SKILL.md</code> body<br /><small class="diagram-muted"
+      >Regeln, Code, Dos und Don’ts</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sk-flow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.sk-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 240px;
+}
+.sk-flow .sk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sk-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.sk-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## Framework skills {#framework-skills}
 
 Dies sind die skills, die mit der **Standardvorlage** gebündelt sind. Der genaue Satz, der in einer bestimmten App verfügbar ist, hängt von der Vorlage ab, aus der Sie das Gerüst erstellt haben. Überprüfen Sie im `.agents/skills/`-Verzeichnis dieser Vorlage, was tatsächlich enthalten ist.
@@ -148,14 +207,64 @@ Die agentennative Laufzeit liest skills von `.agents/skills/`. Der Claude-Code l
 
 Dies ersetzt den alten Trick, sich darauf zu verlassen, dass Claude-Code nur `.claude/skills` liest – `scope: dev` macht die Aufteilung zwischen Entwickler und Laufzeit zu einer erstklassigen, expliziten Wahl.
 
-```an-diagram title="Welcher Agent lädt welchen Skill?" summary="Der Bereich entscheidet, ob der In-App-Laufzeitagent einen Skill sieht. Dev-Skills sind nur für Ihren Codierungsagenten sichtbar."
-{
-"html": "<div class=\"sc-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill\">.agents/skills/</span><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: both</span><small class=\"diagram-muted\">default</small></div><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: runtime</span></div><div class=\"sc-row\"><span class=\"diagram-pill warn\">scope: dev</span></div></div><div class=\"sc-targets\"><div class=\"diagram-box\">Runtime agent<br><small class=\"diagram-muted\">reads <code>both</code> + <code>runtime</code></small></div><div class=\"diagram-box\">Coding-Agent<br><small class=\"diagram-muted\">Claude Code reads <code>.claude/skills/</code> + <code>dev</code></small></div></div></div>",
-"css": ".sc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.sc-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.sc-grid .sc-row{display:flex;align-items:center;gap:8px}.sc-grid .sc-targets{display:flex;flex-direction:column;gap:10px}"
-}
+<Diagram id="doc-block-a4spsw" title={"Welcher Agent lädt welchen Skill?"} summary={"Der Bereich entscheidet, ob der In-App-Laufzeitagent einen Skill sieht. Dev-Skills sind nur für Ihren Codierungsagenten sichtbar."}>
+
+```html
+<div class="sc-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill">.agents/skills/</span>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: both</span
+      ><small class="diagram-muted">default</small>
+    </div>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: runtime</span>
+    </div>
+    <div class="sc-row"><span class="diagram-pill warn">scope: dev</span></div>
+  </div>
+  <div class="sc-targets">
+    <div class="diagram-box">
+      Runtime agent<br /><small class="diagram-muted"
+        >reads <code>both</code> + <code>runtime</code></small
+      >
+    </div>
+    <div class="diagram-box">
+      Coding-Agent<br /><small class="diagram-muted"
+        >Claude Code reads <code>.claude/skills/</code> +
+        <code>dev</code></small
+      >
+    </div>
+  </div>
+</div>
+```
 
+```css
+.sc-grid {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.sc-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.sc-grid .sc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-grid .sc-targets {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 ```
 
+</Diagram>
+
 > **Siehe auch:** [Writing Agent Instructions](/docs/writing-agent-instructions) für die Formulierung von Fertigkeitsbeschreibungen, die Anwendung progressiver Offenlegung und die schlanke Gestaltung von `AGENTS.md`.
 
 ## Skills vs. AGENTS.md {#skills-vs-agents-md}

package/docs/content/locales/de-DE/template-analytics.mdx

@@ -18,13 +18,55 @@ Stellen Sie Analysefragen in einfachem Englisch und erhalten Sie Diagramme und D
 
 Es ist ein Open-Source-Ersatz für Amplitude, Mixpanel und Looker – für Teams, die den Code, die Abfragen und die Daten besitzen möchten.
 
-```an-diagram title="Frage zum Diagramm" summary="Der Agent konsultiert das Datenwörterbuch, schreibt SQL, validiert es anhand des Warehouse und rendert dann ein Diagramm oder speichert ein Panel."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Klare Sprache<br>question</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads data dictionary</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Schreibt SQL</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">Dry-run validieren</div><small class=\"diagram-muted\">BigQuery / Quelle</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Diagramm, Tabelle oder<br>saved panel</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ld02nh" title="Frage zum Diagramm" summary={"Der Agent konsultiert das Datenwörterbuch, schreibt SQL, validiert es anhand des Warehouse und rendert dann ein Diagramm oder speichert ein Panel."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">Klare Sprache<br />question</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">reads data dictionary</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>Schreibt SQL</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">Dry-run validieren</div>
+    <small class="diagram-muted">BigQuery / Quelle</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">Diagramm, Tabelle oder<br />saved panel</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Was Sie damit machen können
 
 - **Stellen Sie Datenfragen in einfachem Englisch.** „Wie viel Prozent der Anmeldungen im letzten Monat wurden in bezahlte Anmeldungen umgewandelt?“ oder „Zeige mir wöchentlich aktive Benutzer der letzten 6 Monate.“ Der Agent wählt die richtige Quelle aus, schreibt SQL und rendert das Diagramm.

package/docs/content/locales/de-DE/template-assets.mdx

@@ -18,13 +18,71 @@ Assets ist ein agentennativer Arbeitsbereich zum Erstellen und Verwalten markenk
 
 Wenn Sie die App öffnen, bleiben die ausgewählte Bibliothek, die Eingabeaufforderung, die Referenzen und die generierten Kandidaten in einem Arbeitsbereich. Der Agent kann jedes Asset über denselben actions durchsuchen, suchen, generieren, verfeinern und exportieren, den auch der UI verwendet.
 
-```an-diagram title="Generieren, überprüfen, wiederverwenden" summary="Referenzen und Eingabeaufforderungen speisen eine Sitzung zum Generieren und Auswählen. Ausgewählte Assets landen in einer Bibliothek und fließen über den Picker oder A2A an andere Apps."
-{
-  "html": "<div class=\"diagram-assets\"><div class=\"diagram-col\"><div class=\"diagram-node\">References<br><small class=\"diagram-muted\">Logos, Produktbilder, Stil</small></div><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">Chat- oder Generate-Steuerung</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Generierungssitzung</span><small class=\"diagram-muted\">image &amp; video candidates · audit log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Library</span><small class=\"diagram-muted\">ausgewählte, markenkonforme Assets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Picker<br><small class=\"diagram-muted\">iframe / MCP-App</small></div><div class=\"diagram-node\">A2A<br><small class=\"diagram-muted\">Folien · Design · Inhalte</small></div></div></div>",
-  "css": ".diagram-assets{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-assets .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-assets .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-assets .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-6q66nj" title={"Generieren, überprüfen, wiederverwenden"} summary={"Referenzen und Eingabeaufforderungen speisen eine Sitzung zum Generieren und Auswählen. Ausgewählte Assets landen in einer Bibliothek und fließen über den Picker oder A2A an andere Apps."}>
+
+```html
+<div class="diagram-assets">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      References<br /><small class="diagram-muted"
+        >Logos, Produktbilder, Stil</small
+      >
+    </div>
+    <div class="diagram-node">
+      Prompt<br /><small class="diagram-muted"
+        >Chat- oder Generate-Steuerung</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Generierungssitzung</span
+    ><small class="diagram-muted"
+      >image &amp; video candidates · audit log</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Library</span
+    ><small class="diagram-muted">ausgewählte, markenkonforme Assets</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Picker<br /><small class="diagram-muted">iframe / MCP-App</small>
+    </div>
+    <div class="diagram-node">
+      A2A<br /><small class="diagram-muted">Folien · Design · Inhalte</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-assets {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-assets .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-assets .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-assets .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Wann soll es ausgewählt werden?
 
 - **Ihr Team benötigt eine wiederverwendbare visuelle Anleitung**, keine einmaligen generischen Medienaufforderungen – sammeln Sie genehmigte Logos, Produktfotos und Stilbeispiele, damit Generationen bei der Marke bleiben.