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

admin-page-ui

Guide React admin page design with accessible UI components and patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill enforces standardized page and section UI patterns for admin interfaces, ensuring consistency and accessibility across projects.

Core Features & Use Cases

  • Pattern Enforcement: Guides developers to follow best practices for list, detail, and container pages.
  • Component Guidelines: Provides reusable UI components like ActionMenu, StatusBadge, and NoRecords, reducing UI inconsistencies.
  • Use Case: When building an admin dashboard, developers can refer to this skill to implement page layouts and UI components that meet design standards and accessibility rules.

Quick Start

Use the admin-page-ui skill to standardize a new admin list page by applying predefined layout and controls.

Frequently Asked Questions about admin-page-ui

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

FAQPage Schema
How do I build a React admin dashboard with consistent UI patterns?▼

Build a React admin dashboard by applying standardized page layouts, modular UI components like ActionMenu and StatusBadge, and accessibility rules to ensure enterprise-level UI consistency across list and detail pages.

What are the best practices for accessible admin page layouts?▼

Accessible admin page layouts require consistent section structuring, reusable components like NoRecords for empty states, and adherence to enterprise UI standards to ensure navigability and conformity across projects.

How do I implement a confirmation dialog in an admin list page?▼

Implement a confirmation dialog in an admin list page by using predefined React UI components designed for modular interfaces, ensuring consistent user interactions and accessibility compliance across the dashboard.

Do I need specific dependencies to standardize my admin interface components?▼

Standardizing admin interface components requires no specific external dependencies, as the skill provides self-contained references and assets to guide React implementation for layout and UI conformity.

Can I use these UI patterns for container and detail pages in React?▼

Yes, you can apply these UI patterns to React container and detail pages, utilizing provided component guidelines for status badges and action menus to maintain design consistency across various admin views.

Related Skills

Explore More Software Engineering Skills→
asitawayukiasitawayuki

frontend-patterns

Provide standardized React and Next.js frontend development patterns for component composition and state management.

Community
Advanced
mercurjsmercurjs
1.7k

dashboard-page-ui

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

Official
Advanced
beemanbeeman
12

vercel-react-best-practices

Enforce React and Next.js performance best practices across components and data fetching.

Community
Advanced
AmplifyAutomationAmplifyAutomation
1

webapp-dev:react-components

Generate React components with TypeScript typings and consistent structure patterns.

Official
Advanced