hwc-forms-validation

Name: hwc-forms-validation
Author: thehotwireclub

github.com/thehotwireclub開発152229 回インストール4 週間前に更新

リポジトリ

hwc-forms-validation について

Turbo Frames と Stimulus を使ったフォーム中心のワークフローを実装するスキルです。一般的なフォーム構成や検証時の応答、再描画時にユーザーの操作状況を保つ方法を扱います。

主な機能

01一般的なフォームフローの特定
02Turbo Frames によるインライン再描画
03検証と成功時の応答設定
04フォーカスと選択範囲の保持
05フォーム資料の選択的な参照

活用シーン

01インライン編集フォームの構築
02モーダル検証フローの作成
03タイプアヘッド検索の実装
04Frame 外部のコントロールへの対応

インストール

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

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-forms-validation

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

同梱ファイル

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

agents/

openai.yaml

references/

2023-11-07-turbo-frames-typeahead-search.md

2024-01-16-stimulus-action-parameters.md

2024-02-27-turbo-frames-inline-edit.md

2024-05-21-turbo-frames-modals-validation.md

2025-10-20-turbo-frames-typeahead-validation.md

2026-02-03-turbo-frames-external-form.md

2026-03-24-turbo-frames-chained-selects.md

INDEX.md

詳細

フォームとバリデーション

Turbo Frames と Stimulus を使って、フォーム中心の Hotwire ワークフローを実装します。

コアワークフロー

フォームの流れを特定します：作成／編集、インライン編集、入力補完、モーダルフォーム、または外部コントロール。
バリデーションエラーをその場で再描画する必要がある場合は、フォームの操作範囲を Turbo Frame で囲みます。
バリデーションに失敗した場合は 422、リダイレクトが成功した場合は 303 を返します。
Turbo のデフォルトの動作では不十分な場合に限り、turbo:submit-end で送信後の動作を処理します。
再描画時もユーザーのコンテキスト（フォーカス／キャレット／選択範囲）を維持します。

ガードレール

入力状態の情報源は1つに保ち、フレーム内とフレーム外の DOM にコントロールを重複して配置しないでください。
対象の <form> 階層の外にレンダリングされるコントロールには、HTML の form 属性を使用します。
デバウンス／スロットルなしで、キー入力のたびに送信ロジックを実行しないでください。
フォームのレスポンスがフレームのみを更新する場合は、送信後の動作を明示してください。

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

現在のリクエストに必要なファイルのみを開いてください。

インライン編集：references/2024-02-27-turbo-frames-inline-edit.md
モーダルのバリデーションフロー：references/2024-05-21-turbo-frames-modals-validation.md
入力補完検索：references/2023-11-07-turbo-frames-typeahead-search.md
フォーカス処理を伴う入力補完のバリデーション：references/2025-10-20-turbo-frames-typeahead-validation.md
フレーム内の外部フォームコントロール：references/2026-02-03-turbo-frames-external-form.md
フォームの Stimulus アクションパラメーター：references/2024-01-16-stimulus-action-parameters.md
連動するセレクトフィールド：references/2026-03-24-turbo-frames-chained-selects.md

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

基本情報

作者: thehotwireclub
リポジトリ: thehotwireclub/hotwire_club-skills
カテゴリ: 開発
インストール数: 229
GitHub スター: 152

問題を報告

おすすめの 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

848.6k

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