react-hook-form by pproenca/dot-skills
npx skills add https://github.com/pproenca/dot-skills --skill react-hook-form适用于 React Hook Form 应用程序的全面性能优化指南。包含 8 个类别共 41 条规则,按影响优先级排序,以指导表单开发、自动化重构和代码生成。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 表单配置 | 关键 | formcfg- |
| 2 | 字段订阅 | 关键 | sub- |
| 3 | 受控组件 | 高 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
ctrl- |
| 4 | 验证模式 | 高 | valid- |
| 5 | 字段数组 | 中高 | array- |
| 6 | 状态管理 | 中 | formstate- |
| 7 | 集成模式 | 中 | integ- |
| 8 | 高级模式 | 低 | adv- |
formcfg-validation-mode - 使用 onSubmit 模式以获得最佳性能formcfg-revalidate-mode - 将 reValidateMode 设置为 onBlur 以提高提交后的性能formcfg-default-values - 始终为表单初始化提供 defaultValuesformcfg-async-default-values - 对服务器数据使用异步 defaultValuesformcfg-should-unregister - 启用 shouldUnregister 以提高动态表单的内存效率formcfg-useeffect-dependency - 避免在 useEffect 依赖项中使用 useForm 返回的对象sub-usewatch-over-watch - 使用 useWatch 替代 watch 以实现隔离重渲染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 处理深度嵌套ctrl-usecontroller-isolation - 使用 useController 实现重渲染隔离ctrl-avoid-double-registration - 避免与 useController 发生双重注册ctrl-controller-field-props - 为 UI 库正确连接 Controller 字段属性ctrl-single-usecontroller-per-component - 每个组件使用单个 useControllerctrl-local-state-combination - 将本地状态与 useController 结合用于仅 UI 的状态valid-resolver-caching - 在组件外部定义解析器模式以实现缓存valid-dynamic-schema-factory - 使用模式工厂进行动态验证valid-error-message-strategy - 通过可选链或 lodash get 访问错误信息valid-inline-vs-resolver - 对于复杂规则,优先使用解析器而非内联验证valid-delay-error - 使用 delayError 对快速错误显示进行防抖处理valid-native-validation - 对于简单表单,考虑使用原生验证array-use-field-id-as-key - 在 useFieldArray 映射中使用 field.id 作为 keyarray-complete-default-objects - 为字段数组操作提供完整的默认对象array-separate-crud-operations - 分离顺序的字段数组操作array-unique-fieldarray-per-name - 每个字段名使用单个 useFieldArray 实例array-virtualization-formprovider - 对虚拟化字段数组使用 FormProviderformstate-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 来控制按钮状态integ-shadcn-form-import - 验证 shadcn Form 组件的导入来源integ-shadcn-select-wiring - 使用 onValueChange 而非展开运算符连接 shadcn Selectinteg-mui-controller-pattern - 对 Material-UI 组件使用 Controllerinteg-value-transform - 在 Controller 级别转换值以实现类型强制转换adv-formprovider-memo - 使用 React.memo 包装 FormProvider 的子组件adv-devtools-performance - 在生产环境和性能测试期间禁用 DevToolsadv-testing-wrapper - 创建包含 QueryClient 和 AuthProvider 的测试包装器阅读单独的参考文件以获取详细说明和代码示例:
zod 技能react-19 技能frontend-design 技能包含所有规则详情的完整指南:AGENTS.md
每周安装数
332
仓库
GitHub 星标数
85
首次出现
2026年1月20日
安全审计
安装于
opencode291
gemini-cli286
codex285
github-copilot284
cursor266
amp248
Comprehensive performance optimization guide for React Hook Form applications. Contains 41 rules across 8 categories, prioritized by impact to guide form development, automated refactoring, and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Form Configuration | CRITICAL | formcfg- |
| 2 | Field Subscription | CRITICAL | sub- |
| 3 | Controlled Components | HIGH | ctrl- |
| 4 | Validation Patterns | HIGH | valid- |
| 5 | Field Arrays | MEDIUM-HIGH | array- |
| 6 | State Management | MEDIUM | formstate- |
| 7 | Integration Patterns | MEDIUM | integ- |
| 8 | Advanced Patterns | LOW | adv- |
formcfg-validation-mode - Use onSubmit mode for optimal performanceformcfg-revalidate-mode - Set reValidateMode to onBlur for post-submit performanceformcfg-default-values - Always provide defaultValues for form initializationformcfg-async-default-values - Use async defaultValues for server dataformcfg-should-unregister - Enable shouldUnregister for dynamic form memory efficiencyformcfg-useeffect-dependency - Avoid useForm return object in useEffect dependenciessub-usewatch-over-watch - Use useWatch instead of watch for isolated re-renderssub-watch-specific-fields - Watch specific fields instead of entire formsub-usewatch-with-getvalues - Combine useWatch with getValues for timing safetysub-deep-subscription - Subscribe deep in component tree where data is neededsub-avoid-watch-in-render - Avoid calling watch() in render for one-time readssub-usewatch-default-value - Provide defaultValue to useWatch for initial rendersub-useformcontext-sparingly - Use useFormContext sparingly for deep nestingctrl-usecontroller-isolation - Use useController for re-render isolationctrl-avoid-double-registration - Avoid double registration with useControllerctrl-controller-field-props - Wire Controller field props correctly for UI librariesctrl-single-usecontroller-per-component - Use single useController per componentctrl-local-state-combination - Combine local state with useController for UI-only statevalid-resolver-caching - Define schema outside component for resolver cachingvalid-dynamic-schema-factory - Use schema factory for dynamic validationvalid-error-message-strategy - Access errors via optional chaining or lodash getvalid-inline-vs-resolver - Prefer resolver over inline validation for complex rulesvalid-delay-error - Use delayError to debounce rapid error displayvalid-native-validation - Consider native validation for simple formsarray-use-field-id-as-key - Use field.id as key in useFieldArray mapsarray-complete-default-objects - Provide complete default objects for field array operationsarray-separate-crud-operations - Separate sequential field array operationsarray-unique-fieldarray-per-name - Use single useFieldArray instance per field namearray-virtualization-formprovider - Use FormProvider for virtualized field arraysformstate-destructure-formstate - Destructure formState properties before renderformstate-useformstate-isolation - Use useFormState for isolated state subscriptionsformstate-getfieldstate-for-single-field - Use getFieldState for single field state accessformstate-subscribe-to-specific-fields - Subscribe to specific field names in useFormStateformstate-avoid-isvalid-with-onsubmit - Avoid isValid with onSubmit mode for button stateinteg-shadcn-form-import - Verify shadcn Form component import sourceinteg-shadcn-select-wiring - Wire shadcn Select with onValueChange instead of spreadinteg-mui-controller-pattern - Use Controller for Material-UI componentsinteg-value-transform - Transform values at Controller level for type coercionadv-formprovider-memo - Wrap FormProvider children with React.memoadv-devtools-performance - Disable DevTools in production and during performance testingadv-testing-wrapper - Create test wrapper with QueryClient and AuthProviderRead individual reference files for detailed explanations and code examples:
references/{prefix}-{slug}.mdzod skillreact-19 skillfrontend-design skillFor the complete guide with all rules expanded: AGENTS.md
Weekly Installs
332
Repository
GitHub Stars
85
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode291
gemini-cli286
codex285
github-copilot284
cursor266
amp248
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,000 周安装