skills.rest
KaranKathur06
KaranKathur06COMMUNITY
Explore all skills by this author →
GitHub

building-admin-dashboard-customizations

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

Updated Feb 22, 2026
Search Tags:#tanstack query#react widgets#ui customization#medusa#admin dashboard#form modals#data loading patterns
One-click install
npx skills add https://github.com/KaranKathur06/Metal-Hub --skill building-admin-dashboard-customizations-karankathur06
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-admin-dashboard-customizations
Source: https://github.com/KaranKathur06/Metal-Hub/tree/main/.cursor/skills/building-admin-dashboard-customizations
Command: npx skills add https://github.com/KaranKathur06/Metal-Hub --skill building-admin-dashboard-customizations-karankathur06

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents broken or inconsistent Medusa Admin dashboard customizations by codifying the correct UI architecture, data-loading responsibilities, and component usage patterns for widgets and custom pages.

Core Features & Use Cases

  • Admin UI implementation guardrails: Defines the required patterns for Medusa Admin dashboard UI development using the Admin SDK and Medusa UI components.
  • Correct TanStack Query data-loading strategy: Separates display queries from modal/form queries, ensures display data loads on mount, and provides cache invalidation guidance after mutations.
  • Consistent design & UI correctness: Enforces semantic styling, typography conventions, and price-display rules (no dividing by 100), plus button sizing and loading-state behavior.
  • UI extension scope: Applies to widgets, forms, modals, tables/lists, data loading, and navigation between admin pages and custom routes.

Quick Start

Load this skill first, then implement your Medusa Admin UI feature by following the data-loading pattern and reference prerequisites for the specific component you are building.

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 load data correctly in Medusa Admin dashboard widgets using TanStack Query?▼

To load data correctly in Medusa Admin widgets, separate display queries from modal or form queries, load display data on component mount, and invalidate display queries after mutations using the Medusa JS SDK for all API requests.

What is the correct pattern for building custom admin routes and forms in Medusa?▼

The correct pattern for custom admin routes involves using Medusa UI components for forms and modals, relying on the Medusa JS SDK for API calls, and applying cache invalidation to display queries after data mutations to maintain UI consistency.

Why does my Medusa Admin UI customization break after form mutations?▼

Medusa Admin UI customizations break when display queries are not invalidated after mutations. You must separate display data loading from form interactions and invalidate the relevant TanStack Query caches to refresh the UI state.

Does the Medusa JS SDK need to be used for all API requests in custom admin dashboard pages?▼

Yes, the Medusa JS SDK must be used for all API requests in custom admin dashboard pages. This ensures correct data loading patterns and seamless integration with TanStack Query for cache invalidation and state management.

What are the UI styling and typography rules for Medusa Admin dashboard customizations?▼

Medusa Admin dashboard customizations require semantic styling, specific typography conventions, and correct price-display rules without dividing by 100. Button sizing and loading-state behaviors must also follow consistent design guidelines.

Can I use TanStack Query for both display data and modal interactions in Medusa widgets?▼

Yes, but you must separate display queries from modal or form interaction queries. Display data should load on mount, while interaction queries handle mutations and trigger display query invalidation upon completion.

Related Skills

Explore More Software Engineering Skills→
NagyViktNagyVikt
2

building-storefronts

Standardize Medusa JS SDK and React Query integration for storefront applications.

Community
Advanced
NagyViktNagyVikt
2

building-admin-dashboard-customizations

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

Community
Advanced
medusajsmedusajs
208

building-admin-dashboard-customizations

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

Official
Basic
afterworkafterwork

building-storefronts

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

Official
Advanced