Um repositório de habilidades do Claude Code para criar temas e componentes de blocos do Discourse:
O que está incluído
Habilidade de Criação de Temas — abrange um escopo completo para construir um tema do Discourse: scaffolding 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 estão incluídos separadamente e podem ser carregados sob demanda. SKILL.md
Habilidade de Criação de Blocos — abrange o lado do tema da API de Blocos: escrever componentes de bloco com o decorador @block, definir esquemas de argumentos, renderizar blocos nas saídas principais disponíveis, condições, blocos de contêiner e agrupamento de layout, e integrar traduções e configurações do tema aos argumentos do bloco. SKILL.md
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 compostá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, usuário, viewport, configurações do site ou disponibilidade de plugins.
Uma força chave do sistema é que os blocos têm escopo pequeno e focado e padrões consistentes. Isso os torna bem adequados para desenvolvimento assistido por IA: um modelo com a habilidade de bloco pode criar um componente de bloco funcional, registrá-lo em uma saída e configurar as condições em uma única passada.
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 se parece, 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 da categoria na barra lateral e um bloco category-banner no topo das páginas de categoria:
O inspetor de blocos nas Ferramentas de Desenvolvedor mostra os rótulos das saídas e os identificadores dos blocos sobrepostos na página. Isso facilita entender a estrutura do layout e depurar o que está sendo renderizado onde:
Usando com um MCP de plataforma de design
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 fechado 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 são mais preferenciais do que convencionais, como a arquitetura de pastas SCSS. Você pode fazer um fork do repositório e ajustar as habilidades para corresponder ao seu próprio fluxo de trabalho e convenções.
Compartilhe o que você constrói
Experimente e nos conte como foi! Adoraríamos saber como você está usando as habilidades, o que construiu com elas e onde elas falham. Comentários, correções e forks são todos bem-vindos.
… Como outras ferramentas de design com IA, é realmente eficiente para prototipar rapidamente ideias que seriam muito caras para esboçar manualmente.
