一个用于构建 Discourse 主题和区块组件的 Claude Code 技能库：
包含内容
主题创作技能 —— 涵盖构建 Discourse 主题的完整范围：使用 discourse_theme CLI 进行脚手架搭建、SCSS 架构、视口库、本地化、设置、修饰符、值转换器、图标以及 CSS 变量。图标、变量和转换器的详细参考文件单独提供，可按需加载。
区块创作技能 —— 涵盖 Blocks API 的主题端部分：使用 @block 装饰器编写区块组件、定义参数（args）模式、将区块渲染到可用的核心出口（outlets）、条件判断、容器区块与布局分组，以及将主题翻译和设置集成到区块参数中。
示例主题 —— 一个使用区块构建自定义主页的可运行主题，展示了出口、条件判断和布局组合的实际模式。
关于 Blocks API
Blocks API 是 Discourse 用于在主题和插件中构建模块化、可组合 UI 组件的新框架。区块是注册到命名出口（如 homepage-blocks、hero-blocks 或 sidebar-discovery）的 Glimmer 组件，并且可以根据路由、用户、视口、站点设置或插件可用性进行条件显示。
该系统的一个关键优势在于区块具有小而专注的作用域以及一致的模式。这使得它们非常适合 AI 辅助开发：具备区块技能的模型可以在单次操作中完成工作区块组件的脚手架搭建、将其注册到出口，并配置条件逻辑。
本仓库中的示例主题展示了一个可根据可用插件和内容自适应调整的主页。以下是基本主页的样式，包含一个英雄区块和一个精选话题列表：
当满足额外条件时（例如配置了精选标签、Discourse Events 插件处于激活状态，且 Discourse Leaderboard 插件可用），额外的区块会被条件性地渲染到布局中：
区块不仅限于主页。示例主题还使用了 sidebar-blocks 出口来添加主页链接，使用 sidebar-discovery 出口添加特定分类的侧边栏内容，并在分类页面顶部添加了 category-banner 区块：
DevTools 中的区块检查器会在页面上叠加显示出口标签和区块标识符。这使得理解布局结构和调试渲染位置变得非常容易：
与设计平台 MCP 配合使用
这些技能与设计平台 MCP（如 Penpot 或 Figma MCP）搭配效果极佳。连接其中一个后，Claude 可以直接从设计文件中读取组件规范和设计令牌，并按照技能约定进行实现。这大大缩短了设计与代码之间的迭代周期，尤其是在基于结构化设计系统工作时。
分叉并调整
技能中的一些约定反映了个人偏好，例如 SCSS 文件夹架构。您可以分叉该仓库，并根据自己的工作流和约定调整这些技能。
分享您的成果
不妨尝试一下，并告诉我们您的体验！我们非常希望能了解您如何使用这些技能、用它们构建了什么，以及它们存在的不足。欢迎提供反馈、修正意见，也欢迎分叉项目。