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

admin-tab-ui

Enforce standardized TabbedForm tab UI patterns and metadata usage in the Medusa admin UI.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce consistent tab UI patterns for TabbedForm wizards in the Medusa admin UI, ensuring maintainable, accessible, and coherent multi-step form experiences across products like product creation and price lists.

Core Features & Use Cases

  • Enforces correct tab metadata usage with defineTabMeta<SchemaType> to guarantee type safety and forward navigation validation.
  • Guides layout, sectioning, heading levels, and i18n labelKey usage to maintain uniform UI across admin forms.
  • Encourages consistent sectioning, data-testid usage, and UI conformance checks when adding new tabs.

Quick Start

Apply this skill when creating or reviewing TabbedForm tabs to ensure consistent UI patterns and proper tab metadata usage.

Frequently Asked Questions about admin-tab-ui

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

FAQPage Schema
How do I enforce consistent tabbed form UI patterns in a React admin dashboard?▼

To enforce consistent tabbed form UI patterns in a React admin dashboard, apply standardized metadata using defineTabMeta typing to guarantee type safety, validate forward navigation, and maintain uniform sectioning and i18n labelKey usage.

What is defineTabMeta used for in multi-step admin forms?▼

defineTabMeta is used in multi-step admin forms to enforce correct tab metadata typing, guaranteeing type safety for schema validation and forward navigation when creating complex workflows like product or price list creation.

How do I add a new tab to a TabbedForm wizard in an admin UI?▼

To add a new tab to a TabbedForm wizard in an admin UI, define the tab using defineTabMeta<SchemaType>, ensure consistent layout and heading levels, apply i18n labelKey practices, and section content with data-testid attributes.

Does this tabbed form pattern require internationalization (i18n) label keys?▼

Yes, this tabbed form pattern requires internationalization (i18n) labelKey usage to maintain uniform UI coherence across admin forms, ensuring that tab metadata and sectioned content are accessible and consistently localized.

What's the best way to structure multi-step product creation forms in React?▼

The best way to structure multi-step product creation forms in React is to enforce standardized TabbedForm patterns using defineTabMeta typing, ensuring consistent sectioning, accessible data-testid attributes, and type-safe forward navigation validation.

Related Skills

Explore More Software Engineering Skills→
mercurjsmercurjs
1.7k

dashboard-tab-ui

Create customizable tabbed forms for admin and vendor dashboards with react-hook-form compatibility.

Official
Intermediate
kvnwolfkvnwolf
4

tanstack-form

Build type-safe forms with TanStack Form, Base UI Field, and Zod validation.

Community
Intermediate
bdfinstbdfinst
18

new-component

Create React components with PropTypes, default props, and data-testid attributes.

Community
Intermediate
Bbeierle12Bbeierle12
8

form-react

Build React forms with React Hook Form and Zod validation.

Community
Intermediate