메뉴
Hotwire（Turbo + Stimulus）を使用してRuby on Railsの管理画面を実装し、PlaywrightによるE2Eテストを含めた完全な実装を行うスキル
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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が肥大化している場合や、学習トライアドの蓄積を分割管理したい場合に使用。