dashboard-form-ui

Create or modify dashboard forms with react-hook-form and zod validation.

Updated Apr 3, 2026

Search Tags:#typescript #validation #zod #dashboard #forms #react-hook-form #routefocusmodal

Ready to run

npx skills add https://github.com/OZVE/cuarta-avenida --skill dashboard-form-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dashboard-form-ui
Source: https://github.com/OZVE/cuarta-avenida/tree/main/templates/basic/.claude/skills/dashboard-form-ui
Command: npx skills add https://github.com/OZVE/cuarta-avenida --skill dashboard-form-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create or modify forms in admin or vendor dashboards in Mercur basic starter using a stable, reusable form structure, validation, and UI conventions.

Core Features & Use Cases

Stable form structure with RouteFocusModal and RouteDrawer patterns
Zod-backed validation with react-hook-form integration
Consistent UI and guidance for admin/vendor forms

Quick Start

Create a new admin or vendor form by implementing a RouteFocusModal.Form with a zod-validated schema and RouteFocusModal wrapper.

Frequently Asked Questions about dashboard-form-ui

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

FAQPage Schema

How do I create validated forms in a React admin dashboard?▼

Use react-hook-form integrated with zod schemas to manage field state and validation, wrapping the inputs in a RouteFocusModal or RouteDrawer component to maintain consistent admin dashboard UI conventions.

What is the best way to standardize vendor dashboard forms?▼

Standardize vendor dashboard forms by applying reusable RouteFocusModal and RouteDrawer wrapper patterns with zod-backed react-hook-form validation to enforce consistent page-level create and edit flows.

Does this form structure work with zod and react-hook-form?▼

Yes, the form structure explicitly requires react-hook-form integrated with zod validation to manage form state and enforce schema rules for admin and vendor dashboard submissions.

How do I add form validation to a RouteFocusModal component?▼

Add validation to a RouteFocusModal by defining a zod schema and passing it to react-hook-form's resolver, connecting the validation rules directly to the form fields rendered inside the modal wrapper.

Can I use RouteDrawer for page-level edit flows in Mercur dashboards?▼

Yes, RouteDrawer is designed for page-level create and edit flows in Mercur dashboards, providing a stable wrapper structure that integrates seamlessly with react-hook-form and zod validation.

Why do I need zod schemas for dashboard form submission handling?▼

Zod schemas provide zod-backed validation that ensures form submission data matches the expected structure before processing, preventing invalid data entries in admin and vendor dashboard create and edit flows.