Added AI skills

.agents/skills/react-hook-form/references/sub-watch-specific-fields.md

@@ -0,0 +1,54 @@
+---
+title: Watch Specific Fields Instead of Entire Form
+impact: CRITICAL
+impactDescription: reduces re-renders from N fields to 1 field change
+tags: sub, watch, specific-fields, re-renders
+---
+
+## Watch Specific Fields Instead of Entire Form
+
+Calling `watch()` without arguments subscribes to ALL form fields, causing re-renders on any field change. Always specify the field names you need.
+
+**Incorrect (watches all fields, re-renders on any change):**
+
+```typescript
+function OrderForm() {
+  const { register, watch, handleSubmit } = useForm()
+  const formValues = watch()  // Re-renders when ANY field changes
+
+  const total = calculateTotal(formValues.quantity, formValues.price)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('customerName')} />  {/* Changes here trigger total recalc */}
+      <input {...register('email')} />  {/* Changes here trigger total recalc */}
+      <input {...register('quantity', { valueAsNumber: true })} />
+      <input {...register('price', { valueAsNumber: true })} />
+      <div>Total: ${total}</div>
+    </form>
+  )
+}
+```
+
+**Correct (watches only needed fields):**
+
+```typescript
+function OrderForm() {
+  const { register, watch, handleSubmit } = useForm()
+  const [quantity, price] = watch(['quantity', 'price'])  // Only re-renders when these change
+
+  const total = calculateTotal(quantity, price)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('customerName')} />  {/* No re-render on change */}
+      <input {...register('email')} />  {/* No re-render on change */}
+      <input {...register('quantity', { valueAsNumber: true })} />
+      <input {...register('price', { valueAsNumber: true })} />
+      <div>Total: ${total}</div>
+    </form>
+  )
+}
+```
+
+Reference: [useForm - watch](https://react-hook-form.com/docs/useform/watch)