skills.rest
amoai-tech
amoai-techCOMMUNITY
Explore all skills by this author →
GitHub

dashboard-page-ui

Create admin and vendor dashboard pages in Mercur using file-based routing and shared UI components.

1|Updated Sep 15, 2026
Search Tags:#react#routing#dashboard#i18n#admin ui#medusa#mercur
One-click install
npx skills add https://github.com/amoai-tech/mdeai --skill dashboard-page-ui-amoai-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-page-ui
Source: https://github.com/amoai-tech/mdeai/tree/main/commerce/mercur/.claude/skills/dashboard-page-ui
Command: npx skills add https://github.com/amoai-tech/mdeai --skill dashboard-page-ui-amoai-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building new pages in the Mercur admin or vendor dashboards requires following strict conventions for routing, page composition, i18n, and UI components. This Skill ensures pages are placed in the correct src/routes directory, use the right layout patterns (list, detail, create, edit drawer), and follow dashboard UI rules like StatusBadge usage and sidebar navigation config. ## Core Features & Use Cases - List Pages: Build data tables with _DataTable, SingleColumnPage, pagination, search, filters, and row navigation to detail pages. - Detail Pages: Compose TwoColumnPage layouts with SectionRow, StatusBadge, and ActionMenu for contextual actions. - Create & Edit Flows: Implement RouteFocusModal create pages and RouteDrawer edit panels using the @edit parallel route convention. - Use Case: When adding a new entity management page to the vendor dashboard, use this Skill to scaffold the route file, export the sidebar config, and wire up loading, empty, and error states correctly. ## Quick Start Create a new list page for products in the vendor dashboard with a data table, sidebar navigation entry, and a create button linking to a modal form.

Frequently Asked Questions about dashboard-page-ui

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

FAQPage Schema
How do I add a new page to the Mercur admin dashboard?▼

Create a page.tsx file under apps/admin/src/routes following file-based routing conventions. Export a named config object of type RouteConfig with a label and icon if the page should appear in the sidebar navigation.

Why is my Mercur dashboard page not showing in the sidebar?▼

The page must export a named config of type RouteConfig with label and icon properties. Without this export, the route is reachable by URL but invisible in navigation.

How do I create an edit drawer in a Medusa or Mercur dashboard?▼

Place the edit page at src/routes/<entity>/[id]/@edit/page.tsx using the @ prefix to create a parallel route. The parent detail page must set hasOutlet on TwoColumnPage so the drawer renders as an overlay instead of replacing the page.

Where should route files go in the Mercur dashboard starter?▼

Route files belong under src/routes, not src/pages. The mercurDashboardPlugin only scans src/routes, so files placed in src/pages will not be registered as dashboard routes.

When should I use StatusBadge versus Badge in dashboard detail pages?▼

Use StatusBadge only for entity statuses like published, draft, or active. Use plain text for categories, types, and other descriptive values rather than wrapping them in a Badge component.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

data-client-graphql-setup

Configures GQLEndpoint with authentication and error handling for GraphQL APIs.

Official
Intermediate
SeoJaeWanSeoJaeWan
1

guard-e2e-test

Generate Playwright end-to-end guard tests for multi-route web journeys.

Community
Advanced
mercurjsmercurjs
1.7k

admin-tab-ui

Guide developers in structuring accessible tabbed admin dashboard UIs.

Official
Basic
OZVEOZVE

dashboard-form-ui

Create or modify dashboard forms with react-hook-form and zod validation.

Community
Intermediate