Update frontend AI rules to use React form components over HTML to follow conventions

Author: tjementum

.cursor/rules/frontend/form-with-validation.mdc

@@ -97,18 +97,18 @@ function BadUserProfileForm({ user }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
       {/* Missing proper validation and error handling */}
-      <input name="firstName" defaultValue={user?.firstName} required />
-      <input name="lastName" defaultValue={user?.lastName} required />
-      <input name="title" defaultValue={user?.title} />
+      <TextField name="firstName" defaultValue={user?.firstName} isRequired />
+      <TextField name="lastName" defaultValue={user?.lastName} isRequired />
+      <TextField name="title" defaultValue={user?.title} />
 
-      {error && <div className="error">{error.message}</div>}
+      {error && <FormErrorMessage error={error} />}
 
-      <button type="submit" disabled={isLoading}>
-        {isLoading ? "Saving..." : "Save changes"}
-      </button>
-    </form>
+      <Button type="submit" isDisabled={isLoading}>
+        {isLoading ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
+      </Button>
+    </Form>
   );
 }
 ```

.cursor/rules/frontend/react-aria-components.mdc

@@ -25,6 +25,7 @@ import { Form } from "@repo/ui/components/Form";
 import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Button } from "@repo/ui/components/Button";
 import { TextField } from "@repo/ui/components/TextField";
+import { Trans } from "@lingui/react/macro";
 
 <Form>
   <TextField 

.cursor/rules/frontend/tanstack-query-api-integration.mdc

@@ -27,6 +27,9 @@ Note: All .NET API endpoints are available as strongly typed API contracts in th
 ## Example 1 - Data Fetching Example
 
 ```typescript
+import { LoadingSpinner } from "@repo/ui/components/LoadingSpinner";
+import { UserList } from "@repo/ui/components/UserList";
+
 const { data: users, isLoading } = api.useQuery("get", "/api/users", {
   params: { query: { Search: search } }
 });
@@ -65,6 +68,12 @@ const handleComplete = () => {
 ## Example 3 - Form Submission Example
 
 ```typescript
+import { Form } from "@repo/ui/components/Form";
+import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
+import { TextField } from "@repo/ui/components/TextField";
+import { Button } from "@repo/ui/components/Button";
+import { Trans } from "@lingui/react/macro";
+
 <Form
   onSubmit={mutationSubmitter(completeLoginMutation, { 
     path: { id: loginId } 

.cursor/rules/frontend/translations.mdc

@@ -22,6 +22,8 @@ Carefully follow these instructions when implementing translations and internati
 
 ```tsx
 import { Trans } from "@lingui/react/macro";
+import { Button } from "@repo/ui/components/Button";
+import { Heading } from "@repo/ui/components/Heading";
 
 <Button onPress={handleLogin}>
   <Trans>Log in</Trans>

.windsurf/rules/frontend/form-with-validation.md

@@ -98,18 +98,18 @@ function BadUserProfileForm({ user }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
       {/* Missing proper validation and error handling */}
-      <input name="firstName" defaultValue={user?.firstName} required />
-      <input name="lastName" defaultValue={user?.lastName} required />
-      <input name="title" defaultValue={user?.title} />
+      <TextField name="firstName" defaultValue={user?.firstName} isRequired />
+      <TextField name="lastName" defaultValue={user?.lastName} isRequired />
+      <TextField name="title" defaultValue={user?.title} />
 
-      {error && <div className="error">{error.message}</div>}
+      {error && <FormErrorMessage error={error} />}
 
-      <button type="submit" disabled={isLoading}>
-        {isLoading ? "Saving..." : "Save changes"}
-      </button>
-    </form>
+      <Button type="submit" isDisabled={isLoading}>
+        {isLoading ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
+      </Button>
+    </Form>
   );
 }
 ```

.windsurf/rules/frontend/frontend.md

@@ -37,7 +37,7 @@ Carefully follow these instructions for frontend TypeScript and React developmen
    - Reference existing implementations to maintain consistency.
 
 4. Build and format your changes:
-   - After each minor change, run `[CLI_ALIAS] format --frontend` to format your code. See [Tools](/.windsurf/rules/tools.md) for details.
+   - After each minor change, run `[CLI_ALIAS] build --frontend` to format your code. See [Tools](/.windsurf/rules/tools.md) for details.
    - This ensures consistent code style across the codebase.
 
 5. Verify your changes:

.windsurf/rules/frontend/react-aria-components.md

@@ -26,6 +26,7 @@ import { Form } from "@repo/ui/components/Form";
 import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Button } from "@repo/ui/components/Button";
 import { TextField } from "@repo/ui/components/TextField";
+import { Trans } from "@lingui/react/macro";
 
 <Form>
   <TextField 

.windsurf/rules/frontend/tanstack-query-api-integration.md

@@ -28,6 +28,9 @@ Note: All .NET API endpoints are available as strongly typed API contracts in th
 ## Example 1 - Data Fetching Example
 
 ```typescript
+import { LoadingSpinner } from "@repo/ui/components/LoadingSpinner";
+import { UserList } from "@repo/ui/components/UserList";
+
 const { data: users, isLoading } = api.useQuery("get", "/api/users", {
   params: { query: { Search: search } }
 });
@@ -66,6 +69,12 @@ const handleComplete = () => {
 ## Example 3 - Form Submission Example
 
 ```typescript
+import { Form } from "@repo/ui/components/Form";
+import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
+import { TextField } from "@repo/ui/components/TextField";
+import { Button } from "@repo/ui/components/Button";
+import { Trans } from "@lingui/react/macro";
+
 <Form
   onSubmit={mutationSubmitter(completeLoginMutation, { 
     path: { id: loginId } 

.windsurf/rules/frontend/translations.md

@@ -23,6 +23,8 @@ Carefully follow these instructions when implementing translations and internati
 
 ```tsx
 import { Trans } from "@lingui/react/macro";
+import { Button } from "@repo/ui/components/Button";
+import { Heading } from "@repo/ui/components/Heading";
 
 <Button onPress={handleLogin}>
   <Trans>Log in</Trans>