Formik Form Patterns
ChrisWiles/claude-code-showcase
Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray…
Install React Hook Form
$ npx skills add pproenca/dot-skills --skill react-hook-form -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills react-hook-form --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/react-hook-form .claude/skills/react-hook-form && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .claude/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-formType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill react-hook-form -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills react-hook-form --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.curated/react-hook-form .agents/skills/react-hook-form && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .agents/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill react-hook-form -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills react-hook-form --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.curated/react-hook-form .cursor/skills/react-hook-form && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .cursor/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.curated/react-hook-form--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill react-hook-form -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills react-hook-form --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.curated/react-hook-form .gemini/skills/react-hook-form && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .gemini/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pproenca/dot-skills react-hook-formInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pproenca/dot-skills --skill react-hook-form -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.curated/react-hook-form .github/skills/react-hook-form && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .github/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill react-hook-form -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills react-hook-form --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.curated/react-hook-form .opencode/skills/react-hook-form && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-hook-form" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/react-hook-form into .opencode/skills/react-hook-form/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-hook-form", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
react-hook-form- GitHub stars
- 214
- Token cost
- ~1.5k tokens
- SKILL.md length
- 606 words
- Files
- 41 (incl. references, assets)
- Skills in repo
- 182
- Repo updated
- First seen
- Licence
- MIT
At a glance
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray…
- Works in 7 steps: Form Configuration (CRITICAL) → Field Subscription (CRITICAL) → Controlled Components (HIGH) → …
- Tasks that involve React components
- SKILL.md covers When to Apply, When NOT to Use This Skill, Rule Categories by Priority and Quick Reference, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
React Hook Form is an agent skill from pproenca/dot-skills. React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use…
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 43 other files, including reference files and assets (for example `AGENTS.md`, `README.md` and `assets/templates/_template.md`).
It sits in Frontend & Design, covering React components and Forms and validation. It works with React. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.
When your agent uses it
- Tasks that involve React components
- Tasks that involve Forms and validation
Example prompts
- “/react-hook-form”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
React Hook Form loads about 1.5k tokens when it runs, and up to ~24k if it reads all its reference files. Until then it costs about 139 tokens; SKILL.md has 606 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 606 words, ~1,546 tokens.
Download SKILL.mdSave it as
.claude/skills/react-hook-form/SKILL.md (or your agent's skills folder). This skill also uses 40 other files; get the full folder from GitHub.- name
- react-hook-form
- description
- React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
React Hook Form Best Practices by Community
Comprehensive performance optimization guide for React Hook Form applications. Contains 35 rules across 7 categories, each naming a decision that goes wrong by default. Verified against react-hook-form 7.82.0.
When to Apply
Reference these guidelines when:
- Writing new forms with React Hook Form
- Configuring useForm options (mode, defaultValues, validation)
- Subscribing to form values with watch / useWatch / subscribe
- Integrating controlled UI components (MUI, shadcn, Ant Design)
- Managing dynamic field arrays with useFieldArray
- Handling async submit, server errors, and submit lifecycle state
- Reviewing forms for performance issues
When NOT to Use This Skill
- React 19 Server Actions /
useActionState— use thereact-19skill instead - Deeply nested, fully type-safe forms — TanStack Form may be a better fit for forms with complex nested schemas; this skill assumes you've already chosen RHF
- Single-input or trivial forms — uncontrolled
<form>+FormDatais often simpler than pulling in any library
Rule Categories by Priority
| 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 | State Management | MEDIUM-HIGH | formstate- |
| 6 | Field Arrays | MEDIUM-HIGH | array- |
| 7 | Integration Patterns | MEDIUM | integ- |
Quick Reference
1. Form Configuration (CRITICAL)
formcfg-default-values- Always Provide defaultValues for Form Initializationformcfg-useeffect-dependency- Depend on formState Slices, Not on formState Itselfformcfg-validation-mode- Justify Any mode Other Than the Default onSubmitformcfg-revalidate-mode- Keep Default reValidateMode Unless Validation Is Expensiveformcfg-should-unregister- Keep shouldUnregister Off Unless Hidden Fields Must Leave the Payloadformcfg-transformed-values-generic- Pass the Third useForm Generic When the Resolver Transforms Valuesformcfg-async-default-values- Use Async defaultValues for Server Dataformcfg-disabled-prop- Use the HTML disabled Attribute for Visual Disabling, Not register's disabled Optionformcfg-values-prop- Use the values Prop to Keep a Form in Sync with Server Data
2. Field Subscription (CRITICAL)
sub-avoid-watch-in-render- Avoid Calling watch() in Render for One-Time Readssub-memo-cannot-beat-context- React.memo Cannot Stop Context-Driven Re-renders Under FormProvidersub-subscribe-outside-react- Use subscribe() to React to Form Changes Outside the React Lifecyclesub-render-prop-components- Use the Render-Prop Components to Isolate Re-renders Without a Child Componentsub-useformcontext-sparingly- Use useFormContext Sparingly for Deep Nestingsub-usewatch-over-watch- Use useWatch Instead of watch for Isolated Re-renderssub-watch-specific-fields- Watch Specific Fields Instead of Entire Form
Show full SKILL.md (252 more words)Show less
3. Controlled Components (HIGH)
ctrl-usecontroller-isolation- Isolate Controlled Inputs in Dedicated Child Componentsctrl-controller-field-props- Wire Controller Field Props Correctly for UI Libraries
4. Validation Patterns (HIGH)
valid-resolver-caching- Build the Validation Schema Once, Outside the Render Pathvalid-valueasnumber-empty-nan- Handle the NaN valueAsNumber Produces for an Empty Inputvalid-server-errors- Surface Server Errors via setError('root.serverError', ...)valid-delay-error- Use delayError to Debounce Rapid Error Display
5. State Management (MEDIUM-HIGH)
formstate-avoid-isvalid-with-onsubmit- Avoid isValid with onSubmit Mode for Button Stateformstate-destructure-formstate- Read Every formState Property You Depend On During Renderformstate-reset-default-values- Rebase Defaults with resetDefaultValues After a Successful Saveformstate-handlesubmit-oninvalid- Use handleSubmit's Second Argument to Handle a Rejected Submitformstate-useformstate-isolation- Use useFormState for Isolated State Subscriptionsformstate-async-submit-lifecycle- Wrap Async Submit Handlers in try/catch and Reset on isSubmitSuccessful
6. Field Arrays (MEDIUM-HIGH)
array-separate-crud-operations- Separate Sequential Field Array Operationsarray-use-field-id-as-key- Use field.id as Key in useFieldArray Mapsarray-unique-fieldarray-per-name- Use Single useFieldArray Instance Per Field Namearray-disabled-silently-noops- useFieldArray's disabled Option Makes Every Mutation a Silent No-op
7. Integration Patterns (MEDIUM)
integ-value-transform- Transform Values at Controller Level for Type Coercioninteg-shadcn-form-import- Verify shadcn Form Component Import Sourceinteg-shadcn-select-wiring- Wire shadcn Select with onValueChange Instead of Spread
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
- Reference files:
references/{prefix}-{slug}.md
Related Skills
- For schema validation with Zod resolver, see
zodskill - For React 19 server actions, see
react-19skill - For UI/UX form design, see
frontend-designskill
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 40 other files (references, assets) in skills/.curated/react-hook-form of pproenca/dot-skills.
- SKILL.md
- AGENTS.md
- README.md
- assets/templates/_template.md
- metadata.json
- references/_sections.md
- references/array-disabled-silently-noops.md
- references/array-separate-crud-operations.md
- references/array-unique-fieldarray-per-name.md
- references/array-use-field-id-as-key.md
- references/ctrl-controller-field-props.md
- references/ctrl-usecontroller-isolation.md
- references/formcfg-async-default-values.md
- references/formcfg-default-values.md
- references/formcfg-disabled-prop.md
- references/formcfg-revalidate-mode.md
- references/formcfg-should-unregister.md
- references/formcfg-transformed-values-generic.md
- … and 23 more
Open the folder on GitHubat commit cf93c57
Compare with similar skills
React Hook Form next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React Hook Form this skillpproenca/dot-skills | 214 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Formik Form PatternsChrisWiles/claude-code-showcase | 6.1k | 3 repos | ~2.1k | Automated safety check: Pass | None | |
| Buzzformbuildnbuzz/buzzform | 101 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Opik Frontend Patternscomet-ml/opik | 22k | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Hooks Patternzosmaai/zosma-cowork | 123 | — | ~5.1k | Automated safety check: Pass | MIT | |
| Frontend Patterns Templatebybren-llc/safe-agentic-workflow | 421 | — | ~2k | Automated safety check: Pass | MIT |
Similar skills
Buzzform
buildnbuzz/buzzform
A skill your agent uses when working with BuzzForm schema-driven forms, @buildnbuzz/form-core, @buildnbuzz/form-react, or any related APIs like defineSchema, InferType, FormProvider, useDataField…
Opik Frontend Patterns
comet-ml/opik
Sets the conventions for the Opik React frontend: TanStack Query for data, Zustand for shared state, one-way layer imports and a fix for Google Translate crashes.
Hooks Pattern
zosmaai/zosma-cowork
Teaches React Hooks for reusing stateful logic across components.
Frontend Patterns Template
bybren-llc/safe-agentic-workflow
Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing…
Fp TS React
aiskillstore/marketplace
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching.
More from pproenca/dot-skills
All 182 skills in this repoAudio Voice Recovery
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
Codemod React Pipeline
pproenca/dot-skills
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
Dev Rfc
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
Dx Harness
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
Language Spec Author
pproenca/dot-skills
Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…
Python Pep Author
pproenca/dot-skills
Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…
Related
Works with
Categories
Questions about React Hook Form
What does React Hook Form do?
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray…. React Hook Form is an agent skill from pproenca/dot-skills. React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components.
When should I use React Hook Form?
React Hook Form fits situations like: tasks that involve React components; tasks that involve Forms and validation.
How do I install React Hook Form in Claude Code?
Run `npx skills add pproenca/dot-skills --skill react-hook-form -a claude-code`. Or copy the skill folder (skills/.curated/react-hook-form in pproenca/dot-skills) into .claude/skills/react-hook-form in your project. Claude Code loads it when a task matches its description.
How do I install React Hook Form in Codex?
Run `npx skills add pproenca/dot-skills --skill react-hook-form -a codex`. Or copy the skill folder (skills/.curated/react-hook-form in pproenca/dot-skills) into .agents/skills/react-hook-form in your project. Codex loads it when a task matches its description.
Can I use React Hook Form in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill react-hook-form -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-hook-form, .gemini/skills/react-hook-form, .github/skills/react-hook-form and .opencode/skills/react-hook-form in your project.
What does React Hook Form need to run?
SKILL.md names no scripts, command-line tools or credentials: React Hook Form is instructions for the agent only.
Does React Hook Form access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is React Hook Form safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does React Hook Form use?
React Hook Form is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does React Hook Form use?
About 1.5k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 22k tokens, read only when the agent opens those files.
What are the alternatives to React Hook Form?
Skills that share tags, products or a category with React Hook Form: Formik Form Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), Buzzform (buildnbuzz/buzzform, 101 stars), Opik Frontend Patterns (comet-ml/opik, 22k stars) and Hooks Pattern (zosmaai/zosma-cowork, 123 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React Hook Form?
pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.
Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.