Generates a React form component with validation and store integration.
npx skills add https://github.com/marcd35/health-tracker-9000 --skill generate-form
Please help me install this Agent Skill. Skill: generate-form Source: https://github.com/marcd35/health-tracker-9000/tree/main/.claude/skills/generate-form Command: npx skills add https://github.com/marcd35/health-tracker-9000 --skill generate-form
This Skill automates the boilerplate creation of a React form component with validation, state management, and store integration, reducing repetitive coding tasks.
Ask the user for: 1) Form name, 2) Fields and types, 3) Store action to call on submit, 4) Whether it includes a list. Then generate the file at the specified path following the MealLogForm.tsx pattern.
High-intent search queries and answers about installing and using this skill.
To auto-create a validated React form component, use this Skill to generate a standalone file at src/components/forms/{FormName}.tsx. It scaffolds useState field management, validation logic, and wires the submit handler directly to your store action.
Yes, you can generate a React data-entry form with add/remove list functionality. By specifying that your form includes a list during setup, the Skill applies the MealLogForm.tsx pattern to scaffold dynamic item management.
To generate a shadcn/ui form component, you need to provide the form name, field names and their types, the store action to call on submit, and whether the form includes a list. Standard React tooling is required.
Yes, this form generator works with TypeScript and useHealthStore patterns. It outputs a ready-to-use React component utilizing shadcn/ui elements, specifically following the implementation pattern demonstrated in MealLogForm.tsx.
The best way to reduce boilerplate when building React forms with validation is to automate the repetitive coding tasks. This Skill generates the complete component structure, including error handling and UI integration, directly into a new file.
A limitation is that generated forms strictly follow the MealLogForm.tsx implementation pattern and output to src/components/forms/. You must have standard React tooling and shadcn/ui components pre-configured in your project.
Arnutt-NBuild reusable Next.js 16 components with Shadcn UI, Server Actions, and React Hook Form.
freedomw1987Fix disabled submit buttons in React quiz forms with mixed question types.
maneeshanifInstall and configure Shadcn/ui components in a Next.js project.
Wahidul123Validate and manage React form inputs with react-hook-form and TypeScript.
