Ein Repository für Claude Code-Skills zum Erstellen von Discourse-Themen und Blockkomponenten:
Was enthalten ist
Theme-Authoring-Skill – deckt einen umfassenden Bereich beim Erstellen eines Discourse-Themas ab: Gerüstbau mit der discourse_theme-CLI, SCSS-Architektur, Viewport-Bibliothek, Lokalisierung, Einstellungen, Modifikatoren, Value-Transformer, Icons und CSS-Variablen. Detaillierte Referenzdateien für Icons, Variablen und Transformer sind separat enthalten und können bei Bedarf geladen werden.
Block-Authoring-Skill – behandelt die themenseitige Nutzung der Blocks-API: Schreiben von Blockkomponenten mit dem @block-Decorator, Definieren von Args-Schemata, Rendern von Blöcken in verfügbare Kern-Outlets, Bedingungen, Container-Blöcke und Layout-Gruppierung sowie Integration von Theme-Übersetzungen und Einstellungen in Block-Args.
Beispielthema – ein funktionierendes Thema mit einer benutzerdefinierten Homepage, die mit Blöcken erstellt wurde und reale Muster für Outlets, Bedingungen und Layout-Zusammensetzung demonstriert.
Über die Blocks-API
Die Blocks-API ist das neue Framework von Discourse zum Erstellen modularer, zusammensetzbarer UI-Komponenten in Themen und Plugins. Blöcke sind Glimmer-Komponenten, die in benannte Outlets registriert werden – wie homepage-blocks, hero-blocks oder sidebar-discovery – und können bedingt basierend auf Route, Benutzer, Viewport, Site-Einstellungen oder Plugin-Verfügbarkeit angezeigt werden.
Eine wesentliche Stärke des Systems ist, dass Blöcke einen kleinen, fokussierten Geltungsbereich und konsistente Muster aufweisen. Dies macht sie besonders gut geeignet für KI-gestützte Entwicklung: Ein Modell mit dem Block-Skill kann eine funktionierende Blockkomponente generieren, sie in einem Durchgang in ein Outlet registrieren und Bedingungen einrichten.
Das Beispielthema in diesem Repository demonstriert eine Homepage, die sich anpasst, je nachdem, welche Plugins und Inhalte verfügbar sind. So sieht die grundlegende Homepage aus, mit einem Hero-Block und einer Liste hervorgehobener Themen:
Wenn zusätzliche Bedingungen erfüllt sind (ein hervorgehobenes Tag konfiguriert ist, das Discourse Events-Plugin aktiv ist und das Discourse Leaderboard-Plugin verfügbar ist), werden weitere Blöcke bedingt in das Layout eingefügt:
Blöcke sind nicht auf die Homepage beschränkt. Das Beispielthema nutzt auch den sidebar-blocks-Outlet, um einen Home-Link hinzuzufügen, den sidebar-discovery-Outlet für kategoriespezifischen Sidebar-Inhalt und einen category-banner-Block am Anfang von Kategorie-Seiten:
Der Block-Inspektor in den DevTools zeigt die Outlet-Labels und Block-Identifikatoren überlagert auf der Seite an. Das macht es einfach, die Layout-Struktur zu verstehen und zu debuggen, was wo gerendert wird:
Verwendung mit einer Design-Plattform-MCP
Die Skills lassen sich hervorragend mit Design-Plattform-MCPs (wie dem Penpot- oder Figma-MCP) kombinieren. Sobald einer verbunden ist, kann Claude Komponentenspezifikationen und Design-Tokens direkt aus Ihren Design-Dateien lesen und sie gemäß den Konventionen des Skills implementieren. Der Kreislauf zwischen Design und Code wird enger, besonders bei der Arbeit mit einem strukturierten Design-System.
Forken und anpassen
Einige Konventionen in den Skills spiegeln persönliche Vorlieben wider, wie etwa die SCSS-Ordnerstruktur. Sie können das Repository forken und die Skills an Ihren eigenen Workflow und Ihre Konventionen anpassen.
Teilen Sie, was Sie erstellen
Probieren Sie es aus und lassen Sie uns wissen, wie es läuft! Wir würden gerne hören, wie Sie die Skills nutzen, was Sie damit gebaut haben und wo sie an Grenzen stoßen. Feedback, Korrekturen und Forks sind ausdrücklich willkommen.