mcpField
R
react-hook-form

react-hook-form

github.com/thongdn-it開発5140 回インストール41 週間前に更新
リポジトリ

react-hook-form について

react-hook-form は、React Hook Form アプリの構築、レビュー、リファクタリングに使うガイドスキルです。パフォーマンスを軸に、設定、購読、制御コンポーネント、検証、フィールド配列、状態管理を扱う41の優先度付きルールを収録しています。

主な機能

  1. 0141件の優先度付き React Hook Form ルール
  2. 028カテゴリにわたるガイド
  3. 03フォーム設定と検証の実践
  4. 04購読とフィールド配列のパターン
  5. 05UI ライブラリ連携の指針

活用シーン

  1. 01React Hook Form でフォームを構築
  2. 02フォームのパフォーマンス問題を確認
  3. 03フィールド購読と状態処理をリファクタリング
  4. 04制御 UI コンポーネントを連携

インストール

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

$npx skills add https://github.com/thongdn-it/react-agent-skills --skill react-hook-form

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

同梱ファイル

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

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
adv-devtools-performance.md
adv-formprovider-memo.md
adv-testing-wrapper.md
array-complete-default-objects.md
array-separate-crud-operations.md
array-unique-fieldarray-per-name.md
array-use-field-id-as-key.md
array-virtualization-formprovider.md
ctrl-avoid-double-registration.md
ctrl-controller-field-props.md
ctrl-local-state-combination.md
ctrl-single-usecontroller-per-component.md
ctrl-usecontroller-isolation.md
formcfg-async-default-values.md
formcfg-default-values.md
formcfg-revalidate-mode.md
formcfg-should-unregister.md
formcfg-useeffect-dependency.md
formcfg-validation-mode.md
formstate-avoid-isvalid-with-onsubmit.md
formstate-destructure-formstate.md
formstate-getfieldstate-for-single-field.md
formstate-subscribe-to-specific-fields.md
formstate-useformstate-isolation.md
integ-mui-controller-pattern.md

詳細

React Hook Form のベストプラクティス

React Hook Form アプリケーションのパフォーマンス最適化に関する包括的なガイドです。8 つのカテゴリにわたる 41 のルールを含み、影響度の高い順に優先順位を付けて、フォームの開発、自動リファクタリング、コード生成を支援します。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

  • React Hook Form を使って新しいフォームを作成するとき
  • useForm オプション（mode、defaultValues、validation）を設定するとき
  • watch/useWatch でフォームの値を購読するとき
  • 制御された UI コンポーネント（MUI、shadcn、Ant Design）を統合するとき
  • useFieldArray で動的なフィールド配列を管理するとき
  • パフォーマンス上の問題についてフォームをレビューするとき

優先度別のルールカテゴリ

優先度カテゴリ影響度プレフィックス
1フォーム設定CRITICALformcfg-
2フィールドの購読CRITICALsub-
3制御されたコンポーネントHIGHctrl-
4バリデーションパターンHIGHvalid-
5フィールド配列MEDIUM-HIGHarray-
6状態管理MEDIUMformstate-
7統合パターンMEDIUMinteg-
8高度なパターンLOWadv-

クイックリファレンス

1. フォーム設定（CRITICAL）
  • formcfg-validation-mode - パフォーマンスを最適化するため、onSubmit モードを使用する
  • formcfg-revalidate-mode - 送信後のパフォーマンスを高めるため、reValidateMode を onBlur に設定する
  • formcfg-default-values - フォームの初期化には必ず defaultValues を指定する
  • formcfg-async-default-values - サーバーデータには非同期の defaultValues を使用する
  • formcfg-should-unregister - 動的フォームのメモリ効率を高めるため、shouldUnregister を有効にする
  • formcfg-useeffect-dependency - useEffect の依存配列に useForm の戻り値オブジェクトを含めない
2. フィールドの購読（CRITICAL）
  • sub-usewatch-over-watch - 再レンダーを分離するため、watch の代わりに useWatch を使用する
  • sub-watch-specific-fields - フォーム全体ではなく、特定のフィールドを監視する
  • sub-usewatch-with-getvalues - タイミングの安全性を確保するため、useWatch と getValues を組み合わせる
  • sub-deep-subscription - データが必要なコンポーネントツリーの深い位置で購読する
  • sub-avoid-watch-in-render - 一度だけ値を読み取る場合、render 内で watch() を呼び出さない
  • sub-usewatch-default-value - 初回レンダー用に useWatch に defaultValue を指定する
  • sub-useformcontext-sparingly - 深いネストでの useFormContext の使用は控えめにする
3. 制御されたコンポーネント（HIGH）
  • ctrl-usecontroller-isolation - 再レンダーを分離するため、useController を使用する
  • ctrl-avoid-double-registration - useController で二重登録しない
  • ctrl-controller-field-props - UI ライブラリに合わせて Controller の field props を正しく接続する
  • ctrl-single-usecontroller-per-component - コンポーネントごとに useController を 1 つだけ使用する
  • ctrl-local-state-combination - UI 専用の状態には、ローカル状態と useController を組み合わせる
4. バリデーションパターン（HIGH）
  • valid-resolver-caching - resolver のキャッシュを利用するため、スキーマをコンポーネントの外で定義する
  • valid-dynamic-schema-factory - 動的なバリデーションにはスキーマファクトリーを使用する
  • valid-error-message-strategy - オプショナルチェーンまたは lodash get でエラーにアクセスする
  • valid-inline-vs-resolver - 複雑なルールにはインラインバリデーションより resolver を優先する
  • valid-delay-error - エラー表示が短時間に頻発するのを抑えるため、delayError を使用する
  • valid-native-validation - シンプルなフォームではネイティブバリデーションを検討する
5. フィールド配列（MEDIUM-HIGH）
  • array-use-field-id-as-key - useFieldArray のマップでは field.id を key として使用する
  • array-complete-default-objects - フィールド配列の操作には完全なデフォルトオブジェクトを指定する
  • array-separate-crud-operations - 連続するフィールド配列の操作は分けて実行する
  • array-unique-fieldarray-per-name - フィールド名ごとに useFieldArray のインスタンスを 1 つだけ使用する
  • array-virtualization-formprovider - 仮想化されたフィールド配列には FormProvider を使用する
6. 状態管理（MEDIUM）
  • formstate-destructure-formstate - レンダリング前にformStateのプロパティを分割代入します
  • formstate-useformstate-isolation - 状態のサブスクリプションを分離するには、useFormStateを使用します
  • formstate-getfieldstate-for-single-field - 単一フィールドの状態にアクセスするには、getFieldStateを使用します
  • formstate-subscribe-to-specific-fields - useFormStateで特定のフィールド名をサブスクライブします
  • formstate-avoid-isvalid-with-onsubmit - ボタンの状態管理では、onSubmitモードでisValidを使用しないようにします
7. 統合パターン（MEDIUM）
  • integ-shadcn-form-import - shadcn Formコンポーネントのインポート元を確認します
  • integ-shadcn-select-wiring - スプレッドではなくonValueChangeを使って、shadcn Selectを接続します
  • integ-mui-controller-pattern - Material-UIコンポーネントにはControllerを使用します
  • integ-value-transform - 型変換のためにControllerレベルで値を変換します
8. 高度なパターン（LOW）
  • adv-formprovider-memo - FormProviderの子要素をReact.memoでラップします
  • adv-devtools-performance - 本番環境およびパフォーマンステスト中はDevToolsを無効にします
  • adv-testing-wrapper - QueryClientとAuthProviderを含むテスト用ラッパーを作成します

使い方

詳しい説明とコード例については、各リファレンスファイルをお読みください。

関連スキル

  • Zod resolverによるスキーマ検証については、zodスキルを参照してください
  • React 19のサーバーアクションについては、react-19スキルを参照してください
  • UI/UXフォーム設計については、frontend-designスキルを参照してください

完全版ドキュメント

すべてのルールを展開した完全なガイド：AGENTS.md

コメント

Markdown 対応