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

medusa-ui-conformance

Enforce UI conformance between Mercur dashboards and Medusa UI components.

Updated Apr 3, 2026
Search Tags:#accessibility#frontend#dashboard#ui-patterns#radix-ui#ui-conformance#medusa-ui
One-click install
npx skills add https://github.com/OZVE/cuarta-avenida --skill medusa-ui-conformance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: medusa-ui-conformance
Source: https://github.com/OZVE/cuarta-avenida/tree/main/.claude/skills/medusa-ui-conformance
Command: npx skills add https://github.com/OZVE/cuarta-avenida --skill medusa-ui-conformance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mercur dashboards risk drifting from Medusa UI patterns, leading to inconsistent UX, accessibility gaps, and maintenance burden. This skill enforces UI conformance to ensure a cohesive, accessible experience across admin and vendor interfaces.

Core Features & Use Cases

  • Enforces use of local wrappers and established patterns before introducing new UI primitives.
  • Recommends Medusa UI components as the default for common UI elements, with Radix UI only as a genuine gap filler.
  • Provides guardrails for accessibility, keyboard navigation, internationalization, and testability across dashboards.

Use Case: When proposing a new modal or dropdown in the Mercur admin, apply this skill to determine if an existing wrapper suffices or if a new primitive is warranted to preserve consistency.

Quick Start

Assess a new or modified Mercur dashboard UI component against Medusa UI patterns and apply the prescribed wrappers or primitives.

Frequently Asked Questions about medusa-ui-conformance

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

FAQPage Schema
How do I enforce Medusa UI patterns in Mercur dashboards?▼

To enforce UI conformance, prioritize local wrappers and use @medusajs/ui components as the default for reusable UI, overlays, menus, and forms before creating custom primitives, ensuring consistent dashboard UX.

When should I use Radix UI instead of Medusa UI components?▼

Use Radix UI only to fill genuine gaps when @medusajs/ui lacks a suitable primitive for your dashboard, ensuring you maintain UI conformance and avoid unnecessary component duplication.

What is the best way to add interactive primitives to a Mercur admin dashboard?▼

The best way to add interactive primitives is by assessing existing local wrappers first, then defaulting to @medusajs/ui components, and only introducing custom or Radix UI elements if a genuine functional gap exists.

Does adding custom UI components affect accessibility in Mercur dashboards?▼

Adding custom UI components can risk accessibility gaps and UI drift. Enforcing UI conformance provides guardrails for keyboard navigation, internationalization, and testability to maintain a cohesive accessible experience.

Can I use custom dropdowns and modals without breaking Mercur dashboard consistency?▼

You can use custom dropdowns and modals without breaking consistency by applying UI conformance rules to determine if an existing local wrapper suffices or if a new primitive is genuinely warranted.

Related Skills

Explore More Design & Creative Skills→
amo-tech-aiamo-tech-ai
2

dashboard-page-ui

Define UI patterns and routing for Mercur dashboard pages.

Community
Advanced
gwpjpgwpjp
3

accessibility-auditor

Audit running web applications for accessibility issues via the accessibility tree and keyboard navigation.

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

medusa-ui-conformance

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

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

dashboard-tab-ui

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

Community
Intermediate