building-admin-dashboard-customizations
starsforks
How to install building-admin-dashboard-customizations?
medusajs/medusa-agent-skills/building-admin-dashboard-customizations
$npx -y skills add medusajs/medusa-agent-skills --skill building-admin-dashboard-customizationsLoad automatically when planning, researching, or implementing Medusa Admin dashboard UI (widgets, custom pages, forms, tables, data loading, navigation). REQUIRED for all admin UI work in ALL modes (planning, implementation, exploration). Contains design patterns, component usag
SKILL.md
| 1 | # Medusa Admin Dashboard Customizations |
| 2 | |
| 3 | Build custom UI extensions for the Medusa Admin dashboard using the Admin SDK and Medusa UI components. |
| 4 | |
| 5 | **Note:** "UI Routes" are custom admin pages, different from backend API routes (which use building-with-medusa skill). |
| 6 | |
| 7 | ## When to Apply |
| 8 | |
| 9 | **Load this skill for ANY admin UI development task, including:** |
| 10 | - Creating widgets for product/order/customer pages |
| 11 | - Building custom admin pages |
| 12 | - Implementing forms and modals |
| 13 | - Displaying data with tables or lists |
| 14 | - Adding navigation between pages |
| 15 | |
| 16 | **Also load these skills when:** |
| 17 | - **building-with-medusa:** Building backend API routes that the admin UI calls |
| 18 | - **building-storefronts:** If working on storefront instead of admin dashboard |
| 19 | |
| 20 | ## CRITICAL: Load Reference Files When Needed |
| 21 | |
| 22 | **The quick reference below is NOT sufficient for implementation.** You MUST load relevant reference files before writing code for that component. |
| 23 | |
| 24 | **Load these references based on what you're implementing:** |
| 25 | |
| 26 | - **Creating widgets?** → MUST load `references/data-loading.md` first |
| 27 | - **Building forms/modals?** → MUST load `references/forms.md` first |
| 28 | - **Displaying data in tables/lists?** → MUST load `references/display-patterns.md` first |
| 29 | - **Selecting from large datasets?** → MUST load `references/table-selection.md` first |
| 30 | - **Adding navigation?** → MUST load `references/navigation.md` first |
| 31 | - **Styling components?** → MUST load `references/typography.md` first |
| 32 | |
| 33 | **Minimum requirement:** Load at least 1-2 reference files relevant to your specific task before implementing. |
| 34 | |
| 35 | ## When to Use This Skill vs MedusaDocs MCP Server |
| 36 | |
| 37 | **⚠️ CRITICAL: This skill should be consulted FIRST for planning and implementation.** |
| 38 | |
| 39 | **Use this skill for (PRIMARY SOURCE):** |
| 40 | - **Planning** - Understanding how to structure admin UI features |
| 41 | - **Component patterns** - Widgets, pages, forms, tables, modals |
| 42 | - **Design system** - Typography, colors, spacing, semantic classes |
| 43 | - **Data loading** - Critical separate query pattern, cache invalidation |
| 44 | - **Best practices** - Correct vs incorrect patterns (e.g., display queries on mount) |
| 45 | - **Critical rules** - What NOT to do (common mistakes like conditional display queries) |
| 46 | |
| 47 | **Use MedusaDocs MCP server for (SECONDARY SOURCE):** |
| 48 | - Specific component prop signatures after you know which component to use |
| 49 | - Available widget zones list |
| 50 | - JS SDK method details |
| 51 | - Configuration options reference |
| 52 | |
| 53 | **Why skills come first:** |
| 54 | - Skills contain critical patterns like separate display/modal queries that MCP doesn't emphasize |
| 55 | - Skills show correct vs incorrect patterns; MCP shows what's possible |
| 56 | - Planning requires understanding patterns, not just API reference |
| 57 | |
| 58 | ## Critical Setup Rules |
| 59 | |
| 60 | ### SDK Client Configuration |
| 61 | |
| 62 | **CRITICAL:** Always use exact configuration - different values cause errors: |
| 63 | |
| 64 | ```tsx |
| 65 | // src/admin/lib/client.ts |
| 66 | import Medusa from "@medusajs/js-sdk" |
| 67 | |
| 68 | export const sdk = new Medusa({ |
| 69 | baseUrl: import.meta.env.VITE_BACKEND_URL || "/", |
| 70 | debug: import.meta.env.DEV, |
| 71 | auth: { |
| 72 | type: "session", |
| 73 | }, |
| 74 | }) |
| 75 | ``` |
| 76 | |
| 77 | ### pnpm Users ONLY |
| 78 | |
| 79 | **CRITICAL:** Install peer dependencies BEFORE writing any code: |
| 80 | |
| 81 | ```bash |
| 82 | # Find exact version from dashboard |
| 83 | pnpm list @tanstack/react-query --depth=10 | grep @medusajs/dashboard |
| 84 | # Install that exact version |
| 85 | pnpm add @tanstack/react-query@[exact-version] |
| 86 | |
| 87 | # If using navigation (Link component) |
| 88 | pnpm list react-router-dom --depth=10 | grep @medusajs/dashboard |
| 89 | pnpm add react-router-dom@[exact-version] |
| 90 | ``` |
| 91 | |
| 92 | **npm/yarn users:** DO NOT install these packages - already available. |
| 93 | |
| 94 | ## Rule Categories by Priority |
| 95 | |
| 96 | | Priority | Category | Impact | Prefix | |
| 97 | |----------|----------|--------|--------| |
| 98 | | 1 | Data Loading | CRITICAL | `data-` | |
| 99 | | 2 | Design System | CRITICAL | `design-` | |
| 100 | | 3 | Data Display | HIGH (includes CRITICAL price rule) | `display-` | |
| 101 | | 4 | Typography | HIGH | `typo-` | |
| 102 | | 5 | Forms & Modals | MEDIUM | `form-` | |
| 103 | | 6 | Selection Patterns | MEDIUM | `select-` | |
| 104 | |
| 105 | ## Quick Reference |
| 106 | |
| 107 | ### 1. Data Loading (CRITICAL) |
| 108 | |
| 109 | - `data-sdk-always` - **ALWAYS use Medusa JS SDK for ALL API requests** - NEVER use regular fetch() (missing auth headers causes errors) |
| 110 | - `data-sdk-method-choice` - Use existing SDK methods for built-in endpoints (`sdk.admin.product.list()`), use `sdk.client.fetch()` for custom routes |
| 111 | - `data-display-on-mount` - Display queries MUST load on mount (no enabled condition based on UI state) |
| 112 | - `data-separate-queries` - Separate display queries from modal/form queries |
| 113 | - `data-invalidate-display` - Invalidate display queries after mutations, not just modal queries |
| 114 | - `data-loading-states` - Always s |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
