skills.rest
alejandro-technology
alejandro-technologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-form

Generate React form components with react-hook-form and Yup validation.

Updated Feb 27, 2026
Search Tags:#typescript#validation#react-native#react-hook-form#form-generation#yup
One-click install
npx skills add https://github.com/alejandro-technology/react-native-template --skill create-form-alejandro-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-form
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/generation/create-form
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill create-form-alejandro-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables teams to rapidly build consistent, validated form components by combining react-hook-form with Yup, generating a reusable pattern that includes a domain schema, a FormData type, and an adapter to map form data to API payloads.

Core Features & Use Cases

  • Generates a Yup schema with Spanish messages and typed FormData.
  • Provides a reusable form component pattern that uses a control prop and integrates with a shared UI.
  • Includes an adapter to map form inputs to backend payloads for API mutations.
  • Supports TypeScript typings and a clear project convention for UI forms across features.

Quick Start

Create a ready-to-use form module for a feature by wiring a {Feature}Form to a domain model and an adapter, then render it in a form view.

Frequently Asked Questions about create-form

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

FAQPage Schema
How do I generate React form components with Yup validation and TypeScript?▼

To generate React form components with Yup validation and TypeScript, this Skill outputs a reusable pattern combining react-hook-form with a typed FormData schema, a control-based UI component, and a form-to-payload adapter.

Can I use react-hook-form with Yup for React Native data entry forms?▼

Yes, you can use react-hook-form with Yup for React Native data entry forms. The Skill generates a reusable control-based component pattern that supports validation and payload mapping across both React and React Native applications.

What is the best way to structure form data and map it to an API payload?▼

The best way to structure form data for API payloads is to use a dedicated form-to-payload adapter. This Skill generates an adapter alongside a Yup domain schema and FormData type to map inputs directly to backend mutations.

Does this form generation pattern enforce specific validation message languages?▼

Yes, the form generation pattern enforces Spanish validation messages within the generated Yup schema. It applies this convention consistently across the domain schema and form component validation logic.

How do I create reusable form components for feature development?▼

You create reusable form components by wiring a feature-specific form module to a shared UI control prop. This Skill generates the component pattern, domain schema, and adapter needed to render a ready-to-use form view.

Related Skills

Explore More Software Engineering Skills→
tanaka-mambingetanaka-mambinge

react-form-validation

Validate React form inputs using react-hook-form and Yup schemas.

Community
Intermediate
stacklokstacklok
163

testing-api-assertions

Verify captured API requests for method, path, payload in tests.

Official
Intermediate
linnefromicelinnefromice

frontend-patterns

Standardize React/Next.js frontend architecture with reusable TypeScript patterns.

Community
Intermediate
Wahidul123Wahidul123

forms

Validate and manage React form inputs with react-hook-form and TypeScript.

Community
Intermediate