skills.rest
OZVE
OZVECOMMUNITY
Explore all skills by this author →
GitHub

admin-form-ui

Enforce Form.* component patterns in Medusa admin forms.

Updated Apr 3, 2026
Search Tags:#accessibility#react#validation#forms#ui-patterns#medusa#admin-form-ui
One-click install
npx skills add https://github.com/OZVE/cuarta-avenida --skill admin-form-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: admin-form-ui
Source: https://github.com/OZVE/cuarta-avenida/tree/main/.claude/skills/admin-form-ui
Command: npx skills add https://github.com/OZVE/cuarta-avenida --skill admin-form-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Admin UI patterns are inconsistently implemented across forms, leading to poor UX and maintenance burdens.

Core Features & Use Cases

  • Enforces Form.* components usage to ensure accessibility and consistency.
  • Provides guardrails against raw Controller and raw Label usage, ensuring predictable behavior.
  • Use for building admin forms like creating or editing resources, including fields, drawers, and modals, with proper error handling and translations.

Quick Start

Provide a standard admin form quickly by using the Form.Field pattern with Form.Item, Form.Label, Form.Control, and Form.ErrorMessage, and wrap with KeyboundForm for keyboard submit support.

Frequently Asked Questions about admin-form-ui

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

FAQPage Schema
How do I build consistent admin forms in Medusa?▼

To build consistent admin forms in Medusa, use the Form.Field pattern with Form.Item, Form.Label, Form.Control, and Form.ErrorMessage, and wrap everything with KeyboundForm for keyboard submit support to ensure accessibility and predictable behavior across resources.

Why does my Medusa admin form lack accessibility and consistency?▼

Admin forms lack accessibility and consistency when raw Controller or raw Label components are used instead of standardized Form.* components. Enforcing Form.* component usage provides guardrails that ensure predictable behavior, proper error handling, and consistent UI patterns across Medusa dashboards.

Can I use raw Controller components for Medusa dashboard forms?▼

You should not use raw Controller components for Medusa dashboard forms. This Skill provides guardrails against raw Controller and raw Label usage, enforcing Form.* components instead to ensure predictable behavior, proper error handling, and consistent accessibility across admin resources.

What is the best way to handle form validation and errors in Medusa admin?▼

The best way to handle validation and errors in Medusa admin is using Form.ErrorMessage within the Form.Field pattern. This enforces proper error handling and translation integration, ensuring consistent UX across create and edit forms, drawers, and modals in the admin package.

Does this admin form UI pattern work for drawers and modals in Medusa?▼

Yes, the admin form UI pattern works for drawers and modals in Medusa. It applies to creating and editing forms across all resources, ensuring the use of Form.* components, translation, and proper error handling within these UI elements throughout the admin package.

Do I need KeyboundForm for keyboard submit support in Medusa admin?▼

Yes, you need KeyboundForm for keyboard submit support in Medusa admin. Wrapping your form components with KeyboundForm enables keyboard submission, complementing the Form.Field pattern to deliver accessible and consistent admin form behavior across all resources.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
techdiary-devtechdiary-dev
13

new-form

Scaffold React Hook Form components with Zod validation and server mutations.

Official
Intermediate
KaranKathur06KaranKathur06

building-admin-dashboard-customizations

Guide Medusa Admin dashboard customizations with TanStack Query data-loading patterns.

Community
Intermediate
Arnutt-NArnutt-N

Frontend Components

Build reusable Next.js 16 components with Shadcn UI, Server Actions, and React Hook Form.

Community
Advanced