Un repository di competenze per Claude Code per la creazione di temi Discourse e componenti a blocchi:
Cosa è incluso
Competenza di creazione del tema — copre un ambito completo per la creazione di un tema Discourse: impostazione iniziale con il CLI discourse_theme, architettura SCSS, libreria viewport, localizzazione, impostazioni, modificatori, trasformatori di valori, icone e variabili CSS. I file di riferimento dettagliati per icone, variabili e trasformatori sono inclusi separatamente e possono essere caricati su richiesta.
Competenza di creazione dei blocchi — copre il lato tema dell’API Blocks: scrittura di componenti a blocco con il decoratore @block, definizione degli schemi degli argomenti, rendering dei blocchi negli outlet core disponibili, condizioni, blocchi contenitore e raggruppamento del layout, e integrazione delle traduzioni e delle impostazioni del tema negli argomenti dei blocchi.
Tema di esempio — un tema funzionante con una homepage personalizzata costruita con blocchi, che dimostra pattern reali per outlet, condizioni e composizione del layout.
Informazioni sull’API Blocks
L’API Blocks è il nuovo framework di Discourse per costruire componenti UI modulari e componibili nei temi e nei plugin. I blocchi sono componenti Glimmer registrati in outlet denominati — come homepage-blocks, hero-blocks o sidebar-discovery — e possono essere visualizzati condizionalmente in base a route, utente, viewport, impostazioni del sito o disponibilità dei plugin.
Un punto di forza chiave del sistema è che i blocchi hanno un ambito ristretto e focalizzato e pattern coerenti. Questo li rende ideali per lo sviluppo assistito da AI: un modello con la competenza sui blocchi può generare rapidamente un componente a blocco funzionante, registrarlo in un outlet e configurare le condizioni in un’unica passata.
Il tema di esempio in questo repository dimostra una homepage che si adatta in base ai plugin e ai contenuti disponibili. Ecco come appare la homepage di base, con un blocco hero e un elenco di argomenti in evidenza:
Quando vengono soddisfatte condizioni aggiuntive (un tag in evidenza è configurato, il plugin Discourse Events è attivo e il plugin Discourse Leaderboard è disponibile), ulteriori blocchi vengono renderizzati condizionalmente nel layout:
I blocchi non sono limitati alla homepage. Il tema di esempio utilizza anche l’outlet sidebar-blocks per aggiungere un link Home, l’outlet sidebar-discovery per aggiungere contenuti specifici per categoria nella barra laterale e un blocco category-banner nella parte superiore delle pagine delle categorie:
L’ispettore dei blocchi su DevTools mostra le etichette degli outlet e gli identificatori dei blocchi sovrapposti alla pagina. Questo rende facile comprendere la struttura del layout e debuggare cosa viene renderizzato e dove:
Utilizzo con una piattaforma di design MCP
Le competenze si integrano perfettamente con le MCP delle piattaforme di design (come Penpot o Figma MCP). Con una connessione attiva, Claude può leggere le specifiche dei componenti e i token di design direttamente dai file di progettazione e implementarli utilizzando le convenzioni della competenza. È un ciclo più stretto tra design e codice, specialmente quando si lavora su un sistema di design strutturato.
Fork e personalizzazione
Alcune convenzioni nelle competenze riflettono preferenze personali, come l’architettura delle cartelle SCSS. Puoi fare un fork del repository e adattare le competenze per allinearle al tuo flusso di lavoro e alle tue convenzioni.
Condividi ciò che crei
Prova e facci sapere com’è andata! Siamo curiosi di sapere come stai utilizzando le competenze, cosa hai costruito con esse e dove potrebbero migliorare. Feedback, correzioni e fork sono tutti benvenuti.