mcpField
H
hwc-stimulus-fundamentals

hwc-stimulus-fundamentals

github.com/thehotwireclub開発152253 回インストール3 週間前に更新
リポジトリ

hwc-stimulus-fundamentals について

Hotwire 開発者向けに、ライフサイクルと状態の境界が明確な Stimulus コントローラーの実装を支援するスキルです。実装指針や注意点に加え、必要な資料を選んで参照できます。

主な機能

  1. 01コントローラー契約の定義
  2. 02値コールバックによる状態管理
  3. 03セットアップと後処理の構成
  4. 04outlets によるコントローラー連携
  5. 05Stimulus 資料の選択的な参照

活用シーン

  1. 01Stimulus コントローラーの設計
  2. 02接続と切断の繰り返しへの対応
  3. 03複数コントローラーの動作連携

インストール

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

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-stimulus-fundamentals

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

同梱ファイル

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

agents/
openai.yaml
references/
2023-08-29-stimulus-value-changed-callbacks.md
2023-10-24-stimulus-keyboardevent-101.md
2023-12-05-stimulus-auto-sorting.md
2023-12-19-stimulus-outlets-api.md
2024-05-07-stimulus-target-callbacks.md
2024-06-18-fundamentals-core-web-vitals.md
2025-11-25-stimulus-web-share-api.md
2026-07-22-stimulus-promise-returning-outlet-methods.md
INDEX.md

詳細

Stimulus の基礎

明確なライフサイクルと状態の境界を備えた、堅牢な Stimulus コントローラーを実装します。

基本的なワークフロー

  1. まずコントローラーの契約を定義します。ターゲット、値、アウトレット、アクション、想定されるライフサイクルを明確にします。
  2. リアクティブな更新が必要な場合は、値のコールバックに状態遷移を記述します。
  3. connect() の完了前に実行される可能性があるコールバックには、ガードを設けます。
  4. セットアップと後処理を対称にするため、connect()/disconnect() を使用します。
  5. DOM イベントの処理をビジネスルールから切り離し、コントローラーを組み合わせやすく保ちます。

ガードレール

  • 手動でのデータセット解析より、宣言的なアクションパラメーターを優先します。
  • コントローラー間の通信には、非公開の内部実装ではなくアウトレットを使用します。
  • ターゲットコールバックはべき等に保ち、繰り返される接続／切断サイクルを考慮します。
  • DOM によるリアクティビティが必要な場合に限り、MutationObserver を使用します。
  • UI 機能を公開する前に、ブラウザー API の機能を検出します。

必要なリファレンスのみを読み込む

現在のリクエストに必要なファイルだけを開きます。

  • 値の変更コールバック：references/2023-08-29-stimulus-value-changed-callbacks.md
  • キーボードアクションのフィルターとホットキー：references/2023-10-24-stimulus-keyboardevent-101.md
  • MutationObserver を利用した並べ替え：references/2023-12-05-stimulus-auto-sorting.md
  • アウトレット API による通信：references/2023-12-19-stimulus-outlets-api.md
  • ターゲットコールバックの調整：references/2024-05-07-stimulus-target-callbacks.md
  • Web Share API の統合：references/2025-11-25-stimulus-web-share-api.md
  • Core Web Vitals と遅延読み込みの基礎：references/2024-06-18-fundamentals-core-web-vitals.md
  • Promise を返すアウトレットメソッド（await 可能なコントローラー API）：references/2026-07-22-stimulus-promise-returning-outlet-methods.md

全カタログは references/INDEX.md を参照してください。

隣接するスキルへの引き継ぎ

  • フォーム中心の動作：hwc-forms-validation を使用します。
  • Turbo を使用したナビゲーション／履歴／キャッシュ：hwc-navigation-content を使用します。
  • Turbo Stream／WebSocket の調整：hwc-realtime-streaming を使用します。
  • メディアの統合と再生に関する懸念：hwc-media-content を使用します。
  • UX フィードバック／トランジション／進行状況に関する懸念：hwc-ux-feedback を使用します。

コメント

Markdown 対応