Un référentiel de compétences Claude Code pour créer des thèmes Discourse et des composants de blocs :
Ce qui est inclus
Compétence d’élaboration de thèmes — couvre l’ensemble du processus de création d’un thème Discourse : génération de squelettes avec l’outil en ligne de commande discourse_theme, architecture SCSS, bibliothèque de vues, localisation, paramètres, modificateurs, transformateurs de valeurs, icônes et variables CSS. Des fichiers de référence détaillés pour les icônes, les variables et les transformateurs sont fournis séparément et peuvent être chargés à la demande.
Compétence d’élaboration de blocs — couvre la partie thème de l’API des blocs : écriture de composants de blocs avec le décorateur @block, définition des schémas d’arguments, rendu des blocs dans les sorties principales disponibles, conditions, blocs conteneurs et regroupement de mise en page, ainsi que l’intégration des traductions et paramètres du thème dans les arguments des blocs.
Thème d’exemple — un thème fonctionnel avec une page d’accueil personnalisée construite à l’aide de blocs, démontrant des modèles réels pour les sorties, les conditions et la composition de mise en page.
À propos de l’API des blocs
L’API des blocs est le nouveau framework de Discourse pour créer des composants d’interface utilisateur modulaires et composites dans les thèmes et les plugins. Les blocs sont des composants Glimmer enregistrés dans des sorties nommées — comme homepage-blocks, hero-blocks ou sidebar-discovery — et peuvent être affichés conditionnellement en fonction de la route, de l’utilisateur, de la vue, des paramètres du site ou de la disponibilité des plugins.
L’un des points forts du système est que les blocs ont une portée limitée et des modèles cohérents. Cela les rend particulièrement adaptés au développement assisté par IA : un modèle disposant de la compétence des blocs peut générer un composant de bloc fonctionnel, l’enregistrer dans une sortie et configurer les conditions en une seule passe.
Le thème d’exemple de ce dépôt démontre une page d’accueil qui s’adapte en fonction des plugins et du contenu disponibles. Voici à quoi ressemble la page d’accueil de base, avec un bloc héro et une liste de sujets en vedette :
Lorsque des conditions supplémentaires sont remplies (un tag en vedette est configuré, le plugin Discourse Events est actif et le plugin Discourse Leaderboard est disponible), des blocs supplémentaires sont rendus conditionnellement dans la mise en page :
Les blocs ne se limitent pas à la page d’accueil. Le thème d’exemple utilise également la sortie sidebar-blocks pour ajouter un lien Accueil, la sortie sidebar-discovery pour ajouter du contenu spécifique aux catégories dans la barre latérale, et un bloc category-banner en haut des pages de catégories :
L’inspecteur de blocs dans DevTools affiche les étiquettes des sorties et les identifiants de bloc superposés sur la page. Cela permet de comprendre facilement la structure de la mise en page et de déboguer ce qui est rendu où :
Utilisation avec une plateforme de conception MCP
Les compétences fonctionnent bien avec les MCP de plateformes de conception (comme Penpot ou Figma MCP). Une fois connectés, Claude peut lire les spécifications des composants et les jetons de conception directement à partir de vos fichiers de conception et les implémenter en suivant les conventions de la compétence. C’est un cycle plus étroit entre la conception et le code, surtout lorsque l’on travaille à partir d’un système de conception structuré.
Forkez et ajustez
Certaines conventions dans les compétences reflètent des préférences personnelles, comme l’architecture des dossiers SCSS. Vous pouvez forker le dépôt et ajuster les compétences pour qu’elles correspondent à votre propre flux de travail et à vos conventions.
Partagez ce que vous créez
Essayez-le et faites-nous savoir comment cela se passe ! Nous serions ravis d’entendre comment vous utilisez les compétences, ce que vous avez construit avec elles et où elles montrent leurs limites. Les retours, corrections et forks sont les bienvenus.