# Mobile Forms

> Use to plan form state and UX — React Hook Form (or equivalent) for form state, controlled inputs, submission, and error display — keeping form state out of global stores. Pairs with mobile-validation.

- Skill: `ahtishamshahzad/mobile-forms` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ahtishamshahzad/mobile-forms`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ahtishamshahzad/mobile-forms/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ahtishamshahzad (https://skillmd.com/u/ahtishamshahzad)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ahtishamshahzad/mobile-forms

---


# Mobile Forms

## Purpose

Plan forms: manage form state with React Hook Form (or equivalent), handle inputs, submission, and error display — with validation delegated to `mobile-validation`.

## When to Use

- When a screen collects user input of any complexity.
- Not for a single trivial input needing only local state.

## Inputs

- The form's fields, submission target, and UX requirements.
- Validation rules (`mobile-validation`).

## Discovery Questions

- How many fields, and what interaction complexity?
- What is the submission target and its error shape?
- What are the accessibility and keyboard behaviors?

## Responsibilities

- For login/signup/reset forms, take the credential rules from `../../auth-form-validation` rather than defining them here.

- Manage **form state** with a form library (React Hook Form or equivalent), not global state.
- Wire **controlled/uncontrolled inputs**, focus, and keyboard handling.
- Handle **submission**, loading, and **error display**.
- Delegate **validation** to `mobile-validation` (e.g. Zod resolver).
- Coordinate accessibility (`mobile-accessibility`).
- Document the unit as it is built — the screen file under `docs/mobile/screens/` (`../../application-documentation`).

## Required Workflow

1. Define fields + submission target.
2. Set up the form library + inputs.
3. Attach validation (delegate to `mobile-validation`).
4. Handle submit/loading/error UX.
5. Record the form plan.

## Decision Rules

- Form state stays in the form library, not Redux/Zustand.
- Validate via a schema resolver (`mobile-validation`), not scattered ad-hoc checks.
- Surface field- and form-level errors clearly and accessibly.

## Rules

- Keep form state local to the form.
- Delegate validation to `mobile-validation`.
- Handle keyboard/focus and accessibility.

## Anti-Patterns

- Form state in a global store.
- Ad-hoc validation scattered in handlers.
- No submission/loading/error handling.
- Ignoring keyboard/focus/accessibility.

## Validation Checklist

- [ ] Form library set up; fields defined.
- [ ] Validation delegated to `mobile-validation`.
- [ ] Submit/loading/error UX handled.
- [ ] Keyboard/focus + accessibility handled.
- [ ] Form state kept out of global stores.

## Definition of Done

A recorded form plan: library-managed form state, wired inputs and submission with error UX, schema validation via `mobile-validation`, and accessible keyboard/focus handling — no form state in global stores.

## Related Skills

`mobile-validation`, `mobile-state-management`, `mobile-accessibility`, `mobile-api-integration`, `mobile-server-state`, `../../application-documentation`.

## Related Knowledge

`../../../knowledge/` (input requirements).

## Related References

`../../../references/mobile/forms/` when populated.

## Context Loading Guidance

- **Requires:** the form's fields, submission target, UX + validation rules.
- **Does not require:** unrelated screens, the full mobile skill set, unrelated references.
- **May load:** `mobile-validation`, `mobile-api-integration`.
- **Stop when:** the form plan is recorded.

## Token Efficiency Guidance

Plan from the field list; delegate validation and transport to their skills.