docs: expand React and TypeScript guidelines, add React Hook Form usage

Generated-by: aiautocommit

Author: iloveitaly

instructions.md

@@ -37,23 +37,57 @@ When writing database models:
 * Use single double-quote docstrings (a string below the field definition) instead of comments to describe a field's purpose.
 * Use `ModelName.foreign_key()` when generating a foreign key field
 
+## TypeScript
+
+- Use `pnpm`, not `npm`
+- Node libraries are not available
+- Use `lib/` for generic code, `utils/` for project utilities, `hooks/` for React hooks, and `helpers/` for page-specific helpers.
+
 ## React
 
-1. Do not write any backend code. Just frontend logic.
-2. For any backend requirements, create mock responses. Use a function to return mock data so I can easily swap it out later.
-3. When creating mock data, always specify it in a dedicated `mock.ts` file
-4. Load mock data using a react router `clientLoader`. Use the Skeleton component to present a loading state.
-5. Store components for each major page or workflow in `src/components/$WORKFLOW_OR_PAGE_NAME`.
-6. Use lowercase dash separated words for file names.
-8. Use React 19, TypeScript, Tailwind CSS, and ShadCN components.
-9. Prefer functional components, hooks over classes.
-10. Break up large components into smaller components, but keep them in the same file unless they can be generalized.
-11. Put any "magic" strings like API keys, hosts, etc into a "constants.ts" file.
-12. Only use a separate interface for component props if there are more than 4 props.
-13. Internally, store all currency values as integers and convert them to floats when rendering visually
-14. use `pnpm` not `npm`
-15. Node libraries are not available
-16. Never edit the `components/ui/*.tsx` files
+- Do not write any backend code. Just frontend logic.
+- For any backend requirements, create mock responses. Use a function to return mock data so I can easily swap it out later.
+- When creating mock data, always specify it in a dedicated `mock.ts` file
+- Load mock data using a react router `clientLoader`. Use the Skeleton component to present a loading state.
+- If a complex skeleton is needed, create a component function `LoadingSkeleton` in the same file.
+- Store components for each major page or workflow in `src/components/$WORKFLOW_OR_PAGE_NAME`.
+- Use lowercase dash separated words for file names.
+- Use React 19, TypeScript, Tailwind CSS, and ShadCN components.
+- Prefer functional components, hooks over classes.
+- Break up large components into smaller components, but keep them in the same file unless they can be generalized.
+- Put any "magic" strings like API keys, hosts, etc into a "constants.ts" file.
+- Only use a separate interface for component props if there are more than 4 props.
+- Internally, store all currency values as integers and convert them to floats when rendering visually
+- Never edit the `components/ui/*.tsx` files
+- When building forms use React Hook Form.
+- Include a two line breaks between any `useHook()` calls and any `useState()` definitions for a component.
+
+## React Hook Form
+
+Follow this structure when generating a form.
+
+```react
+const formSchema = z.object({
+  field_name: z.string(),
+})
+
+const form = useForm<z.infer<typeof formSchema>>({
+  resolver: zodResolver(formSchema),
+})
+
+async function onSubmit(values: z.infer<typeof formSchema>) {
+  // ...
+}
+
+
+return (
+  <Form {...form}>
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      {/* ... */}
+    </form>
+  </Form>
+)
+```
 
 ## Shell