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

medusa-ui-conformance

Guides custom admin and vendor UI development using @mercurjs/dashboard-shared and @medusajs/ui components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When building custom admin or vendor dashboards in the Mercur Medusa starter, developers often reinvent UI patterns that already exist, creating inconsistent interfaces and duplicated effort. This Skill enforces a clear component reuse hierarchy so every new UI element aligns with the existing design system. ## Core Features & Use Cases - Component Selection Hierarchy: Enforces a strict order of preference: @mercurjs/dashboard-shared wrappers first, then @medusajs/ui primitives, then composition, and only lastly new low-level primitives. - Usage Rules for Key Components: Defines when to use StatusBadge vs Badge vs plain text, TabbedForm for multi-step forms, _DataTable for data grids, and ActionMenu for contextual actions. - Hard Rules and Review Checklist: Provides explicit prohibitions (no custom dropdowns, dialogs, or tables when wrappers exist) plus a review checklist covering accessibility, i18n, and keyboard behavior. - Use Case: When adding a new vendor dashboard page with a filterable order list and a multi-step creation form, use this Skill to correctly compose _DataTable and TabbedForm instead of building custom tables and tab navigation. ## Quick Start Ask the assistant to review your new admin dashboard component for conformance with the Medusa UI component hierarchy and usage rules.

Frequently Asked Questions about medusa-ui-conformance

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

FAQPage Schema
How do I build a multi-step form in a Medusa admin dashboard?▼

Use TabbedForm from @mercurjs/dashboard-shared inside a RouteFocusModal. It renders ProgressTabs in the header automatically and handles form context, keyboard shortcuts, and the footer, so you should not build tab navigation manually with ProgressTabs.

What is the difference between StatusBadge and Badge in @medusajs/ui?▼

StatusBadge is for statuses only, such as published, draft, or active, and accepts colors like green, orange, red, blue, or grey. Badge is for counts and tags only, such as "3 items", and must never be used for statuses.

Should I build a custom data table or use _DataTable in Mercur?▼

Use _DataTable from @mercurjs/dashboard-shared whenever it covers your use case. It provides pagination, search, filters, and sorting out of the box, so building a custom table with Table from @medusajs/ui is prohibited in those scenarios.

When is it acceptable to add a new low-level UI primitive in the Mercur starter?▼

Only after confirming that @mercurjs/dashboard-shared has no component for the pattern, @medusajs/ui cannot solve it directly, and composition of existing wrappers fails. The gap must be real and reusable enough to justify a new component.

What accessibility requirements apply to custom dashboard UI in Medusa?▼

Any custom interactive UI must include keyboard behavior, focus handling, and i18n-ready copy. You should verify keyboard and focus behavior manually for non-trivial interactions and run the relevant app lint and build checks.

Related Skills

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

medusa-ui-conformance

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

Community
Intermediate
wixwix
25

wix-cli-dashboard-page

Scaffold Wix CLI dashboard pages with page.tsx, extensions.ts, and registration wiring.

Official
Advanced
jitenkr2030jitenkr2030

frontend-design

Translate UI requirements into token-driven frontend code for modern frameworks.

Community
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced