avasis-ai/skill-to-ui-compiler

Was macht skill-to-ui-compiler?

Erstelle sofort eine Web-App aus der SKILL.md eines Agenten.

Beschreibung

Dieser Skill wandelt die SKILL.md eines KI-Agenten (wie für Claude Code, Cursor, Codex usw.) automatisch in eine vollständige Webanwendung um. Er analysiert die Markdown-Struktur, extrahiert Name, Beschreibung, API-Definitionen, Parameter und Codeblöcke und generiert daraus eine moderne, responsive Single-Page-Application (SPA) – ohne dass du manuell UI-Code schreiben musst.

Verwendung

1. Installation (falls nicht bereits im Agenten integriert):
   • Nutze den Befehl /skill install avasis-ai/skill-to-ui-compiler in deinem Agenten-Interface.
2. Aufruf:
   • Gib den Pfad zu einer SKILL.md an, z. B. compile path/to/SKILL.md.
   • Oder verwende den Kurzbefehl ui-compile gefolgt von der Markdown-Datei.
3. Ausgabe:
   • Der Compiler erzeugt eine Web-App als ZIP-Datei oder direkt als HTML-Datei (je nach Konfiguration).
   • Du erhältst einen Link zum Öffnen im Browser oder kannst die Datei lokal speichern.

Voraussetzungen

• Ein KI-Agent mit Unterstützung für Skills (z. B. Claude Code, Cursor, Codex).
• Eine gültige SKILL.md-Datei im Standardformat (siehe Spezifikation).
• Optional: Node.js für erweiterte Builds (nicht zwingend erforderlich).

Funktionsweise

1. Parsen: Die SKILL.md wird in ein JSON-Objekt konvertiert, das alle relevanten Informationen enthält.
2. Template-Generierung: Ein UI-Template (basierend auf Tailwind CSS oder einfachem HTML/CSS) wird mit den extrahierten Daten gefüllt.
3. Export: Das Ergebnis wird als ausführbare HTML-Datei oder als ZIP mit HTML, CSS und JS ausgegeben.

Beispiele

Einfacher Aufruf:

/compile ./skills/SKILL.md

Mit benutzerdefiniertem Stil:

/compile ./skills/SKILL.md --style dark

Optionen:

Parameter	Beschreibung	Standardwert
--style	UI-Stil (light, dark, auto)	auto
--format	Ausgabeformat (html, zip)	html
--output	Zielverzeichnis oder Dateiname	./output

Integration

• Claude Code: /compile Befehl verfügbar.
• Cursor: Nutze die Erweiterung „UI Compiler“ in der IDE.
• Codex: Via API-Aufruf mit skill:ui-compile.

Lizenz

MIT – siehe LICENSE.

Autor

Avasis AI – https://avasis.ai