Agent skill · supabase
react-hook-form
Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions,
What it needs
About 9k tokens when loaded.
What this skill does
React Hook Form How to write forms that stay correct as they grow. The existing codebase is not a safe reference: form.watch() off prop-drilled form objects, subscription-only watches, unguarded valueAsNumber, and ?? undefined controlled values are all common in older code and all wrong. Follow this skill, not the neighboring file. Policy — fix what you touch. New code must follow these rules. When you modify existing form code, upgrade the specific fields/hooks/components you're editing to match (e.g. a component you touch that calls form.watch gets converted to useWatch). Leave untouched code alone, but tell the user about anti-patterns you noticed and didn't fix. Never add new violations: react-hook-form/no-use-watch is ratcheted in Studio CI — any increase in the warning count fails the build. Mental model: subscriptions decide who re-renders RHF is uncontrolled at heart. Values live in refs; nothing re-renders unless a subscription says so. Every read API is a subscription decision: API Subscribes Re-renders Use for ----------------------------- ---------- -------------------------- ---------------------------------------------- useWatch({ control, name }) yes only the calling component reactive value reads, anywhere useFormState({ control }) yes only the calling component isDirty/errors/etc. outside the form owner formState (destructured) yes the useForm owner form state in the owner component only form.watch(name) yes the entire form tree avoid — lint-flagged, see below getValues() no never event handlers and onSubmit only subscribe() callback none side effects outside render Two facts explain most of the bugs we've shipped: 1. form.watch() and form.formState hoist their subscription to the useForm owner, no matter which component calls them. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supabase/react-hook-form--cd5332