KI-Agent-Skill

Templatical bietet einen Agent Skill — kostenlos, quelloffen und vollständig in Ihrem eigenen KI-Coding-Agenten ausgeführt: templatical. Bitten Sie ihn um eine E-Mail, und er schreibt, bearbeitet, importiert, validiert oder zeigt eine Vorlage live an; fragen Sie ihn etwas zur SDK, und er installiert sie, bindet sie ein, setzt eine Integration auf oder behebt deren Fehler. Ein Skill — und er entscheidet selbst, welche Aufgabe eine Anfrage braucht.

Es gibt kein Backend und keinen API-Schlüssel: Ihr Agent ist die Inferenz. Nichts wird an Templatical gesendet.

Installation

npx skills add templatical/sdk

Für ein Update:

npx skills update templatical

Falls Ihr Agent den Skill danach nicht aufgreift, prüfen Sie, ob er in der Skill-Liste des Agenten aktiviert ist.

Was er kann

• Bauen Sie eine Vorlage aus einem Briefing — „mach mir eine Produktlaunch-E-Mail", „gestalte eine Willkommens-E-Mail".
• Bearbeiten Sie eine bestehende Vorlage als gezielte Änderung, nicht als Neuschrieb.
• Importieren Sie eine Vorlage aus nahezu jeder Quelle — mit eigenen Konvertern für Unlayer, BeeFree, Stripo, Topol, Chamaileon, Easy Email Pro, MJML und HTML, und für alles andere bildet er die Quelle von Hand auf das Block-Schema ab.
• Validieren Sie das JSON einer Vorlage gegen das Block-Schema und erhalten Sie präzise Fehler pro Block zurück.
• Exportieren Sie eine Vorlage als versandfertiges MJML oder HTML.
• Sehen Sie sie live im echten Templatical-Editor in Ihrem Browser an — sie bleibt synchron, während Sie weiter prompten, Änderungen von Hand eingeschlossen.
• Integrieren Sie den Editor in eine Anwendung — Stack erkennen, die Änderung vorschlagen und abwarten, bevor irgendetwas geschrieben wird.
• Setzen Sie eine vorgeschlagene Integration in Ihr Repository um, installiert mit Ihrem eigenen Paketmanager und geprüft gegen Ihren laufenden Dev-Server.
• Diagnostizieren Sie eine Integration, die nicht wie erwartet funktioniert, anhand einer Tabelle verifizierter Fallstricke.
• Beantworten Sie eine Frage zur SDK, indem diese Dokumentationsseite direkt abgerufen wird.

Die mechanischen Schritte — validieren, rendern, importieren, Live-Vorschau — sind @templatical/template-tools. Der Skill steuert diese CLI; dieselben Befehle laufen ohne Agenten aus einer Shell.

Lieber eine gehostete Lösung?

Ein KI-Chat direkt im Editor, feinabgestimmte Prompts und ein gehosteter MCP-Server sind Teil des Templatical-Cloud-Tarifs. Dieser Skill ist der offene, selbst gehostete Weg — bringen Sie Ihren eigenen Agenten mit und behalten Sie die volle Kontrolle.

Beispiele

Eine E-Mail bauen, validieren und exportieren — ohne Integration

Beschreiben Sie die gewünschte E-Mail. Zum Beispiel:

Gib mir eine Produktlaunch-E-Mail für eine Outdoor-Marke — ein Hero-Bild, eine kurze Einleitung und einen „Jetzt shoppen"-Button, in Waldgrün und mit einem warmen, neutralen Hintergrund.

Der Agent wird:

1. das Block-Schema und die mitgelieferten Beispiele des Skills lesen,
2. ein vollständiges Template als { blocks, settings }-JSON erzeugen,
3. den Validator selbst ausführen und die gemeldeten Struktur- oder Barrierefreiheitsprobleme beheben — so lange, bis das Template besteht,
4. Ihnen die fertige E-Mail übergeben: MJML/HTML zum Versand exportieren, oder das JSON mit editor.setContent(json) in Ihre eigene Editor-Integration laden.

Das ist eine komplette E-Mail, von Anfang bis Ende, ohne eine Integration zu bauen. Sie können sie vor dem Export auch live ansehen — siehe das nächste Beispiel.

Live ansehen und von Hand bearbeiten

Bitten Sie darum, es live zu zeigen (oder „live in der Vorschau", „im Live-Modus bauen"), und der Skill:

1. öffnet eine Live-Vorschau in Ihrem Browser, die Ihr aktuelles Template im echten Editor zeigt.
2. aktualisiert sie bei jeder Änderung, die Sie prompten, live — ohne Neuladen.
3. lässt Sie auch im Browser von Hand bearbeiten; der Agent erkennt, wenn Sie abgewichen sind, und fragt, ob er auf Ihrer Version aufbauen oder sie ersetzen soll, bevor er überschreibt.

Bauen Sie zuerst in reinem JSON und wechseln Sie mitten in der Sitzung zu einer Live-Vorschau — sie knüpft genau dort an, wo Sie stehen. Der Live-Modus ist lokal und für einen einzelnen Nutzer — nicht der Echtzeit-Weg der Cloud — und benötigt nichts außer einem Coding-Agenten, der auf Ihrem eigenen Rechner läuft.

Eine bestehende Vorlage importieren

Haben Sie bereits eine Vorlage in einem anderen Editor? Der Skill wandelt Unlayer-, BeeFree-, Stripo-, Topol-, Chamaileon-, Easy Email Pro-, MJML- und HTML-E-Mails in Templatical-JSON um — zeigen Sie ihm die Datei, und er schreibt eine funktionierende Vorlage plus einen kurzen Bericht darüber, was sauber konvertiert wurde und was auf rohes HTML zurückgefallen ist (der Import ist naturgemäß verlustbehaftet). Sehen Sie sie sich anschließend live an und verfeinern Sie die groben Stellen zu nativen Blöcken.

Kein Konverter für Ihre Quelle? Es funktioniert trotzdem. Der Skill kennt das Block-Schema und kann deshalb eine unbekannte Vorlage lesen und von Hand übertragen — eine WordPress-Block-Vorlage, einen Mailchimp- oder Klaviyo-Export, eine handgeschriebene HTML-E-Mail, sogar einen Screenshot oder ein PDF davon. Er liest die Quelle, plant die Abbildung, baut die Blöcke und validiert das Ergebnis wie jede andere Vorlage. Langsamer und weniger exakt als ein Konverter — und es lohnt sich, ausdrücklich danach zu fragen.

Die Liste der Konverter wächst, deshalb fragt der Skill die CLI, was verfügbar ist, anstatt es anzunehmen — Sie müssen das nie vorab prüfen.

Um die Konverter stattdessen direkt in Ihrem eigenen Code zu verwenden, siehe die Migrationsleitfäden: Unlayer, BeeFree, Stripo, Topol, Chamaileon, Easy Email Pro, MJML, HTML.

Den Editor integrieren — oder eine bestehende Integration diagnostizieren

Bitten Sie ihn, eine komplett neue Integration aufzusetzen, einer bestehenden einen Save/Load-Provider hinzuzufügen, oder zu erklären, warum ein Editor, der in einem Modal eingebunden ist, seine Dialoge an der falschen Stelle rendert. Bei einer neuen Integration:

1. Erkennt er Ihren Stack — Paketmanager, Framework, Bundler, TypeScript, und ob @templatical/editor bereits installiert ist, und in welcher Version.
2. Schlägt er die Änderung vor und wartet — die hinzuzufügenden Pakete, die zu erstellenden oder zu bearbeitenden Dateien, den Mount-Punkt — bevor er irgendetwas anfasst.
3. Setzt er sie um, installiert dabei mit Ihrem eigenen Paketmanager.
4. Überprüft er, indem er Ihren Dev-Server startet und dessen Konsolen- und Netzwerkausgabe liest — nicht, indem er Sie bittet, selbst nachzusehen.
5. Berichtet er, was sich geändert hat, was unangetastet blieb, und was noch gebraucht wird — ein Provider, eine optionale Peer-Abhängigkeit, ein Cloud-Auth-Endpunkt.

Eine bestehende Integration zu diagnostizieren durchläuft dieselben Schritte rückwärts: Er liest Ihren init()-/initCloud()-Aufruf, die Bundler-Konfiguration und das CSS-Setup, und prüft jedes davon gegen eine Tabelle verifizierter Fallstricke — doppelte Vue-Reaktivität, ein fehlender style.css-Import, ein gefangener position: fixed-Vorfahre, und mehr.

Gut zu wissen

Bringen Sie Ihr eigenes Branding mit

Ergänzen Sie Ihren eigenen Kontext, und der Agent verwendet ihn anstelle generischer Standardwerte: Markenfarben und -schriften, Tonalität, einen eigenen System-Prompt, einen verpflichtenden Footer oder Abmelde-Block. Das lohnt sich einmalig, wenn Sie mehr als eine E-Mail erzeugen möchten.

Benutzerdefinierte Blöcke werden nie aus einem Prompt erzeugt

Benutzerdefinierte Blöcke sind zur Laufzeit registrierte Erweiterungen des Konsumenten — der Skill kann nicht wissen, was ein solcher Block tut, und erzeugt ihn deshalb nie aus einem Prompt. Wie Sie einen eigenen registrieren, steht unter Benutzerdefinierte Blöcke.

Nie countdown ausgeben

countdown braucht das serverseitige animierte GIF von Cloud; der OSS-Renderer kann es nicht erzeugen. Bei einer Countdown-Anfrage das sagen und einen statischen Ersatz anbieten — Titel oder Absatz mit dem Datum, oder eine Zeile „Noch X Tage“.

Native Blöcke bevorzugen

html nur als letzte Option — rohes HTML lässt sich danach nicht mehr visuell bearbeiten.

settings.locale an den Text anpassen

settings.locale wird zu <html lang>. Auf die Sprache des erzeugten Texts setzen; deutschen Text nicht auf "en" defaulten. Für ar/he/fa/ur/… zusätzlich direction: "rtl" setzen (oder weglassen — diese Locales gelten als RTL).