Un repositorio de habilidades de Claude Code para crear temas y componentes de bloques en Discourse:
Qué incluye
Habilidad de creación de temas — abarca un alcance completo para construir un tema de Discourse: generación de estructura con la CLI discourse_theme, arquitectura SCSS, biblioteca de vistas, localización, configuraciones, modificadores, transformadores de valores, iconos y variables CSS. Los archivos de referencia detallados para iconos, variables y transformadores se incluyen por separado y pueden cargarse bajo demanda. SKILL.md
Habilidad de creación de bloques — cubre el lado del tema de la API de bloques: escritura de componentes de bloque con el decorador @block, definición de esquemas de argumentos, renderizado de bloques en los puntos de conexión principales disponibles, condiciones, bloques contenedores y agrupación de diseño, e integración de traducciones y configuraciones del tema en los argumentos de los bloques. SKILL.md
Tema de ejemplo — un tema funcional con una página de inicio personalizada construida con bloques, que demuestra patrones reales para puntos de conexión, condiciones y composición de diseño.
Sobre la API de bloques
La API de bloques es el nuevo marco de Discourse para crear componentes de interfaz de usuario modulares y composables en temas y plugins. Los bloques son componentes Glimmer registrados en puntos de conexión con nombre, como homepage-blocks, hero-blocks o sidebar-discovery, y pueden mostrarse condicionalmente según la ruta, el usuario, la vista, la configuración del sitio o la disponibilidad de plugins.
Una fortaleza clave del sistema es que los bloques tienen un alcance pequeño y enfocado, así como patrones consistentes. Esto los hace ideales para el desarrollo asistido por IA: un modelo con la habilidad de bloques puede generar un componente de bloque funcional, registrarlo en un punto de conexión y configurar las condiciones en una sola pasada.
El tema de ejemplo en este repositorio demuestra una página de inicio que se adapta según los plugins y el contenido disponibles. Así es como se ve la página de inicio básica, con un bloque principal y una lista de temas destacados:
Cuando se cumplen condiciones adicionales (se configura una etiqueta destacada, el plugin Discourse Events está activo y el plugin Discourse Leaderboard está disponible), se renderizan bloques adicionales condicionalmente en el diseño:
Los bloques no se limitan a la página de inicio. El tema de ejemplo también utiliza el punto de conexión sidebar-blocks para agregar un enlace Inicio, el punto de conexión sidebar-discovery para agregar contenido específico de categoría en la barra lateral, y un bloque category-banner en la parte superior de las páginas de categoría:
El inspector de bloques en DevTools muestra las etiquetas de los puntos de conexión y los identificadores de bloques superpuestos en la página. Esto facilita entender la estructura del diseño y depurar dónde se está renderizando cada elemento:
Uso con una plataforma de diseño MCP
Las habilidades funcionan muy bien con MCPs de plataformas de diseño (como Penpot o Figma). Con uno conectado, Claude puede leer especificaciones de componentes y tokens de diseño directamente desde tus archivos de diseño e implementarlos usando las convenciones de la habilidad. Es un ciclo más estrecho entre diseño y código, especialmente al trabajar desde un sistema de diseño estructurado.
Haz un fork y ajusta
Algunas convenciones en las habilidades son más preferencia que convención, como la arquitectura de carpetas SCSS. Puedes hacer un fork del repositorio y ajustar las habilidades para que coincidan con tu propio flujo de trabajo y convenciones.
Comparte lo que construyas
¡Pruébalo y cuéntanos cómo te fue! Nos encantaría saber cómo estás usando las habilidades, qué has construido con ellas y dónde tienen limitaciones. Los comentarios, correcciones y forks son bienvenidos.
… Al igual que otras herramientas de diseño con IA, es muy eficiente para prototipar rápidamente ideas que habrían sido demasiado costosas de esbozar manualmente.
