mcpField
R
react-hook-form

react-hook-form

github.com/shipshitdev開発3987 回インストール1 日前に更新
リポジトリ

react-hook-form について

React Hook Form でフォームを開発、リファクタリング、レビューする開発者向けのスキルです。影響度順に 8 カテゴリー、41 件の実践ルールをまとめています。

主な機能

  1. 01優先度別の 8 カテゴリー、41 ルール
  2. 02フォーム設定とバリデーションの指針
  3. 03購読と再レンダリングのパターン
  4. 04制御コンポーネントと UI ライブラリの連携
  5. 05動的フィールド配列と状態管理の指針

活用シーン

  1. 01デフォルト値と検証モードの設定
  2. 02不要なフォーム再レンダリングの削減
  3. 03制御 UI コンポーネントの接続
  4. 04動的フィールド配列の実装レビュー

インストール

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

$npx skills add https://github.com/shipshitdev/skills --skill react-hook-form

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

同梱ファイル

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

AGENTS.md
plugin.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 - 一度だけ値を読み取るために、レンダー中に 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 の map では field.id を key として使用する
  • array-complete-default-objects - フィールド配列の操作には、完全なデフォルトオブジェクトを指定する
  • array-separate-crud-operations - フィールド配列に対する連続した操作は分けて実行する
  • array-unique-fieldarray-per-name - フィールド名ごとに useFieldArray のインスタンスを1つだけ使用する
  • array-virtualization-formprovider - 仮想化されたフィールド配列には FormProvider を使用する
6. 状態管理（中）
  • 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. 統合パターン（中）
  • integ-shadcn-form-import - shadcn Form コンポーネントのインポート元を確認します
  • integ-shadcn-select-wiring - spread ではなく onValueChange を使って shadcn Select を接続します
  • integ-mui-controller-pattern - Material-UI コンポーネントには Controller を使用します
  • integ-value-transform - 型強制のため、Controller レベルで値を変換します
8. 高度なパターン（低）
  • adv-formprovider-memo - FormProvider の子要素を React.memo でラップします
  • adv-devtools-performance - 本番環境およびパフォーマンステスト中は DevTools を無効にします
  • adv-testing-wrapper - QueryClient と AuthProvider を使ったテスト用ラッパーを作成します

使用方法

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

関連スキル

  • Zod resolver によるスキーマ検証については、zod スキルを参照してください
  • UI/UX フォームの設計については、frontend-design スキルを参照してください

完全版ドキュメント

すべてのルールを展開した完全なガイドについては、${CLAUDE_SKILL_DIR}/AGENTS.md を参照してください（詳細なルールの参照が必要な場合に読み込んでください）。

コメント

Markdown 対応