scaffold-new-react-hooklisted
Install: claude install-skill anchit-choudhry/gryffin-calorai
# New Custom Hook Scaffold
You are scaffolding a new custom hook for Gryffin Calorai. The argument is the camelCase hook name
starting with `use` (e.g. `useActivitySummary`).
If no argument was given, ask: "What is the hook name (e.g. useActivitySummary)?"
## Step 1 - Identify the hook variant
Ask the user which pattern applies, or infer from the name:
| Variant | Use when | Examples |
|---------------|--------------------------------------------------------------------------|--------------------------------------------------------|
| **Form hook** | The hook wraps a user-facing form with submission and validation | `useWaterForm`, `useFoodForm`, `useBodyForm` |
| **Data hook** | The hook reads from IndexedDB or Zustand and transforms data for display | `useWaterHistoryData`, `useProgressData`, `useStreaks` |
---
## Variant A: Form Hook
Output file: `apps/web/src/hooks/<hookName>.ts`
```ts
import {useState} from "react";
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import {toast} from "sonner";
import {useAppState} from "../state/AppState";
import {type
<FormValues>, <Schema>
}
from
"../forms/schemas";
export function <hookName>(): {
form: ReturnType<typeof useForm<<FormValues>>>;
isLoading: boolean;
submit<Entity>: () => Promise<boolean>;
} {
const {
<action>
}
= useAppSta