Builds validated React forms using TanStack Form with pre-bound field components.
npx skills add https://github.com/Layer-Fi/layer-react --skill forms-layer-fi
Please help me install this Agent Skill. Skill: forms Source: https://github.com/Layer-Fi/layer-react/tree/main/src/components/blocks/Form Command: npx skills add https://github.com/Layer-Fi/layer-react --skill forms-layer-fi
useAppForm exposes FormTextField, FormNumberField, FormDatePickerField, FormNonRecursiveBigDecimalField, FormCheckboxField, FormSwitchField, FormRadioGroupField, and more via form.AppField, so no raw <Input> plus useState wiring is needed. - Validation and error layers: Per-field validators keyed by trigger (onChange, onBlur, onSubmit) return translated messages, shared validators live in @utils/shared/form/validators, and form-level API failures render through FormErrorBanner. - Use Case: Build a chart-of-accounts form by writing a useThingForm hook owning state and submission, then rendering field.FormTextField components with translated labels, and asserting the mutation request body in tests via MSW. ## Quick Start Ask the AI to create a new form following this Skill's pattern: a hook using useAppForm with validators and a presentational component rendering form.AppField fields with translated labels.High-intent search queries and answers about installing and using this skill.
Create a hook that calls useAppForm with defaultValues and an onSubmit handler, then render fields with form.AppField and the bound field.FormTextField-style components. Read form state with useStore(form.store, selector) selecting narrow slices like isValid or isSubmitting.
Pass a validators prop on form.AppField keyed by trigger such as onChange, onBlur, or onSubmit. Each validator returns a translated error message on failure and undefined on success; reusable rules like required and notEmpty live in @utils/shared/form/validators.
This happens when form values contain rich class types like BigDecimal. Keep form values as plain data, using NonRecursiveBigDecimal instead of BigDecimal, and pass class instances as props rather than storing them in form values.
Create the component in src/components/blocks/Form/ following CommonFormFieldProps, then register it in the fieldComponents map of createFormHook in useForm.tsx. It is not available on the field object until registered there.
Use the form filler utilities, addressing fields by their accessible label, which is why the label prop is required. Assert on the request body captured by the MSW handler's onRequest callback rather than inspecting internal form state.
cap-collectifWire React Hook Form with Relay mutations and Yup validation for form workflows.
aroidoIntegrate backend APIs into React applications using React Query for data fetching and caching.
sanity-ioAdds and maintains Chromatic visual regression coverage via Storybook stories, Vitest browser tests, and Playwright snapshots.
usebonderyAutomate React form creation and validation using Mantine's useForm and getInputProps.