skills.rest
mercurjs
mercurjsOFFICIAL
Explore all skills by this author →
Website𝕏@mercurjsGitHub

dashboard-page-ui

Create admin and vendor dashboard pages with Mercur routing and localization conventions.

1.7k|421|Updated Apr 23, 2024
Search Tags:#react#routing#navigation#dashboard#ui-components#page-creation#mercur
One-click install
npx skills add https://github.com/mercurjs/mercur --skill dashboard-page-ui-mercurjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-page-ui
Source: https://github.com/mercurjs/mercur/tree/main/templates/basic/.claude/skills/dashboard-page-ui
Command: npx skills add https://github.com/mercurjs/mercur --skill dashboard-page-ui-mercurjs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to efficiently create or modify pages within admin and vendor dashboards, ensuring consistent UI, routing, and internationalization practices.

Core Features & Use Cases

  • Dashboard Page Construction: Provides patterns for list, detail, create, and edit pages following Mercur's conventions.
  • Reusable Components: Uses shared layout components like TwoColumnPage and SingleColumnPage.
  • Operational Workflow: Guides on routing, navigation configuration, and error handling for robust dashboard development.

Quick Start

Use the dashboard-page-ui skill to set up a new detail page with proper routing and actions in the admin dashboard.

Frequently Asked Questions about dashboard-page-ui

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

FAQPage Schema
How do I create a new dashboard page in React with proper routing?▼

Creating a dashboard page in React involves using standardized patterns for list, detail, create, and edit views. This ensures compliant routing, UI consistency, and proper navigation configuration within admin and vendor environments.

What layout components should I use for admin dashboard page creation?▼

For admin dashboard page creation, use reusable shared layout components like TwoColumnPage and SingleColumnPage. These ensure your UI adheres to established dashboard conventions for consistent architecture and seamless integration.

Does this dashboard UI skill support internationalization for vendor pages?▼

Yes, the dashboard UI skill supports internationalization for vendor pages. It provides standardized patterns and best practices to ensure consistent routing, UI components, and localization across both admin and vendor dashboards.

What is the best way to modify an existing React dashboard page?▼

The best way to modify a React dashboard page is to follow Mercur's dashboard conventions, utilizing shared layout components and established routing patterns. This maintains consistent UI, proper navigation, and robust error handling during modifications.

Can I build both list and detail views for a vendor dashboard using these patterns?▼

Yes, you can build both list and detail views for a vendor dashboard using these patterns. The skill provides standardized component usage and routing configurations specifically for creating list, detail, create, and edit pages.

Related Skills

Explore More Software Engineering Skills→
4tikhonov4tikhonov
3

project-init

Initialize a FIRE project by detecting workspace type and generating standards templates.

Community
Basic
AdemKaoAdemKao

react-hook

Implement reusable React hooks with TypeScript templates and export conventions.

Community
Intermediate
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
buisihung11buisihung11

nx-generate

Generate applications and libraries using Nx generators in a monorepo.

Community
Intermediate