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 de création de thème — couvre un champ complet de la création d’un thème Discourse : génération de squelette avec l’outil CLI 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. SKILL.md
Compétence de création de blocs — couvre l’aspect 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. SKILL.md
Thème d’exemple — un thème fonctionnel avec une page d’accueil personnalisée construite avec des blocs, démontrant des modèles réels pour les sorties, les conditions et la composition de la 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.
Une force clé du système est que les blocs ont une portée petite et ciblée, ainsi que 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 sont pas limités à 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 blocs superposés sur la page. Cela facilite la compréhension de la structure de la mise en page et le débogage de l’emplacement du rendu :
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ée, Claude peut lire les spécifications des composants et les jetons de conception directement depuis vos fichiers de conception et les implémenter en suivant les conventions de la compétence. Cela crée une boucle plus étroite entre la conception et le code, surtout lorsque vous travaillez à partir d’un système de conception structuré.
Fork et ajustement
Certaines conventions dans les compétences relèvent davantage de préférences que de normes, comme l’architecture des dossiers SCSS. Vous pouvez faire un fork du dépôt et ajuster les compétences pour qu’elles correspondent à votre propre flux de travail et à vos conventions.
Partagez ce que vous construisez
Essayez-le et faites-nous savoir comment cela se passe ! Nous aimerions savoir 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.
… Comme les autres outils de conception IA, il est vraiment performant pour prototyper rapidement des idées qui auraient été trop coûteuses à esquisser manuellement.
