skills.rest
amoai-tech
amoai-techCOMMUNITY
Explore all skills by this author →
GitHub

dashboard-form-ui

Create and modify admin and vendor dashboard forms using react-hook-form, zod, and Mercur UI conventions.

1|Updated Sep 15, 2026
Search Tags:#zod#dashboard#modal#form validation#react-hook-form#medusa#mercur
One-click install
npx skills add https://github.com/amoai-tech/mdeai --skill dashboard-form-ui-amoai-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-form-ui
Source: https://github.com/amoai-tech/mdeai/tree/main/commerce/mercur/.claude/skills/dashboard-form-ui
Command: npx skills add https://github.com/amoai-tech/mdeai --skill dashboard-form-ui-amoai-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent create and edit forms in Mercur admin and vendor dashboards requires following specific modal, drawer, validation, and i18n conventions; this Skill encodes those patterns so forms stay structurally consistent and correctly guarded. ## Core Features & Use Cases - Standard form page structure: Implements create flows with RouteFocusModal and edit flows with RouteDrawer, including Header, Body, Footer, and Close composition. - Schema-driven validation: Uses react-hook-form with zodResolver, Form.Field composition, and submission guards that protect non-button submit paths. - Use Case: When adding a new "create product attribute" page to the vendor dashboard, apply this Skill to scaffold the RouteFocusModal form with translated labels, zod validation, toast feedback, and a guarded submit button. ## Quick Start Create a new edit form drawer for the vendor dashboard product page following the dashboard form conventions with zod validation and i18n labels.

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 a form in a Medusa or Mercur admin dashboard?▼

Wrap the page in RouteFocusModal for create flows, then build the form with RouteFocusModal.Form, react-hook-form, and zodResolver. Use Form.Field, Form.Item, Form.Label, and Form.ErrorMessage for field composition, and place submit and cancel actions in RouteFocusModal.Footer.

How do I build an edit drawer form in a Mercur dashboard?▼

Use RouteDrawer instead of RouteFocusModal for edit flows, with .Form, .Header, .Title, .Description, .Body, .Footer, and .Close. The edit route must live in an @-prefixed directory like [id]/@edit/page.tsx so the detail page stays mounted as a parallel route.

What validation library works with react-hook-form in dashboard forms?▼

Zod with zodResolver is the preferred validation approach for non-trivial forms in this setup. Define a zod schema, pass it to useForm via zodResolver, and surface errors through Form.ErrorMessage components.

Why does my detail page unmount when opening the edit drawer?▼

The edit drawer route is missing the @ prefix that creates a parallel route. Rename the directory to something like [id]/@edit/page.tsx so the drawer renders alongside the detail page instead of replacing it.

When should I use RouteFocusModal versus RouteDrawer?▼

Use RouteFocusModal, a full-screen modal overlay, for creating new entities. Use RouteDrawer, a side panel from the right, for editing existing entities. If the form is a tabbed wizard, use TabbedForm instead, which renders RouteFocusModal.Form internally.

Related Skills

Explore More Software Engineering Skills→
monobaselabsmonobaselabs

frontend-module

Connect React UI components to typed API endpoints using generated SDK hooks.

Official
Intermediate
cap-collectifcap-collectif
26

form-mutation

Wire React Hook Form with Relay mutations and Yup validation for form workflows.

Official
Advanced
OZVEOZVE

medusa-ui-conformance

Enforce UI conformance between Mercur dashboards and Medusa UI components.

Community
Advanced
liwooliwoo
16

multi-step-form

Coordinate multi-step form creation and editing with per-step validation.

Community
Advanced