mcpField
R
rails-application-ui-blocks

rails-application-ui-blocks

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

rails-application-ui-blocks について

Rails ビューにカタログ掲載の UI ブロックを選び、調整して組み込むためのスキルです。新規ページとリファクタリングの両方で、既存の動作やアクセシビリティ、プロジェクト規約の維持を重視します。

主な機能

  1. 01新規ページとリファクタリングの手順
  2. 02カタログに基づくブロック選定
  3. 03Rails の操作性とアクセシビリティ確認
  4. 04段階的なビュー統合
  5. 05動作とテストの検証

活用シーン

  1. 01UI ブロックを使った Rails 新規ページの作成
  2. 02既存 Rails ビューの領域置き換え
  3. 03UI 変更時の Turbo と Stimulus の動作確認

インストール

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

$npx skills add https://github.com/pproenca/dot-skills --skill rails-application-ui-blocks

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

同梱ファイル

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

metadata.json
agents/
openai.yaml
references/
selection-playbook.md
template-catalog.json
scripts/
build_template_catalog.py

詳細

Rails アプリケーション UI ブロック

このスキルを使って、templates/application-ui のプレミアム UI ブロックを選択、調整し、Rails のビューに統合します。

ワークフロー

  1. モードを決定します。
  • 新しい機能やページには new-page
  • 既存のビューやパーシャルには refactor-page
  1. まず制約を特定します。
  • 必要なインタラクション（Turbo Frames/Streams、Stimulus のターゲット／アクション、フォームのセマンティクス）
  • アクセシビリティの制約（ラベル、キーボード操作の流れ、ARIA）
  • 既存のコンポーネント境界（パーシャル、ヘルパー、共通レイアウト）
  1. カタログから候補ブロックを選びます。
  • references/selection-playbook.md を読みます。
  • references/template-catalog.json を参照します。
  1. 最小限の範囲で統合します。
  • 既存のルート／コントローラー／ドメインロジックは変更しません。
  • 小さな段階に分けてマークアップを置き換えます（まず外枠、次にセクション、最後にマイクロコンポーネント）。
  1. 検証します。
  • 動作、アクセシビリティ、テストカバレッジが損なわれていないことを確認します。
  • プロジェクトの規約で求められる場合は、既存のデザイントークンとクラスの規約を維持します。

選択順序

new-page の場合：

  1. まず ui.page-examples.* を使ってページ構成の土台を決めます。
  2. ui.application-shells.* から外枠を選びます。
  3. ui.headings.* からページ／セクションの見出しを追加します。
  4. 中心となるコンテンツブロック（ui.forms.*、ui.lists.*、ui.data-display.*、ui.feedback.*）を追加します。
  5. 最後にナビゲーションとオーバーレイの詳細（ui.navigation.*、ui.overlays.*）を追加します。

refactor-page の場合：

  1. 現在の情報設計とインタラクションの契約を維持します。
  2. 既存の各 UI 領域を、カタログ内の候補ブロックに対応付けます。
  3. 一度に 1 つの領域を置き換え、関連するテストを実行します。
  4. 再利用が確認できた後に限り、繰り返し使われているマークアップをパーシャルに抽出します。

ガードレール

  • 明示的に依頼されていない限り、コントローラー／モデル／ポリシーは変更しないでください。
  • 置き換えずに data-controller、data-action、data-turbo-*、aria-*、フォームのフィールド名を削除しないでください。
  • 競合するビジュアルシステムを導入するのではなく、プロジェクトのスタイルに合わせてブロックを調整してください。
  • ネイティブコンポーネントで同じ要件を満たせる場合、既存のデザインシステムのコンポーネントと重複するブロックの追加は避けてください。

出力時の要件

このスキルを使ってタスクを完了した場合は、以下を含めてください。

  • 選択したカタログ ID（追跡可能にするため）
  • 使用したソーステンプレートのパス
  • 導入した動作／アクセシビリティ上の差分
  • 置き換えなかったものと、その理由

リソース

  • references/selection-playbook.md
    • 最初に確認するテンプレートファミリーの判断基準と、使用を避けるべき場合。
  • references/template-catalog.json
    • エイリアスとソースパスを含む、正式なブロック ID。
  • scripts/build_template_catalog.py
    • テンプレートの更新後にカタログを再生成します。

メンテナンス

templates/application-ui 内のファイルを変更した場合は、カタログを再生成します。

python3 .agents/skills/rails-application-ui-blocks/scripts/build_template_catalog.py \
  --root .

コメント

Markdown 対応