skills.rest
OZVE
OZVECOMMUNITY
Explore all skills by this author →
GitHub

dashboard-tab-ui

Create tabbed UI forms in Mercur dashboards using TabbedForm.

Updated Apr 3, 2026
Search Tags:#ui#react#validation#dashboard#i18n#medusa#tabbed-form
One-click install
npx skills add https://github.com/OZVE/cuarta-avenida --skill dashboard-tab-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-tab-ui
Source: https://github.com/OZVE/cuarta-avenida/tree/main/templates/basic/.claude/skills/dashboard-tab-ui
Command: npx skills add https://github.com/OZVE/cuarta-avenida --skill dashboard-tab-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tabbed UI in Mercur dashboards can become inconsistent and hard to maintain across admin and vendor interfaces. This skill provides a standardized approach to building tabbed forms with proper validation scopes, i18n-ready labels, and a clean structure using TabbedForm.

Core Features & Use Cases

  • Enforces a clear TabbedForm-based page structure with per-tab fields and a consistent layout.
  • Supports admin and vendor dashboards, including dynamic tab visibility and a shared UI pattern across workflows.
  • Reduces boilerplate by promoting reusable patterns for Tab, Label, Control, and ErrorMessage components from @mercurjs/dashboard-shared.

Quick Start

Use this skill to create a tabbed form flow within a CreatePage following the provided examples.

Frequently Asked Questions about dashboard-tab-ui

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

FAQPage Schema
How do I create a tabbed form in a Mercur dashboard?▼

To create a tabbed form in a Mercur dashboard, use the TabbedForm component from @mercurjs/dashboard-shared within a CreatePage. This enforces a clear per-tab field structure and provides a consistent layout for admin and vendor workflows.

How does validation work in a React tabbed form?▼

Validation in a React tabbed form works by applying per-tab validation scopes within the TabbedForm structure. This ensures fields are validated according to their specific tab context before submission.

Can I use tabbed UI for both admin and vendor dashboards?▼

Yes, you can use tabbed UI for both admin and vendor dashboards. The TabbedForm pattern supports dynamic tab visibility and provides a shared UI structure across both dashboard types.

What is the best way to add i18n labels to dashboard tabs?▼

The best way to add i18n labels to dashboard tabs is by using the reusable Label component from @mercurjs/dashboard-shared. This promotes a standardized, internationalization-ready approach across your tabbed forms.

Are there known limitations when nesting tabs in a multi-step workflow?▼

Yes, nesting tabs in a multi-step workflow has known limitations. The TabbedForm structure actively prevents nesting issues to maintain a clean layout, providing a default footer and known issue handling for multi-step workflows.

Related Skills

Explore More Software Engineering Skills→
amo-tech-aiamo-tech-ai
2

dashboard-tab-ui

Create and customize tabbed UI components in Mercur dashboards with validation and i18n.

Community
Intermediate
masssi164masssi164

flutter-building-forms

Implement validated Flutter forms with state, validation, and submission.

Community
Intermediate
StaysrStaysr

i18n

Generate React localization translations from flat dot-notation keys with react-i18next.

Community
Intermediate
oakossoakoss
1

tanstack-form

Build accessible forms with TanStack Form and React Aria Components.

Official
Intermediate