hwc-forms-validation

Name: hwc-forms-validation
Author: lucianghinda

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

リポジトリ

hwc-forms-validation について

Turbo Frames と Stimulus を使う Hotwire 開発者向けのフォーム・バリデーションスキルです。エラーの再表示、送信レスポンス、再描画時のユーザー状態保持について指針を示します。

主な機能

01一般的なフォームフローを設計
02Turbo Frame 内でエラーを再表示
03失敗と成功のレスポンスを区別
04フォーカスとキャレット位置を保持
05入力状態の重複を回避

活用シーン

01インライン編集やモーダルフォームの実装
02バリデーション付きタイプアヘッドの構築
03フレーム外のフォームコントロール処理

インストール

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

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

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

同梱ファイル

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

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

INDEX.md

詳細

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

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

コアワークフロー

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

ガードレール

入力状態の信頼できる情報源は一つに保ちます。フレーム内とフレーム外の 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/INDEX.md を参照してください。

基本情報

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

問題を報告

おすすめの 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 ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。