skills.rest
nirganon
nirganonCOMMUNITY
Explore all skills by this author →
GitHub

wix-cli-dashboard-modal

Create and manage popup modal dialogs in Wix dashboard pages using the Dashboard SDK.

Updated Mar 30, 2026
Search Tags:#react#dashboard#modal#popup#dialog#wix#wix-cli
One-click install
npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-dashboard-modal-nirganon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-dashboard-modal
Source: https://github.com/nirganon/nir-beauty/tree/main/.agents/skills/wix-cli-dashboard-modal
Command: npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-dashboard-modal-nirganon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/dashboard, @wix/design-system, @wix/astro.

What problem does it solve? Building popup dialogs in Wix dashboard apps requires coordinating three separate files, unique UUID registration, and correct use of the Dashboard SDK lifecycle methods, which is error-prone without clear guidance. ## Core Features & Use Cases - Modal Creation: Generate the three required files (extensions.ts, component .tsx, config.ts) with proper builder configuration and UUID registration. - Data Passing: Pass parameters into modals via openModal() params and read them inside the modal with observeState(). - Lifecycle Control: Close modals with closeModal(), return data to the opener, and await results via the modalClosed promise. - Use Case: Build an edit-item confirmation dialog that opens from a dashboard page, receives the selected item's data, and returns save results to the parent page. ## Quick Start Create a Wix dashboard modal named 'edit-item' that opens from my dashboard page and receives the selected item's data.

Frequently Asked Questions about wix-cli-dashboard-modal

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

FAQPage Schema
How do I create a modal in a Wix dashboard app?▼

Create three files in src/extensions/dashboard/modals/<folder>/: an extensions.ts builder file with a unique UUID, a React .tsx component for content, and a config.ts for title and dimensions. Then register the modal in src/extensions.ts using .use().

How do I pass data to a Wix dashboard modal?▼

Pass data using the params option in dashboard.openModal(), such as params: { userId: '123' }. Inside the modal, read the data with dashboard.observeState(), which delivers the params through its state callback.

How do I return data when closing a Wix dashboard modal?▼

Call dashboard.closeModal() with a serializable payload, like closeModal({ saved: true }). The opener receives this data by awaiting the modalClosed promise returned by openModal(). Data must be structured-clone compatible.

Why can't my Wix dashboard modal access the params I passed?▼

Params passed via openModal() are not available as React props. You must call dashboard.observeState() inside the modal component and read the values from the state object delivered to its callback.

When should I not use a Wix dashboard modal?▼

Do not use dashboard modals for static content, which belongs on dashboard pages, or for site-facing UI, which requires site widgets or embedded scripts. Modals are only for popup dialogs within the Wix dashboard environment.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-dashboard-page

Scaffold Wix CLI dashboard pages with page.tsx, extensions.ts, and registration wiring.

Official
Advanced
divinaarmueladivinaarmuela

wix-app

Builds and validates Wix CLI app extensions across dashboard, backend, and site surfaces.

Community
Advanced
PeakTaiPeakTai

wok-ui-feedback

Provide unified loading, toast, and dialog feedback APIs for wok-ui apps.

Community
Intermediate
agentconfigagentconfig
7

generate-llms

Generate llms.txt and llms-full.txt files from site data sources.

Official
Intermediate