Enforce TanStack Form conventions for React form development.
npx skills add https://github.com/emelleby/tc-vsme --skill form-system-emelleby
Please help me install this Agent Skill. Skill: form-system Source: https://github.com/emelleby/tc-vsme/tree/main/.agent/skills/form-system Command: npx skills add https://github.com/emelleby/tc-vsme --skill form-system-emelleby
This skill enforces project form system conventions automatically during form development using the TanStack Form integration. It ensures consistent patterns for form hooks, field components, focus management, validation, server action integration, and accessibility.
Apply the Form System Conventions to a sample React form that uses useAppForm, form.AppField, and form.SubmitButton to demonstrate consistent patterns.
High-intent search queries and answers about installing and using this skill.
To enforce consistent validation patterns in TanStack Form, apply standardized conventions using the useAppForm hook, form.AppField components, and useServerAction integration to satisfy validationLogic and canSubmitWhenInvalid requirements automatically.
Manage focus on validation errors in React forms by applying the withFocusManagement wrapper during form development, which ensures accessible form rendering and automatically directs focus when validation logic fails.
This form convention system supports dialog and edit forms, applying consistent field components, focus management, and server action integration across create, edit, and dialog forms to maintain a cohesive UX and maintainable codebase.
The best way to standardize React form fields like TextField, SelectField, and ComboboxField is to enforce consistent props and state handling through a unified form hook wrapper, ensuring all field components adhere to project accessibility requirements.
Integrate server actions with TanStack Form by using the useServerAction hook alongside useAppForm, ensuring seamless server action integration that satisfies project form conventions for validation and submission state.
The limitations of enforcing TanStack Form conventions include strict adherence to specific wrappers like form.AppForm and form.SubmitButton, meaning forms must use useAppForm and standardized field components rather than custom or alternative React form implementations.
kvnwolfBuild type-safe forms with TanStack Form, Base UI Field, and Zod validation.
wraps-teamImplement Next.js server actions with TanStack Form and zod validation.
yonatangrossBuild accessible UI component libraries with shadcn/ui and Radix Primitives.
AratKruglikImplement React forms with react-hook-form, Formik, or TanStack Form.
