Menü
Form patterns with React Hook Form + Zod validation + zodResolver. Use when building forms with validation.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | forms |
| description | Form patterns with React Hook Form + Zod validation + zodResolver. Use when building forms with validation. |
| paths | ["src/lib/validations/**","src/components/**/*Form*.tsx","src/components/**/*form*.tsx"] |
'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { createUserSchema, type CreateUserFormValues } from '@/lib/validations'
import { useUpdateUser } from '@/lib/hooks'
import { Button, Input } from '@/components/ui'
export function CreateUserForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<CreateUserFormValues>({
resolver: zodResolver(createUserSchema),
})
const updateUser = useUpdateUser()
const onSubmit = (data: CreateUserFormValues) => {
updateUser.mutate(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Input {...register('name')} error={errors.name?.message} />
<Input {...register('email')} error={errors.email?.message} />
<Button type="submit" isLoading={updateUser.isPending}>
Save
</Button>
</form>
)
}
import { z } from 'zod'
export const createUserSchema = z.object({
name: z.string().min(1, 'Name is required'),
email: z.string().email('Invalid email'),
})
export type CreateUserFormValues = z.infer<typeof createUserSchema>
src/lib/validations/*.tszodResolver to connect Zod schemas with React Hook Formz.infer<typeof schema> — never duplicate types'use client')src/lib/validations/index.tsDesign-token and theming conventions for the Starter — semantic CSS variables in theme.css, Tailwind v4 @theme registration in globals.css, dark mode, and the Figma token-sync flow. Use when extracting repeated design values, adding/editing tokens, theming, or syncing tokens from Figma.
API service layer with ky/apiClient and Next.js API routes with Zod validation. Use when creating services, API endpoints, or HTTP calls.
Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.
Conventions when no auth provider is bundled. Use when adding authentication or guarding routes.
React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating UI or shared components.
Use before writing or referencing any stack library — fetches version-accurate docs via the context7 MCP server so call signatures, hooks, and APIs match what is installed. Invoke on first usage of any non-none slot library, on any non-trivial Next.js API, or when uncertain whether an API is current.