# building-admin-dashboard-customizations

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4400 installs · ★ 235
- Author: medusajs
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/medusa-dev/skills/building-admin-dashboard-customizations/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/building-admin-dashboard-customizations

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/building-admin-dashboard-customizations/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/building-admin-dashboard-customizations/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/building-admin-dashboard-customizations/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/building-admin-dashboard-customizations/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install medusajs/medusa-agent-skills building-admin-dashboard-customizations
```

2. **Manually: put the files in place**
- File: `.github/skills/building-admin-dashboard-customizations/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/medusajs/medusa-agent-skills --path plugins/medusa-dev/skills/building-admin-dashboard-customizations
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/building-admin-dashboard-customizations/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizations -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/medusajs/medusa-agent-skills/tree/HEAD/plugins/medusa-dev/skills/building-admin-dashboard-customizations/SKILL.md

## When to use it
- 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
- 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

## Similar
- [admin-dashboard](https://affpapa.org/en/nevibecode/skills/admin-dashboard.md) — skill · 323 installs
- [react-vite-dashboard](https://affpapa.org/en/nevibecode/skills/react-vite-dashboard.md) — skill · 5500 installs
- [syncfusion-react-dashboard-layout](https://affpapa.org/en/nevibecode/skills/syncfusion-react-dashboard-layout.md) — skill · 703 installs
- [building-components](https://affpapa.org/en/nevibecode/skills/building-components.md) — skill · 14700 installs
- [ui-craft-dense-dashboard](https://affpapa.org/en/nevibecode/skills/ui-craft-dense-dashboard.md) — skill · 1200 installs
- [shopify-polaris-admin-extensions](https://affpapa.org/en/nevibecode/skills/shopify-shopify-polaris-admin-extensions.md) — skill · 9700 installs

From the same set: [medusajs/medusa-agent-skills](https://affpapa.org/en/nevibecode/by/medusajs/medusa-agent-skills.md) — 12 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md