Ein Repository für Claude Code-Fähigkeiten zum Erstellen von Discourse-Themen und Blockkomponenten:
Was enthalten ist
Theme-Authoring-Fähigkeit – deckt einen umfassenden Bereich der Erstellung eines Discourse-Themas ab: Gerüstbau mit der discourse_theme-CLI, SCSS-Architektur, Viewport-Bibliothek, Lokalisierung, Einstellungen, Modifikatoren, Werttransformer, Icons und CSS-Variablen. Detaillierte Referenzdateien für Icons, Variablen und Transformer sind separat enthalten und können bei Bedarf geladen werden. SKILL.md
Block-Authoring-Fähigkeit – behandelt die themenseitige Seite der Blocks-API: Schreiben von Blockkomponenten mit dem @block-Dekorator, Definieren von Args-Schemata, Rendern von Blöcken in die verfügbaren Kern-Outlets, Bedingungen, Container-Blöcke und Layout-Gruppierung sowie Integration von Theme-Übersetzungen und Einstellungen in Block-Args. SKILL.md
Beispiel-Theme – ein funktionierendes Theme 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 basierend auf Route, Benutzer, Viewport, Site-Einstellungen oder Plugin-Verfügbarkeit bedingt angezeigt werden.
Eine wesentliche Stärke des Systems ist, dass Blöcke einen kleinen, fokussierten Geltungsbereich und konsistente Muster aufweisen. Dies macht sie gut geeignet für die KI-unterstützte Entwicklung: Ein Modell mit der Block-Fähigkeit kann in einem Durchgang eine funktionierende Blockkomponente erstellen, sie in einem Outlet registrieren und Bedingungen einrichten.
Das Beispiel-Theme 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 zusätzliche Blöcke bedingt in das Layout gerendert:
Blöcke sind nicht auf die Homepage beschränkt. Das Beispiel-Theme nutzt auch das sidebar-blocks-Outlet, um einen Home-Link hinzuzufügen, das sidebar-discovery-Outlet, um kategoriespezifische Seitenleisteninhalte hinzuzufügen, und einen category-banner-Block am oberen Rand von Kategorien-Seiten:
Der Block-Inspektor in den DevTools zeigt die Outlet-Labels und Block-Identifikatoren überlagert auf der Seite an. Dies erleichtert das Verständnis der Layout-Struktur und das Debuggen, wo was gerendert wird:
Verwendung mit einer Design-Plattform-MCP
Die Fähigkeiten funktionieren gut in Kombination mit Design-Plattform-MCPs (wie dem Penpot- oder Figma-MCP). Wenn einer davon verbunden ist, kann Claude Komponentenspezifikationen und Design-Token direkt aus Ihren Design-Dateien lesen und sie unter Verwendung der Konventionen der Fähigkeit umsetzen. Dies schafft eine engere Schleife zwischen Design und Code, insbesondere bei der Arbeit mit einem strukturierten Design-System.
Forken und anpassen
Einige Konventionen in den Fähigkeiten sind eher Präferenzen als feste Regeln, wie z. B. die SCSS-Ordnerarchitektur. Sie können das Repository forken und die Fähigkeiten an Ihren eigenen Workflow und Ihre eigenen Konventionen anpassen.
Teilen Sie, was Sie bauen
Probieren Sie es aus und lassen Sie uns wissen, wie es läuft! Wir würden gerne hören, wie Sie die Fähigkeiten nutzen, was Sie damit gebaut haben und wo sie an Grenzen stoßen. Feedback, Korrekturen und Forks sind willkommen.