Initial commit

skills/tracking-form-status/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: tracking-form-status
+description: Teaches useFormStatus hook for tracking form submission state in React 19. Use when implementing submit buttons, form loading states, or pending indicators.
+allowed-tools: Read, Write, Edit
+version: 1.0.0
+---
+
+# Form Status Tracking with useFormStatus
+
+`useFormStatus` provides status info about parent form submissions.
+
+## Basic Usage
+
+**MUST be called inside a form component:**
+
+```javascript
+import { useFormStatus } from 'react-dom';
+
+function SubmitButton() {
+  const { pending, data, method, action } = useFormStatus();
+
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? 'Submitting...' : 'Submit'}
+    </button>
+  );
+}
+
+function MyForm() {
+  async function handleSubmit(formData) {
+    'use server';
+    await saveData(formData);
+  }
+
+  return (
+    <form action={handleSubmit}>
+      <input name="email" />
+      <SubmitButton />
+    </form>
+  );
+}
+```
+
+## Return Values
+
+- `pending` (boolean): Whether form is submitting
+- `data` (FormData | null): Data being submitted
+- `method` (string): HTTP method ('get' or 'post')
+- `action` (function | null): Action function
+
+## Critical Requirement
+
+❌ **Wrong - called at form level:**
+
+```javascript
+function MyForm() {
+  const { pending } = useFormStatus();
+  return <form>...</form>;
+}
+```
+
+✅ **Correct - called inside form:**
+
+```javascript
+function MyForm() {
+  return (
+    <form>
+      <SubmitButton />
+    </form>
+  );
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return <button disabled={pending}>Submit</button>;
+}
+```
+
+For comprehensive useFormStatus documentation, see: `research/react-19-comprehensive.md` lines 312-355.