--- name: form-patterens-and-best-practices description: This skill provides guidance for creating consistent, well-structured forms in Next.js\/react applications using shadcn UI components, react-hook-form, and Zod validation. --- # Form Patterns and Best Practices ## Overview This skill provides guidance for creating consistent, well-structured forms in Next.js\/react applications using shadcn UI components, react-hook-form, and Zod validation. ## Form Structure Pattern ### Required Imports Every form should import the following components and libraries: ```tsx import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform\/resolvers\/zod"; import { Button } from "@\/components\/ui\/button"; import { Input } from "@\/components\/ui\/input"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@\/components\/ui\/form"; import { formSchema, type FormDataType } from "@\/features\/feature-name\/schema"; \/\/ Adjust import path import Link from "next\/link"; \/\/ If needed for navigation ``` ### Form Component Structure All forms should follow this structure with the shadcn Form components: ```tsx export const FormComponentName = () => { const form = useForm({ resolver: zodResolver(formSchema), \/\/ Optionally set default values \/\/ defaultValues: { \/\/ fieldName: "defaultValue" \/\/ } }); const onSubmit = async (data: FormDataType) => { \/\/ Handle form submission \/\/ This could be a mutation call, API request, etc. } return (

( Field Label<\/FormLabel> <\/FormControl> <\/FormItem> )} \/> {\/* Add more FormField components as needed *\/}