docs: update React & add TypeScript inst. for project structure

- Added TypeScript instructions to clarify pnpm usage and directory conventions.
- Updated React instructions for consistency and added form, skeleton, and code-style requirements.

Generated-by: aiautocommit

Author: iloveitaly

.cursor/rules/react.mdc

@@ -4,18 +4,20 @@ globs: *.tsx
 alwaysApply: false
 ---
 
-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.
+

.cursor/rules/typescript.mdc

@@ -0,0 +1,10 @@
+---
+description:
+globs: *.ts
+alwaysApply: false
+---
+
+- 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.
+

.github/instructions/react.instructions.md

@@ -2,18 +2,20 @@
 applyTo: "**/*.tsx"
 ---
 
-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.
+

.github/instructions/typescript.instructions.md

@@ -0,0 +1,8 @@
+---
+applyTo: "**/*.ts"
+---
+
+- 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.
+