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