Um repositório de habilidades do Claude Code para criar temas do Discourse e componentes de bloco:
O que está incluído
Habilidade de Criação de Temas — abrange um escopo completo para construir um tema do Discourse: estruturação com o CLI discourse_theme, arquitetura SCSS, biblioteca de viewport, internacionalização, configurações, modificadores, transformadores de valor, ícones e variáveis CSS. Arquivos de referência detalhados para ícones, variáveis e transformadores são incluídos separadamente e podem ser carregados sob demanda.
Habilidade de Criação de Blocos — abrange o lado do tema da API de Blocos: criação de componentes de bloco com o decorador @block, definição de esquemas de argumentos, renderização de blocos nas saídas principais disponíveis, condições, blocos de contêiner e agrupamento de layout, além da integração de traduções e configurações do tema nos argumentos dos blocos.
Tema de Exemplo — um tema funcional com uma página inicial personalizada construída com blocos, demonstrando padrões reais para saídas, condições e composição de layout.
Sobre a API de Blocos
A API de Blocos é o novo framework do Discourse para criar componentes de UI modulares e composáveis em temas e plugins. Os blocos são componentes Glimmer registrados em saídas nomeadas — como homepage-blocks, hero-blocks ou sidebar-discovery — e podem ser exibidos condicionalmente com base na rota, no usuário, na viewport, nas configurações do site ou na disponibilidade de plugins.
Uma das principais vantagens do sistema é que os blocos têm escopo pequeno e focado, com padrões consistentes. Isso os torna ideais para desenvolvimento assistido por IA: um modelo com a habilidade de blocos pode criar um componente de bloco funcional, registrá-lo em uma saída e configurar as condições em uma única execução.
O tema de exemplo neste repositório demonstra uma página inicial que se adapta com base nos plugins e conteúdos disponíveis. Veja como é a página inicial básica, com um bloco de destaque e uma lista de tópicos em destaque:
Quando condições adicionais são atendidas (uma tag em destaque está configurada, o plugin Discourse Events está ativo e o plugin Discourse Leaderboard está disponível), blocos adicionais são renderizados condicionalmente no layout:
Os blocos não se limitam à página inicial. O tema de exemplo também usa a saída sidebar-blocks para adicionar um link Início, a saída sidebar-discovery para adicionar conteúdo específico de categoria na barra lateral e um bloco category-banner no topo das páginas de categoria:
O inspetor de blocos no DevTools exibe os rótulos das saídas e os identificadores dos blocos sobrepostos na página. Isso facilita entender a estrutura do layout e depurar onde cada elemento está sendo renderizado:
Uso com uma plataforma de design MCP
As habilidades funcionam bem com MCPs de plataformas de design (como o Penpot ou o Figma MCP). Com um conectado, o Claude pode ler especificações de componentes e tokens de design diretamente dos seus arquivos de design e implementá-los usando as convenções da habilidade. É um ciclo mais integrado entre design e código, especialmente ao trabalhar com um sistema de design estruturado.
Faça um fork e ajuste
Algumas convenções nas habilidades refletem preferências pessoais, como a arquitetura de pastas SCSS. Você pode fazer um fork do repositório e ajustar as habilidades para atender ao seu próprio fluxo de trabalho e convenções.
Compartilhe o que você construiu
Experimente e nos conte como foi! Adoraríamos saber como você está usando as habilidades, o que construiu com elas e onde elas apresentam limitações. Comentários, correções e forks são todos bem-vindos.