Un repository di competenze per Claude Code per la creazione di temi e componenti a blocchi per Discourse:
Cosa è incluso
Competenza per la creazione di temi — copre un ambito completo per la costruzione di un tema Discourse: scaffolding con il CLI discourse_theme, architettura SCSS, libreria viewport, localizzazione, impostazioni, modificatori, trasformatori di valori, icone e variabili CSS. Sono inclusi separatamente file di riferimento dettagliati per icone, variabili e trasformatori, che possono essere caricati su richiesta. SKILL.md
Competenza per la creazione di blocchi — copre il lato tema della Blocks API: scrittura di componenti a blocchi 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 impostazioni del tema negli argomenti dei blocchi. SKILL.md
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 sulla Blocks API
La Blocks API è il nuovo framework di Discourse per la creazione di 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 adatti allo sviluppo assistito da AI: un modello con la competenza sui blocchi può generare rapidamente un componente a blocco funzionante, registrarlo su 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), vengono renderizzati condizionalmente ulteriori blocchi 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 dove viene renderizzato ogni elemento:
Utilizzo con una piattaforma di design MCP
Le competenze si integrano perfettamente con le MCP delle piattaforme di design (come Penpot o Figma MCP). Connesso uno di questi, Claude può leggere le specifiche dei componenti e i token di design direttamente dai file di design e implementarli seguendo 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 sono più una preferenza che una regola, 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 come va! Siamo felici di sapere come stai utilizzando le competenze, cosa hai costruito con esse e dove mostrano limiti. Feedback, correzioni e fork sono tutti benvenuti.
… Come gli altri strumenti di progettazione basati sull’IA, è molto performante per prototipare rapidamente idee che sarebbero state troppo costose da schizzare a mano.
