dashboard-form-ui

Create modal and drawer forms for React admin dashboards with validation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form, zod, @mercurjs/dashboard-shared, @medusajs/ui, and includes scripts (resource) and references (resource) components.

What problem does it solve?

It simplifies the process of creating, editing, and managing forms within admin and vendor dashboards, ensuring uniformity and best practices.

Core Features & Use Cases

  • Standardized Form Patterns: Implements consistent form layout with validation and submission guards.
  • Modular Components: Provides wrappers and components for modal and drawer forms, supporting complex workflows.
  • Use Case: Developers can rapidly build create or edit forms with minimal boilerplate, following the established UI conventions.

Quick Start

Use this skill to set up a create or edit form page following the recommended patterns and structure.

Frequently Asked Questions about dashboard-form-ui

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

FAQPage Schema
How do I build consistent admin dashboard forms with React and validation?

Create dashboard forms using modular wrappers that enforce consistent UI patterns, validation workflows, and submission guards. This approach provides reusable components for modal and drawer-based forms with robust error handling and internationalized labels.

Does this form UI skill work with react-hook-form and zod?

Yes, the form UI components integrate directly with react-hook-form and zod for form state management and schema validation. This combination provides robust error handling and standardized validation workflows within React admin and vendor dashboards.

What's the best way to standardize modal and drawer forms in an admin panel?

Standardize modal and drawer forms by using modular component wrappers that implement consistent layouts and submission guards. This skill enforces uniform UI conventions and best practices across create and edit workflows, ensuring consistent interfaces and internationalized labels.

Can I use Medusa UI components for admin and vendor dashboard form creation?

Yes, dashboard form creation integrates directly with @medusajs/ui components to provide standardized form patterns for admin and vendor interfaces. This combination supports complex workflows while ensuring consistent layout and validation across dashboard pages.

Why do I need a dedicated skill for React dashboard forms instead of building from scratch?

You need a dedicated skill for React dashboard forms to eliminate boilerplate and enforce uniform validation workflows. Building from scratch risks inconsistent UI patterns and error handling, whereas this skill provides reusable modal and drawer wrappers with internationalized labels.