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

admin-ui-review

Validate React admin UI files for pattern, i18n, and semantic correctness.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers verify that their admin UI code follows consistent patterns and standards, reducing errors and improving maintainability.

Core Features & Use Cases

  • Code Quality Checks: Review changes in admin UI code for pattern adherence and best practices.
  • Automated Validation: Identify issues like incorrect component usage, missing i18n, inappropriate heading levels, or lack of test IDs.
  • Use Case: When a developer submits a PR with UI changes, run this Skill to automatically catch deviations from allowed patterns and ensure your UI remains consistent.

Quick Start

Use the admin-ui-review skill to analyze a modified UI component file in the packages/admin/src/ directory and receive detailed feedback on pattern compliance.

Frequently Asked Questions about admin-ui-review

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

FAQPage Schema
How do I validate React admin UI components for accessibility and pattern correctness?▼

You can validate React admin UI components by running automated checks for semantic structure, heading levels, and test IDs to ensure code adheres to established UI patterns and accessibility standards.

What is the best way to check i18n consistency in Medusajs admin UI code?▼

Checking i18n consistency involves scanning modified UI component files to identify missing internationalization keys and ensure translations are properly implemented across the Medusajs admin interface.

How do I review UI code in a pull request for incorrect component usage?▼

Reviewing UI code in a pull request involves analyzing modified files to detect deviations from allowed patterns, incorrect component usage, and missing test setups before merging changes.

Can I use automated validation to catch missing test IDs in React admin files?▼

Yes, automated validation can analyze modified React admin files to detect missing test IDs, inappropriate heading levels, and incomplete testing setups to maintain high-quality UI code.

Does this admin UI review process work with any React project or only Medusajs?▼

This admin UI review process is specifically designed for React projects using Medusajs UI components to validate pattern correctness, i18n consistency, and semantic structure.

Why does my admin UI code fail pattern adherence checks after adding new components?▼

Admin UI code fails pattern adherence checks when new components deviate from established standards, such as using incorrect component structures, missing i18n implementations, or lacking proper test IDs.

Related Skills

Explore More Software Engineering Skills→
amo-tech-aiamo-tech-ai
2

dashboard-form-ui

Create and edit Mercur dashboard forms with React and react-hook-form validation.

Community
Intermediate
ReinaMacCredyReinaMacCredy

land

Automates Pull Request landing with conflict resolution, CI checks, and squash-merge via GitHub CLI.

Community
Advanced
peopledearpeopledear
1

Frontend Components

Enforce frontend component coding standards in Claude Code workflows.

Official
Basic
amo-tech-aiamo-tech-ai
2

medusa-ui-conformance

Monitor and enforce UI consistency in Medusa admin and vendor interfaces.

Community
Intermediate