updates

1 files changed, 126 insertions, 0 deletions

diff --git a/ui/shadcn/.claude/commands/setup-form.md b/ui/shadcn/.claude/commands/setup-form.md
new file mode 100644
index 0000000..068a80f
--- /dev/null
+++ b/ui/shadcn/.claude/commands/setup-form.md
@@ -0,0 +1,126 @@
+---
+description: Set up a form with React Hook Form and Zod validation
+argument-hint: <form-name>
+allowed-tools: Read, Write, Edit, Bash
+---
+
+Create a complete form setup with React Hook Form, Zod validation, and shadcn/ui form components.
+
+## Instructions
+
+1. Install required dependencies if not present:
+   - `react-hook-form`
+   - `@hookform/resolvers`
+   - `zod`
+   - Required shadcn components: `form`, `input`, `button`, etc.
+
+2. Create the form with:
+   - Zod schema for validation
+   - Form component with React Hook Form
+   - Proper error handling
+   - Loading states
+   - Success feedback
+
+## Template Structure
+
+```tsx
+// lib/validations/[form-name].ts
+import * as z from "zod"
+
+export const [formName]Schema = z.object({
+  // Define fields
+})
+
+export type [FormName]Values = z.infer<typeof [formName]Schema>
+
+// components/forms/[form-name]-form.tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { [formName]Schema, type [FormName]Values } from "@/lib/validations/[form-name]"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/components/ui/use-toast"
+
+export function [FormName]Form() {
+  const form = useForm<[FormName]Values>({
+    resolver: zodResolver([formName]Schema),
+    defaultValues: {
+      // Set defaults
+    },
+  })
+
+  async function onSubmit(data: [FormName]Values) {
+    try {
+      // Handle submission
+      toast({
+        title: "Success",
+        description: "Form submitted successfully",
+      })
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        {/* Form fields */}
+        <Button 
+          type="submit" 
+          disabled={form.formState.isSubmitting}
+        >
+          {form.formState.isSubmitting ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+## Common Form Types
+
+- **contact-form**: Name, email, message
+- **login-form**: Email/username, password
+- **register-form**: Name, email, password, confirm password
+- **profile-form**: Avatar, bio, social links
+- **settings-form**: Preferences, notifications
+- **checkout-form**: Billing, shipping, payment
+
+## Field Types to Consider
+
+- Text inputs (email, url, tel, password)
+- Textareas for long text
+- Select dropdowns
+- Radio groups
+- Checkboxes
+- Date pickers
+- File uploads
+- Number inputs with validation
+
+## Example
+
+If the user says: `/setup-form contact`
+
+1. Install dependencies:
+```bash
+npm install react-hook-form @hookform/resolvers zod
+npx shadcn@latest add form input textarea button
+```
+
+2. Create validation schema
+3. Create form component with name, email, message fields
+4. Add proper validation rules
+5. Include submit handler with loading state
\ No newline at end of file