Enhance documentation for route-action-gen workflow and React components (#18)

- Updated the route-action-gen workflow description to include server actions/functions.
- Added a new section in TypeScript/JavaScript standards for React Server Action/Function, referencing the route-action-gen workflow.
- Improved the data & mutations section in the React component skill documentation to clarify the use of route-action-gen for data fetching and server actions.

Co-authored-by: Nico Prananta <311343+nicnocquee@users.noreply.github.com>

Author: nicnocquee

.cursor/rules/planning-ts-js-standards.mdc

@@ -0,0 +1,28 @@
+---
+description: Ensure planned todos follow TypeScript/JavaScript standards
+alwaysApply: true
+---
+
+# Planning with TS/JS Standards
+
+When creating a plan or todo list for a TypeScript or JavaScript project, every todo item must account for the standards in the `typescript-javascript-standards` rule.
+
+Each planned task should include relevant steps for:
+
+- **JSDoc comments** on every new or modified function.
+- **Dependency injection** — accept collaborators as parameters with production defaults.
+- **Unit tests** with 100% coverage, co-located as `.test.ts` / `.test.js` files.
+- **Kebab-case file naming** for any new files.
+- **Linter & TypeScript error resolution** before marking a task complete.
+
+```
+❌ BAD — missing standards steps
+1. Create fetchUsers function
+2. Wire it up in the component
+
+✅ GOOD — includes standards
+1. Create fetchUsers function with JSDoc, accepting db client via DI
+2. Add fetchUsers.test.ts with 100% coverage using a fake db
+3. Wire it up in the component with production default
+4. Resolve all linter/TS errors
+```

.cursor/rules/route-action-gen-workflow.mdc

@@ -1,12 +1,12 @@
 ---
-description: Workflow for creating Next.js route handlers (App Router) or API routes (Pages Router) using route-action-gen
+description: Workflow for creating Next.js route handlers (App Router), API routes (Pages Router) and server actions/functions using route-action-gen
 globs: "**/route.*.config.ts"
 alwaysApply: false
 ---
 
 # Route Action Gen Workflow
 
-When creating a new route handler or API route, always use `route-action-gen`.
+When creating a new route handler, API route or server action/function, always use `route-action-gen`.
 
 ## Step 1: Create the config file
 

.cursor/rules/typescript-javascript-standards.mdc

@@ -91,3 +91,11 @@ test("getActiveUsers returns only active users", async () => {
 ## React component
 
 Use the /react-component skill when creating a React component.
+
+## React Server Action/Function
+
+Follow the /route-action-gen-workflow rule when creating a server action/function.
+
+## Next.js Route Handler/API Route
+
+Follow the /route-action-gen-workflow rule when creating a Next.js route handler/API route.

.cursor/skills/react-component/SKILL.md

@@ -33,16 +33,20 @@ Apply these in order of preference:
 
 ## Data & Mutations
 
-| Scenario | Approach |
-|----------|----------|
-| Data mutation | Server Action + `useActionState` |
-| Server action coupling | Accept server action via **props** (dependency injection) |
-| Client-side fetching | `useSWR` + API Route Handler |
-| Input validation | **Zod** in every server action and API endpoint |
+| Scenario               | Approach                                                                                                                                                                       |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Data mutation          | Server Action + `useActionState` using `route-action-gen`. See the `/route-action-gen-workflow` rule for more details.                                                         |
+| Server action coupling | Accept server action via **props** (dependency injection)                                                                                                                      |
+| Client-side fetching   | Use the generated files by `route-action-gen` to fetch data from the server action or API end point/route handler. See the `/route-action-gen-workflow` rule for more details. |
+| Input validation       | **Zod** in every server action and API endpoint                                                                                                                                |
 
 ```tsx
 // Server action injected via props
-const CreatePostForm = ({ createPost }: { createPost: (fd: FormData) => Promise<State> }) => {
+const CreatePostForm = ({
+  createPost,
+}: {
+  createPost: (fd: FormData) => Promise<State>;
+}) => {
   const [state, formAction, pending] = useActionState(createPost, initialState);
   return <form action={formAction}>...</form>;
 };
@@ -87,7 +91,9 @@ const DataTable = ({ children }: { children: React.ReactNode }) => (
 const DataTableHeader = ({ columns }: { columns: string[] }) => (
   <TableHeader>
     <TableRow>
-      {columns.map((col) => <TableHead key={col}>{col}</TableHead>)}
+      {columns.map((col) => (
+        <TableHead key={col}>{col}</TableHead>
+      ))}
     </TableRow>
   </TableHeader>
 );