Discourse テーマおよびブロックコンポーネントの構築のための Claude Code スキルリポジトリ:
含まれる内容
テーマ作成スキル — Discourse テーマの構築に関する包括的な範囲をカバーします。discourse_theme CLI によるスキャフォールディング、SCSS アーキテクチャ、ビューポートライブラリ、ローカリゼーション、設定、修飾子、値変換、アイコン、CSS 変数などです。アイコン、変数、変換に関する詳細な参照ファイルは個別に含まれており、必要に応じて読み込むことができます。SKILL.md
ブロック作成スキル — ブロック API のテーマ側の機能をカバーします。@block デコレーターを使用したブロックコンポーネントの作成、引数スキーマの定義、利用可能なコアアウトレットへのブロックのレンダリング、条件、コンテナブロックとレイアウトのグルーピング、テーマの翻訳や設定をブロックの引数に統合することなどです。SKILL.md
サンプルテーマ — ブロックを使用して構築されたカスタムホームページを備えた動作するテーマで、アウトレット、条件、レイアウトの構成に関する実際のパターンを実証しています。
ブロック API について
ブロック API は、テーマやプラグイン内でモジュール化され、組み合わせ可能な UI コンポーネントを構築するための Discourse の新しいフレームワークです。ブロックは、homepage-blocks、hero-blocks、sidebar-discovery などの名前付きアウトレットに登録された Glimmer コンポーネントであり、ルート、ユーザー、ビューポート、サイト設定、またはプラグインの有無に基づいて条件付きで表示できます。
このシステムの主な強みは、ブロックが小さく焦点の絞られたスコープを持ち、一貫したパターンに従っていることです。これにより、AI 支援開発に非常に適しています。ブロックスキルを持つモデルは、単一のパスで動作するブロックコンポーネントをスキャフォールディングし、それをアウトレットに登録し、条件を接続することができます。
このリポジトリのサンプルテーマは、利用可能なプラグインやコンテンツに基づいて適応するホームページを実証しています。基本的なホームページの外観は以下の通りで、ヒーローブロックと注目のトピックリストが含まれています。
追加の条件が満たされた場合（注目のタグが設定され、Discourse Events プラグインがアクティブで、Discourse Leaderboard プラグインが利用可能）、追加のブロックが条件付きでレイアウトにレンダリングされます。
ブロックはホームページに限定されません。サンプルテーマでは、sidebar-blocks アウトレットを使用して ホーム リンクを追加し、sidebar-discovery アウトレットを使用してカテゴリ固有のサイドバーコンテンツを追加し、カテゴリページの上部に category-banner ブロックを追加しています。
DevTools のブロックインスペクターは、ページ上に重ねて表示されるアウトレットラベルとブロック識別子を表示します。これにより、レイアウト構造を理解し、どこに何が表示されているかをデバッグすることが容易になります。
デザインプラットフォーム MCP との併用
これらのスキルは、デザインプラットフォームの MCP（Penpot や Figma の MCP など）と非常に相性が良いです。MCP を接続すると、Claude はデザインファイルから直接コンポーネント仕様やデザイントークンを読み取り、スキルの慣習に従って実装できます。特に構造化されたデザインシステムから作業する場合は、デザインとコードの間のループがより密になります。
フォークして調整
スキル内のいくつかの慣習は、SCSS フォルダのアーキテクチャのように、慣習というよりは好みに基づいています。リポジトリをフォークして、スキルを自身のワークフローや慣習に合わせて調整することができます。
構築したもの共有
ぜひ試して、その結果をお知らせください！スキルをどのように使用しているか、それらで何を作成したか、どこに課題があるかなど、お聞かせいただければ幸いです。フィードバック、修正、フォークはすべて歓迎します。