skills.rest
erxes
erxesOFFICIAL
Explore all skills by this author →
Website𝕏@erxesHQGitHub

create-modal

Create React modals in erxes plugins using erxes-ui components.

4.1k|1.3k|Updated Nov 11, 2016
Search Tags:#ui#frontend#react#component#modal#dialog#erxes
One-click install
npx skills add https://github.com/erxes/erxes --skill create-modal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-modal
Source: https://github.com/erxes/erxes/tree/main/.agents/skills/create-modal
Command: npx skills add https://github.com/erxes/erxes --skill create-modal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the repetitive work of creating modals from scratch by enforcing component reuse and pattern consistency across the erxes ecosystem.

Core Features & Use Cases

  • Component Reuse: Leverages existing Dialog/Modal components from erxes-ui
  • Pattern Matching: Enforces consistent spacing, layout, and button behavior
  • Validation & Accessibility: Reuses existing validation patterns and accessibility standards
  • Use Case: A developer needs to add a new confirmation modal for deleting items in the sales plugin, ensuring it matches existing modals in functionality and appearance.

Quick Start

Create a modal named 'DeleteConfirmationModal' in the 'sales' plugin triggered by a button.

Frequently Asked Questions about create-modal

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

FAQPage Schema
How do I build a React modal component without starting from scratch?▼

To build a React modal component efficiently, this Skill automates modal creation by reusing existing erxes-ui Dialog components and established layout patterns. It eliminates repetitive work by enforcing component reuse and preventing custom state management.

How do I ensure dialog spacing and button behavior match existing UI components?▼

To ensure dialog spacing and button behavior match existing UI components, this Skill enforces pattern matching for consistent layout across the erxes ecosystem. It reuses established accessibility standards and validation patterns from existing modal implementations.

Can I use this to add a confirmation modal inside an erxes plugin?▼

Yes, you can use this to add a confirmation modal inside an erxes plugin. The Skill is specifically designed for React-based development within erxes plugins, such as creating a delete confirmation modal in the sales plugin triggered by a button.

What's the best way to maintain consistency when creating multiple modals in a frontend application?▼

The best way to maintain consistency when creating multiple modals is to enforce component reuse and prevent custom state management. This Skill applies established erxes-ui patterns automatically, ensuring uniform spacing, layout, and accessibility across all dialog interfaces.

Do I need custom state management for dialog interfaces using erxes-ui?▼

No, you do not need custom state management for dialog interfaces using erxes-ui. This Skill explicitly prevents custom state management and instead enforces the reuse of existing UI components and established validation patterns for consistent behavior.

Related Skills

Explore More Software Engineering Skills→
erxeserxes
4.1k

module-federation-expose

Manage Module Federation exposes in erxes frontend plugin configuration files.

Official
Advanced
jralphjralph

react-patterns

Implement reusable React components, custom hooks, and performance optimizations.

Community
Basic
luyangliuableluyangliuable

normalize

Normalize features or pages to match an existing design system and UI patterns.

Community
Advanced
mauricioacpmauricioacp
1

vercel-composition-patterns

Apply React composition patterns to build maintainable UI components.

Community
Intermediate