skills.rest
tkorakas
tkorakasCOMMUNITY
Explore all skills by this author →
GitHub

react-template-form-feature

Scaffold React form features with Zod schemas, handlers, and TanStack Query.

11|Updated Nov 8, 2025
Search Tags:#typescript#react#zod#forms#i18n#tanstack-query#react-hook-form
One-click install
npx skills add https://github.com/tkorakas/react-template --skill react-template-form-feature
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-template-form-feature
Source: https://github.com/tkorakas/react-template/tree/main/.agents/skills/react-template-form-feature
Command: npx skills add https://github.com/tkorakas/react-template --skill react-template-form-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern React apps require consistent, validated, and maintainable form features; this skill removes the guesswork by producing schema-first validation, handler-driven submit flows, and UI wiring that follow the repository's conventions so forms are reliable and easy to maintain.

Core Features & Use Cases

  • Schema-first validation: generates Zod schemas with inferred types and cross-field constraints to enforce strong validation and type-safety.
  • Handler + data-access integration: produces a handler that owns useForm, TanStack Query mutations, centralized API calls, and post-submit navigation/toast behavior.
  • UI wiring and i18n: creates a page that uses FormProvider, shared common/ui form-fields, and updates en/el locale namespaces for user-facing labels and messages.
  • Use Case: add a team-member create/edit form that validates email and role, submits via centralized data-access, and syncs locale keys for both English and Greek.

Quick Start

Create a new feature named team-member with fields name, email, and role, then generate the schema, handler, page, data-access API, and corresponding en/el locale keys following the repo patterns.

Frequently Asked Questions about react-template-form-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React form feature with Zod validation and TanStack Query?▼

To scaffold React forms with Zod and TanStack Query, generate schema-first validation with inferred types, handler-driven submit mutations, and centralized API calls. This produces pages, schemas, and data-access modules following repository conventions.

What is the best way to structure complex React forms with i18n and schema validation?▼

Structure complex React forms using FormProvider-based UI wiring, shared form-field components, Zod schemas, and locale namespace updates for labels and messages. This approach enforces type-safety and maintainability across English and Greek translations.

Can I use React Hook Form with Zod schemas for create and edit forms in a feature directory?▼

Yes, you can generate create and edit forms within src/features using React Hook Form with Zod schemas. The output includes a handler owning useForm, TanStack Query mutations, centralized API calls, and post-submit navigation with type-safe cross-field constraints.

Does this React form scaffolding approach support cross-field validation and multiple locale namespaces?▼

React form scaffolding supports cross-field validation through generated Zod schemas with inferred types and updates en/el locale namespaces for user-facing labels and messages. It ensures type-safety and sync across English and Greek translations.

How do I refactor existing React forms to use centralized data-access and schema-first validation?▼

Refactor React forms by generating new handler and schema modules owning useForm and TanStack Query mutations with centralized API calls. The process updates routes and locale namespaces, verifying results through type-check and build verification.

When should I avoid generating React form features with automated schema and handler scaffolding?▼

Avoid automated React form scaffolding for simple single-input forms lacking Zod cross-field validation, TanStack Query mutations, or i18n requirements. It targets complex mixed-input forms needing centralized API modules and locale namespace management.

Related Skills

Explore More Software Engineering Skills→
locnbk2002locnbk2002
1

tanstack

Develop full-stack React apps with TanStack Start, Form, and AI.

Community
Intermediate
djankiesdjankies

validating-query-inputs

Validate external input with Zod before Prisma operations.

Community
Basic
cole-robertsoncole-robertson
36

inertia-rails-forms

Build Inertia Rails forms with useForm for state, validation, and file uploads.

Community
Basic
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced