AnthropicClaude 3.5 Sonnet / Cursorfrontend development1 Customizable Placeholders

Type-Safe Accessible Form Engine with Zod & React Hook Form

Generates accessible, type-safe multi-field form components with asynchronous validation, field arrays, and WCAG AA compliance.

A checkout form interface concept with clear groups and green validation states.
Visual style ConceptualAspect ratio 1:1Model Claude 3.5 Sonnet / CursorSource content with attribution.
Creator SwitchRoute Engineering Team
Expected Output Format:Complete accessible form component with Zod validation, error feedback, and unit tests.
Primary Use Case:User registration flows, enterprise settings forms, and multi-step checkout processes.
Official Tool Documentation:Open Official Platform / Docs

Customize Placeholders in Real-Time

Customize the list of form fields and validation rules to match your onboarding or checkout flow.

Prompt InstructionsCopy count not available
Write a production-grade, accessible form component in React and TypeScript using 'react-hook-form' and '@hookform/resolvers/zod'.

Form requirements:
1. Fields: Name, Email (with async domain check), Password (with live strength meter scoring 4 criteria), Country Select, Terms Checkbox, and Dynamic Tag Array (add/remove items).
2. Zod Schema: Strict types, custom regex patterns, and descriptive error messages for every failure state.
3. Accessibility:
   - Proper 'aria-invalid', 'aria-describedby', and 'role="alert"' linkages for error states.
   - Screen-reader announceable validation feedback.
   - High-contrast visible focus rings conforming to WCAG 2.1 AA.
4. State Handling: Disabled submit button while isSubmitting or isValidating, inline spinner, server-side error mapping, and form reset on success.
5. Unit Test: Vitest / React Testing Library test suite validating error triggers on empty submit and happy-path submission.

Optimization Tips & Parameters

Use aria-describedby pointing to error IDs to ensure blind and low-vision users receive error notices immediately.

More frontend development Prompts

View full library →
A developer laptop showing an abstract code editor in a bright workspace.1:1
CursorClaude 3.5 Sonnet / Cursor2 Placeholdersfrontend development

Robust React Hook with AbortController & Cache

Generates production-ready TypeScript React custom hooks handling race conditions, retry backoff, and caching.

Write a production-grade TypeScript React custom hook named useFetchWithCache<T>(url: string, options?: RequestInit). Features required: 1) In-memory LRU cache with TTL, 2) Automatic cancellation of in-flight requests using AbortController on unmount/re-query, 3) Exponential backoff retry logic (up to 3 attempts), 4) Strict TypeScript types with generic response inference, and 5) Jest unit test suite testing error boundaries.

ConceptualreacttypescriptAspect 1:1
Details