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

dashboard-tab-ui

Create tabbed wizard forms in Mercur admin and vendor dashboards using TabbedForm.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building multi-step tabbed forms in Mercur admin and vendor dashboards often leads to inconsistent navigation, broken validation, and duplicated modal wiring. This Skill enforces the stable TabbedForm pattern so tabs, validation scope, and i18n labels behave correctly. ## Core Features & Use Cases - Standardized Tab Structure: Uses TabbedForm from @mercurjs/dashboard-shared, which internally handles RouteFocusModal.Form, ProgressTabs, KeyboundForm, and the default Cancel/Continue/Save footer. - Validation Scope Guidance: Documents the known issue where Continue triggers full-form validation, and prescribes keeping required zod fields on the first tab only. - i18n and Dynamic Visibility: Enforces translation-ready tab labels and supports conditional tab visibility via the isVisible callback. - Use Case: When adding a new "Shipping" tab to a product creation wizard in the vendor dashboard, apply this Skill to wire the tab correctly without breaking Continue navigation or submit behavior. ## Quick Start Add a new tab to the vendor product creation wizard using TabbedForm with proper validation scope and i18n labels.

Frequently Asked Questions about dashboard-tab-ui

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

FAQPage Schema
How do I add a tab to a Mercur dashboard form?▼

Add a TabbedForm.Tab child inside TabbedForm from @mercurjs/dashboard-shared, giving it a unique id, an i18n-aware label, and optional validationFields. Do not build custom tab navigation with ProgressTabs from @medusajs/ui directly.

Why does the Continue button not work in my TabbedForm wizard?▼

TabbedForm's internal onNext calls form.trigger() without arguments, validating the entire form rather than the active tab. Keep required zod constraints like .min(1) only on first-tab fields and mark later-tab fields as .optional(), validating them at submit time.

Should I wrap TabbedForm in RouteFocusModal.Form?▼

No. TabbedForm already handles RouteFocusModal.Form, ProgressTabs, KeyboundForm, and the default footer internally. The page wraps RouteFocusModal around the form component, and the form renders TabbedForm directly.

Can I hide a tab based on form state in TabbedForm?▼

Yes. Pass the isVisible callback prop to TabbedForm.Tab, which receives the form and returns a boolean. Verify that dynamic visibility does not leave the wizard flow in an invalid state.

When should I use a custom footer in TabbedForm?▼

Only provide a custom footer render prop when you need to change button labels. The default footer already handles Cancel, Continue, and Save correctly, so omitting it is the preferred pattern.

Related Skills

Explore More Software Engineering Skills→
OZVEOZVE

dashboard-form-ui

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

Community
Intermediate
KaranKathur06KaranKathur06

building-admin-dashboard-customizations

Guide Medusa Admin dashboard customizations with TanStack Query data-loading patterns.

Community
Intermediate
amo-tech-aiamo-tech-ai
2

medusa-ui-conformance

Monitor and enforce UI consistency in Medusa admin and vendor interfaces.

Community
Intermediate
liwooliwoo
16

multi-step-form

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

Community
Advanced