skills.rest
NagyVikt
NagyViktCOMMUNITY
Explore all skills by this author →
Website𝕏@NagyViktordpGitHub

building-admin-dashboard-customizations

Standardize Medusa Admin UI extensions with SDK-based data fetching and design system compliance.

2|Updated Mar 29, 2026
Search Tags:#ui#react#sdk#dashboard#widgets#admin#medusa
One-click install
npx skills add https://github.com/NagyVikt/codex-plugins --skill building-admin-dashboard-customizations-nagyvikt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-admin-dashboard-customizations
Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/medusa/skills/building-admin-dashboard-customizations
Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill building-admin-dashboard-customizations-nagyvikt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @medusajs/js-sdk, @medusajs/ui, @tanstack/react-query, react-router-dom, and includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of extending the Medusa Admin dashboard by providing standardized patterns for UI widgets, custom routes, and data handling that ensure consistency and prevent common integration errors.

Core Features & Use Cases

  • Custom UI Development: Provides design system rules and component patterns for building widgets and custom admin pages.
  • Data Loading Patterns: Enforces the use of the Medusa JS SDK and separate query patterns to ensure data integrity and proper loading states.
  • Use Case: When building a custom widget to display related products on the product details page, this skill ensures you use the correct SDK methods, handle loading states, and implement proper cache invalidation.

Quick Start

Load the building-admin-dashboard-customizations skill to begin planning and implementing your custom admin UI components using the Medusa SDK.

Frequently Asked Questions about building-admin-dashboard-customizations

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

FAQPage Schema
How do I build a custom widget in the Medusa Admin dashboard?▼

To build a custom Medusa Admin widget, you use the Medusa UI design system components and fetch data via the Medusa JS SDK. This ensures type safety, proper loading states, and consistent UI/UX patterns within your dashboard extension.

What is the best way to fetch data in Medusa Admin custom routes?▼

The best way to fetch data in Medusa Admin custom routes is by using the Medusa JS SDK combined with TanStack React Query. This pattern ensures data integrity, handles loading states properly, and enables precise cache invalidation for your admin UI extensions.

How do I manage cache invalidation when extending the Medusa Admin UI?▼

Cache invalidation for Medusa Admin UI extensions is managed through TanStack React Query patterns. When building custom widgets and routes, you enforce proper cache invalidation and state management using the Medusa JS SDK to keep dashboard data accurate.

Do I need React Router for Medusa Admin dashboard customizations?▼

Yes, React Router DOM is required for Medusa Admin dashboard customizations. It handles navigation for custom routes within your admin extension, working alongside the Medusa JS SDK and UI components to maintain application state and authentication.

Can I use custom UI components instead of the Medusa UI design system for admin extensions?▼

While technically possible, bypassing the Medusa UI design system for admin extensions is discouraged. Standardizing on Medusa UI components ensures design system compliance, consistent UI/UX patterns, and prevents common integration errors within the Medusa ecosystem.

Why does my Medusa Admin widget lose authentication state?▼

Authentication state loss in Medusa Admin widgets often stems from incorrect SDK usage or bypassing standardized data loading patterns. Using the Medusa JS SDK with separate query patterns ensures technical requirements for authentication and type safety are properly satisfied.

Related Skills

Explore More Software Engineering Skills→
KaranKathur06KaranKathur06

building-admin-dashboard-customizations

Guide Medusa Admin dashboard customizations with TanStack Query data-loading patterns.

Community
Intermediate
medusajsmedusajs
208

building-admin-dashboard-customizations

Guide Medusa Admin dashboard UI planning with component and data-loading patterns.

Official
Basic
quanngynxquanngynx

react-2026

Map React project requirements to framework, build tool, routing, and state management choices.

Community
Intermediate
afterworkafterwork

building-storefronts

Plan and develop Medusa storefront features using the Medusa SDK and React Query.

Official
Advanced