Menu
Hotwire（Turbo + Stimulus）を使用してRuby on Railsの管理画面を実装し、PlaywrightによるE2Eテストを含めた完全な実装を行うスキル
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | implementing-hotwire-admin |
| description | Hotwire（Turbo + Stimulus）を使用してRuby on Railsの管理画面を実装し、PlaywrightによるE2Eテストを含めた完全な実装を行うスキル |
このスキルは、Hotwire（Turbo + Stimulus）を使用して、Ruby on Railsで完全にカスタマイズ可能な管理画面を実装します。E2Eテスト設計・実装も含め、本番運用可能な管理画面を構築します。
Claudeは以下の状況でこのスキルを使用します：
| 項目 | 技術 |
|---|---|
| フレームワーク | Ruby on Rails 8.x |
| フロントエンド | Hotwire (Turbo + Stimulus) |
| スタイリング | Tailwind CSS |
| E2Eテスト | Playwright + Capybara |
| 認証 | Devise / 自作認証 |
各ステップの詳細は steps/ ディレクトリ内のファイルを参照してください。
詳細: @steps/01_setup_and_routing.md
Claudeは、管理画面用の名前空間、ルーティング、ベースコントローラを設定します。
詳細: @steps/02_layout_and_navigation.md
Claudeは、管理画面専用のレイアウトファイルとサイドバーナビゲーションを作成します。
詳細: @steps/03_crud_views.md
Claudeは、一覧・詳細・新規作成・編集画面を実装します。各種データ型に対応したフォームヘルパーも含みます。
詳細: @steps/04_turbo_actions.md
Claudeは、削除・公開・非公開などのアクションをTurbo対応で実装します。button_toとdata-turbo-confirmを使用した安全なアクション実装を行います。
詳細: @steps/05_stimulus_controllers.md
Claudeは、確認ダイアログ、フラッシュメッセージ、動的フォームなどのStimulusコントローラを実装します。
詳細: @steps/06_e2e_test_design.md
Claudeは、管理画面のテストケースを体系的に洗い出し、テスト計画を作成します。
詳細: @steps/07_e2e_test_implementation.md
Claudeは、Playwright + Capybaraを使用してE2Eテストを実装します。TDDアプローチでテストと実装を進めます。
詳細: @steps/08_troubleshooting.md
Claudeは、よくある問題と解決策を参照し、実装中の問題を解決します。
implementing-hotwire-admin/
├── SKILL.md # このファイル
├── references/
│ └── turbo_patterns.md # Turboパターンのリファレンス
└── steps/
├── 01_setup_and_routing.md # セットアップとルーティング
├── 02_layout_and_navigation.md # レイアウトとナビゲーション
├── 03_crud_views.md # CRUD画面
├── 04_turbo_actions.md # Turbo対応アクション
├── 05_stimulus_controllers.md # Stimulusコントローラ
├── 06_e2e_test_design.md # E2Eテスト設計
├── 07_e2e_test_implementation.md # E2Eテスト実装
└── 08_troubleshooting.md # トラブルシューティング
Rails 8のTurbo環境では、link_toのmethod:オプションが機能しません。必ずbutton_toを使用してください：
<%# NG: Turbo環境では機能しない %>
<%= link_to '削除', path, method: :delete, data: { confirm: '削除しますか？' } %>
<%# OK: Turbo対応 %>
<%= button_to '削除', path, method: :delete, data: { turbo_confirm: '削除しますか？' } %>
click_linkではなくclick_buttonを使用page.driver.with_playwright_pageでビューポートサイズを変更Figma のワイヤーフレーム URL から仕様書一式を docs/ 配下に Markdown で抽出するスキル。ページ構成・ユースケース・アクター・データモデル・コンポーネントを 15 ステップで段階的に生成し、整合性／データモデル／コンポーネントの 3 レビューを作成する。**既存リポジトリの機能拡張モード** では既存モデル・ルーティング・ビューを再利用優先。**レビュー反復反映ステップ** では質問ループで方針を確定しドキュメントに反映する。Figma URL が提供されたとき、Figma デザインから実装用仕様書を作りたいとき、または既存仕様書の精度向上を求められたときに使用する。
Claude Codeセッションの効率を分析・スコアリングするWebツール。セッションログ（JSONL）を解析し、7観点100点満点で「無駄の有無」を評価。npx session-evaluatorで起動し、ブラウザUIでセッション選択→分析→改善提案まで実行可能。
PRの変更内容をトリアージし、変更カテゴリ分類・表層チェック・必要リファレンス判定を行います。結果を`.pr-triage.json`に出力し、後続のコードレビューフェーズで活用します。CI環境でのコスト最適化に使用してください。
PRやコード変更の汎用コードレビューを実施します。コードの品質、セキュリティ、設計を共通基準で評価し、approve/rejectを判断します。「このPRをレビュー」「コードレビューして」「マージ前チェック」などの依頼や、gh pr viewコマンドの実行時に使用してください。
テスト仕様書（Excel/Notion）からFlutter integration_testコードを自動生成するスキル。 Page Objectパターン + Key規約に基づき、仕様ステップとコードの対応を示すマッピングレポートも生成する。 「E2Eテストを生成」「テスト仕様からテストコードを作って」「integration_testを生成」などの発言で発動。
CLAUDE.mdを分割ルールファイル(.claude/rules/)で管理するスキル。学習トライアドの書き込み先を分割ファイルにリダイレクトし、自動マージでCLAUDE.mdを生成。/rules-init, /rules-merge, /rules-add, /rules-status コマンドを提供。CLAUDE.mdが肥大化している場合や、学習トライアドの蓄積を分割管理したい場合に使用。