Skip to main content
affpapa.org
RU EN
skill CX Codex

building-admin-dashboard-customizations — Claude Code skill

Guides AI agents in building Medusa Admin dashboard extensions, widgets, and custom UI routes. Essential when customizing store management panels.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a claude-code
Open on GitHub

What building-admin-dashboard-customizations does

This skill provides architecture patterns for extending the Medusa Admin interface. It covers creating UI widgets for orders and products, custom management pages, and modal flows. The instructions require using the official Medusa JS SDK for every request, because standard fetch calls strip session authentication headers.

Reference files in references/ supply component details for forms, tables, and typography. If you run pnpm, you must manually install matching versions of @tanstack/react-query and react-router-dom before writing UI code. Medusa stores currency amounts directly as standard decimals rather than cents, so dividing prices by 100 corrupts your dashboard data. Catching this early saves hours of debugging catalog pricing.

What it helps with

  • Build custom widgets for Medusa order and product detail views
  • Configure admin data queries with cache invalidation
  • Create modal workflows using FocusModal and Drawer components
  • Set up tables with search filters for large datasets

Example prompts for the agent

  • Build an admin widget that displays custom metadata on the order details page
  • Create a custom admin UI route with a paginated product table
  • Add a Drawer form to edit customer tags using the Medusa JS SDK

How to install building-admin-dashboard-customizations

1Skills CLI (Vercel)

npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a claude-code

2Manually: put the files in place

~/.claude/skills/building-admin-dashboard-customizations/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/building-admin-dashboard-customizations/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about building-admin-dashboard-customizations

How to install building-admin-dashboard-customizations in Claude Code?

Run npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a claude-code.

What does the building-admin-dashboard-customizations skill do?

It teaches the agent how to build Medusa Admin UI extensions, enforcing component standards from @medusajs/ui and correct SDK query patterns.

Why do pnpm users need manual peer dependency installs?

Because pnpm isolates transitive dependencies strictly, @tanstack/react-query and react-router-dom must be added directly matching the dashboard package version. Projects on npm or yarn do not need this extra step.

Similar skills

Everything for Frontend and UI →
admin-dashboard curiositech Extends an admin dashboard, developer portal and operations console with new tabs, metrics, monitoring and user management. CX Codex +1 323installs react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. CX Codex +1 5,500installs syncfusion-react-dashboard-layout Syncfusion Inc A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 703installs building-components vercel Guidance for accessible UI components, composable APIs, design tokens, documentation, and package distribution. CX Codex +1 14,700installs ui-craft-dense-dashboard educlopez Locks an agent into a data-first style for admin panels and analytics views: tight grid, mono numbers, semantic colors. Useful when the UI is built for an operator, not a landing page. CX Codex +1 1,200installs shopify-polaris-admin-extensions Shopify A skill for Shopify admin UI extensions in Claude Code. It ships marked deprecated: instead of guidance it hands your agent a note to uninstall itself and add shopify. CX Codex +1 9,700installs

From the same set11

building-with-medusa Defines architecture standards and guardrails for Medusa backend development. Useful when designing custom modules, API routes, or multi-step workflows. CX Codex +1 4,600installs storefront-best-practices This skill guides storefront work, from product pages and carts to checkout flows. Use it when building or changing an online store interface. CX Codex +1 4,600installs building-storefronts A skill for building Medusa storefronts: it tells the agent how to call APIs through the SDK and React Query without breaking requests. CX Codex +1 4,200installs db-generate Generates database migrations for a Medusa module and tells you what to run next. CX Codex +1 3,400installs learning-medusa An interactive tutoring skill that guides you through Medusa architecture step by step with hands-on checkpoints. CX Codex +1 3,400installs using-medusa-cloud A skill that teaches an agent to run Medusa Cloud through the mcloud CLI: deploys, failed builds, environments, variables. Useful for CI/CD work. CX Codex +1 1,400installs mcloud-organizations This skill lets your agent run mcloud organizations commands: list Cloud organizations, resolve an ID by name, pull subscription and member details. CX Codex +1 1,300installs mcloud-logs A skill that teaches your agent to read backend and storefront logs with mcloud logs, filter them by time or deployment, and pipe them to JSON. CX Codex +1 1,300installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor