Why does this skill emphasize separating display and modal queries?

Separating them ensures that data displayed on the page loads immediately on mount. If display data is tied to a modal's 'enabled' state, the UI will appear empty after a page refresh when the modal is closed.

When should I use this skill instead of the MedusaDocs MCP?

Use this skill first for planning, architectural patterns, and critical data-loading rules. Use the MCP server as a secondary source for specific API prop signatures and JS SDK method details.

Does this skill handle backend logic for Medusa?

No, this skill is specifically for Admin UI development. For implementing backend API routes, services, or subscribers, you should load the 'building-with-medusa' skill.

What is the recommended component for creating new entities vs. editing them?

Following Medusa's design patterns, you should use a FocusModal for creating new entities and a Drawer for editing existing ones.

Can I use standard HTML tags like span or p?

It is recommended to use the Medusa UI 'Text' component instead of raw HTML tags to ensure proper typography, scaling, and semantic coloring across the dashboard.

Medusa Admin Dashboard Customizer

Name: Medusa Admin Dashboard Customizer
Author: medusajs

bymedusajs

•

Eコマースソリューション

Builds custom UI extensions, widgets, and administrative pages for the Medusa e-commerce dashboard using best-practice design patterns.

概要

This skill provides Claude with the specialized knowledge required to extend the Medusa Admin dashboard efficiently. It includes critical patterns for data loading, such as separating display queries from modal queries to prevent UI breakage, and enforces the use of the Medusa UI design system for visual consistency. Whether you are building custom widgets for product pages, creating entirely new administrative routes, or implementing complex data tables, this skill ensures adherence to Medusa’s SDK requirements and professional styling conventions.

主な機能

58 GitHub stars
Configures SDK client and handles peer dependencies for pnpm environments
Enforces critical data-loading patterns to prevent empty states on refresh
Applies Medusa UI design system components and semantic styling
Implements widgets and custom UI routes using the Medusa Admin SDK
Provides standardized patterns for forms, drawers, and focus modals

ユースケース

Developing complex data tables for managing bulk operations within the Medusa dashboard
Building administrative forms for custom entities with proper validation and loading states
Creating custom 'Related Products' or 'Analytics' widgets for product detail pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add medusajs/medusa-claude-plugins building-admin-dashboard-customizations

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要