skills.rest
dnsnamdang
dnsnamdangCOMMUNITY
Explore all skills by this author →
GitHub

Modal Popup

Standardize modal UI structure and styling with Vue.js and V2Base components.

Updated Apr 5, 2026
Search Tags:#UI design#modal#Vue.js#form design#V2Base components
One-click install
npx skills add https://github.com/dnsnamdang/hrm-claude-config --skill modal-popup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Modal Popup
Source: https://github.com/dnsnamdang/hrm-claude-config/tree/main/nhatlinh/.claude/skills/modal-popup
Command: npx skills add https://github.com/dnsnamdang/hrm-claude-config --skill modal-popup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vue, v2base, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill standardizes the UI for all modal/popup elements using V2Base components, ensuring consistency and efficiency in modal creation across the project.

Core Features & Use Cases

  • Consistent Modal Structure: Provides a consistent structure for modals using b-modal with custom footer and header.
  • Header Customization: Allows for custom icons, titles, and close buttons in the modal header.
  • Footer Variants: Offers predefined footer structures for different modal types (add, edit, view, delete confirm).
  • Button Conventions: Ensures buttons follow a uniform style guide for consistency.

Quick Start

Create a new modal with the 'Modal Popup' skill by following the structure and button conventions outlined in the documentation.

Frequently Asked Questions about Modal Popup

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

FAQPage Schema
How do I create consistent modal popups in Vue.js?▼

To create consistent modal popups in Vue.js, use the V2Base component library to standardize modal structures, headers, and footers. This approach ensures UI consistency and accessibility across your project's add, edit, view, and delete confirmation dialogs.

Do I need V2Base to build standardized modals with Vue.js?▼

Yes, you need both Vue.js and the V2Base component library to build standardized modals. V2Base provides the underlying b-modal component required to implement the consistent header customization and predefined footer variants.

What is the best way to structure a modal form footer in Vue.js?▼

The best way to structure a modal form footer in Vue.js is to use predefined V2Base footer variants for different modal types like add, edit, view, and delete. This ensures your action buttons follow a uniform style guide for consistency.

Can I customize the header of a V2Base b-modal component?▼

Yes, you can customize the header of a V2Base b-modal component. The Modal Popup skill allows you to configure custom icons, titles, and close buttons within the modal header to match your project's specific UI requirements.

How does standardizing modal UI design improve a Vue.js project?▼

Standardizing modal UI design improves a Vue.js project by ensuring all popup elements are consistent, accessible, and follow best practices. Utilizing V2Base components streamlines modal creation and enforces a uniform style guide for buttons.

What are the limitations of using V2Base for modal popups?▼

The main limitation of using V2Base for modal popups is its strict dependency on the Vue.js framework and the V2Base component library. Projects not using this specific tech stack cannot implement these standardized modal structures.

Related Skills

Explore More Software Engineering Skills→
chrysaliscatchrysaliscat
1

Frontend Expert

Guide Vue.js 2.x and Element UI development within the RuoYi-Vue framework.

Community
Intermediate
jonaseck2jonaseck2
2

ux-intent-mapping

Map panel and modal surfaces to user-intent Purpose statements and CTA inventories.

Community
Advanced
wonkpentinkwonkpentink

reusable-ui-components

Define reusable React components with TypeScript interfaces and Tailwind styling.

Community
Intermediate
BadTechBanditBadTechBandit
3

popup-cro

Design popup and modal conversion experiences with matched triggers and type-specific copy.

Community
Intermediate