mcpField
R
rails-design-system

rails-design-system

github.com/pproencaデザイン・UI218265 回インストール11 週間前に更新
リポジトリ

rails-design-system について

rails-design-systemは、Ruby on Railsアプリ向けのUIアーキテクチャ指針をまとめたスキルです。Turbo、Stimulus、ERB、デザイントークン、フォーム、コンポーネント、ヘルパーを扱い、設計判断の統一やビューのリファクタリングに役立ちます。

主な機能

  1. 01デザインシステムの判断指針
  2. 02Tailwindデザイントークンのパターン
  3. 03Turbo FramesとStreamsの実践
  4. 04ERBパーシャルとコンポーネントのパターン
  5. 05フォームとビューヘルパーの統一
  6. 06StimulusとImport Mapsの指針

活用シーン

  1. 01パーシャル、ヘルパー、コンポーネントの選択
  2. 02ページのTurbo Framesへの分割
  3. 03フォームのマークアップとエラー表示の標準化
  4. 04重複したビューパターンの監査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pproenca/dot-skills --skill rails-design-system

インストール後、Claude Code で/rails-design-systemを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
assets/templates/
_template.md
references/
_sections.md
comp-explicit-args.md
comp-slots-for-markup.md
comp-test-rendered-output.md
comp-when-to-use.md
decide-avoid-wrapper-components.md
decide-design-system-scope.md
decide-helper-vs-partial.md
decide-partial-vs-component.md
decide-prove-then-extract.md
decide-three-uses-rule.md
form-accessible-labels.md
form-button-consistency.md
form-custom-builder.md
form-error-display.md
form-group-wrapper.md
form-set-default-builder.md
helper-badge-pattern.md
helper-conditional-classes.md
helper-icon-helper.md
helper-scope-to-domain.md
helper-tag-helpers.md
org-deduplication-audit.md
org-document-design-decisions.md
org-file-structure.md
org-import-maps.md
org-naming-conventions.md
org-preview-with-lookbook.md

詳細

コミュニティ Ruby on Rails デザインシステムのベストプラクティス

Ruby on Rails アプリケーション向けの包括的なデザインシステムガイドです。Community が管理しています。9 つのカテゴリにわたる 51 のルールが含まれており、自動リファクタリングとコード生成を支援するため、影響度の高い順に優先順位が付けられています。Turbo（Drive、Frames、Streams）、Stimulus、ERB パーシャル、デザイントークン、フォームビルダー、ビューヘルパーなど、Rails フロントエンドの全スタックを網羅しています。rails-dev（コントローラー、モデル、クエリ）と tailwind（CSS パターン）を補完し、体系的な UI コンポーネントアーキテクチャのレイヤーを扱います。

適用するタイミング

次のような場合に、これらのガイドラインを参照してください。

  • パーシャル、コンポーネント、ヘルパーのどれを切り出すか決めるとき
  • Tailwind CSS の @theme を使ってデザイントークンを定義するとき
  • 明示的なローカル変数を使った ERB パーシャルを作成またはリファクタリングするとき
  • ページを Turbo Frames に分割して、対象を絞った更新を行うとき
  • 複数要素の CRUD 更新に Turbo Streams を使うとき
  • Turbo によるナビゲーションと Stimulus コントローラーを連携させるとき
  • 複雑な UI 向けに ViewComponent または Phlex コンポーネントを構築するとき
  • 一貫性のあるフォームを実現するカスタム FormBuilder を実装するとき
  • バッジ、アイコン、条件付きクラス用のビューヘルパーを作成するとき
  • インタラクティブな動作のために Stimulus コントローラーを追加するとき
  • Import Maps で JavaScript の依存関係を管理するとき
  • UI の重複や命名の不統一がないか、コードベースを監査するとき

優先度別のルールカテゴリ

優先度カテゴリ影響度プレフィックス
1デザイン上の判断CRITICALdecide-
2デザイントークンCRITICALtoken-
3Turbo 連携HIGHturbo-
4パーシャルのパターンHIGHpartial-
5コンポーネントアーキテクチャHIGHcomp-
6フォームシステムMEDIUM-HIGHform-
7ヘルパーのパターンMEDIUMhelper-
8Stimulus の動作MEDIUMstim-
9一貫性と整理LOW-MEDIUMorg-

クイックリファレンス

1. デザイン上の判断（CRITICAL）
2. デザイントークン（CRITICAL）
3. Turbo の統合（高）
4. パーシャルのパターン（高）
5. コンポーネントのアーキテクチャ（高）
  • comp-when-to-use - パーシャルが単純な描画では対応できなくなったら、コンポーネントを使用します
  • comp-explicit-args - すべてのコンポーネントに、型を指定した引数を明示的に定義します
  • comp-slots-for-markup - 呼び出し元から渡されるマークアップブロックにはスロットを使用します
  • comp-test-rendered-output - 描画された HTML を検証してコンポーネントをテストします
6. フォームシステム（中〜高）
  • form-custom-builder - フォームの描画を統一するカスタム FormBuilder を作成します
  • form-set-default-builder - カスタムビルダーをアプリケーションのデフォルトに設定します
  • form-error-display - 一貫したマークアップで、フィールドのエラーをその場に表示します
  • form-accessible-labels - アクセシブルなラベルと ARIA 属性を自動的に生成します
  • form-group-wrapper - ラベル＋入力欄＋エラーを一貫したグループ要素で囲みます
  • form-button-consistency - フォームビルダーを通じて送信ボタンを統一します
7. ヘルパーのパターン（中）
8. Stimulus の動作（中）
9. 一貫性と構成（低〜中）

使用方法

詳しい説明とコード例については、個別のリファレンスファイルを参照してください。

リファレンスファイル

ファイル説明
references/_sections.mdカテゴリーの定義と順序
assets/templates/_template.md新しいルール用のテンプレート
metadata.jsonバージョンとリファレンス情報

コメント

Markdown 対応