Added AI skills

.agents/skills/react-hook-form/references/sub-avoid-watch-in-render.md

@@ -0,0 +1,48 @@
+---
+title: Avoid Calling watch() in Render for One-Time Reads
+impact: HIGH
+impactDescription: prevents unnecessary subscriptions and re-renders
+tags: sub, watch, getValues, render, one-time-read
+---
+
+## Avoid Calling watch() in Render for One-Time Reads
+
+If you only need to read a value once (not subscribe to changes), use `getValues()` instead of `watch()`. Calling watch() creates a subscription that triggers re-renders on every change.
+
+**Incorrect (watch creates subscription for one-time read):**
+
+```typescript
+function SubmitButton() {
+  const { watch, handleSubmit, formState: { isValid } } = useForm()
+
+  const handleClick = () => {
+    const email = watch('email')  // Creates subscription, but we only need current value
+    analytics.track('form_submit_attempt', { email })
+    handleSubmit(onSubmit)()
+  }
+
+  return <button onClick={handleClick} disabled={!isValid}>Submit</button>
+}
+```
+
+**Correct (getValues for one-time read):**
+
+```typescript
+function SubmitButton() {
+  const { getValues, handleSubmit, formState: { isValid } } = useForm()
+
+  const handleClick = () => {
+    const email = getValues('email')  // No subscription, just current value
+    analytics.track('form_submit_attempt', { email })
+    handleSubmit(onSubmit)()
+  }
+
+  return <button onClick={handleClick} disabled={!isValid}>Submit</button>
+}
+```
+
+**When to use each:**
+- `watch()`: Need to react to value changes (display, conditional rendering)
+- `getValues()`: Need current value at a point in time (event handlers, submit)
+
+Reference: [useForm - getValues](https://react-hook-form.com/docs/useform/getvalues)