hwc-stimulus-fundamentals

Name: hwc-stimulus-fundamentals
Author: lucianghinda

github.com/lucianghinda開発43039 回インストール今日更新

リポジトリ

hwc-stimulus-fundamentals について

ライフサイクルと状態の境界が明確な Stimulus コントローラーを構築するスキルです。コントローラーの契約、コールバック、通信を整理し、DOM 処理を組み合わせやすくします。

主な機能

01targets、values、outlets、actions の定義
02ライフサイクルの設定と解除
03リアクティブな value コールバックの処理
04outlets によるコントローラー間通信
05DOM イベントとビジネスルールの分離

活用シーン

01Stimulus コントローラーの契約設計
02connect と disconnect の反復への対応
03コントローラー間通信の調整

インストール

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

$npx skills add https://github.com/lucianghinda/superpowers-ruby --skill hwc-stimulus-fundamentals

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

同梱ファイル

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

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

INDEX.md

詳細

Stimulus の基礎

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

基本的なワークフロー

コントローラーの契約を最初に定義します。ターゲット、値、アウトレット、アクション、想定されるライフサイクルを含めます。
リアクティブな更新が必要な場合は、値のコールバックで状態遷移を管理します。
connect() の完了前に実行される可能性のあるコールバックにガードを設けます。
セットアップと破棄の対称性を保つため、connect()／disconnect() を使用します。
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

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

基本情報

作者: lucianghinda
リポジトリ: lucianghinda/superpowers-ruby
カテゴリ: 開発
インストール数: 39
GitHub スター: 430

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

852.5k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。