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

wix-cli-site-widget

Creates React-based custom element widgets with settings panels for Wix CLI applications.

Updated Mar 30, 2026
Search Tags:#react#widget#wix#custom element#web component#settings panel#wix cli
One-click install
npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-site-widget-nirganon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-widget
Source: https://github.com/nirganon/nir-beauty/tree/main/.agents/skills/wix-cli-site-widget
Command: npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-site-widget-nirganon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, react-to-webcomponent, @wix/design-system, @wix/editor, @wix/data, @wix/site-window, @wix/astro, and includes references (resource) components.

What problem does it solve? Building interactive, configurable widgets for Wix sites requires coordinating React components, web component conversion, editor settings panels, and extension registration, which involves many error-prone conventions. ## Core Features & Use Cases - Widget Component Generation: Creates React components converted to web components via react-to-webcomponent with proper camelCase prop mapping and inline styles. - Settings Panel Construction: Builds Wix Editor settings panels using Wix Design System components, widget.getProp/setProp APIs, and native color and font pickers. - Extension Registration: Generates extensions.ts files with unique UUIDs and guides registration in the main src/extensions.ts file. - Use Case: A developer asks for a countdown timer widget; the Skill produces the widget component, a settings panel with date, time, color, and font pickers, and the required extension registration. ## Quick Start Ask the assistant to create a Wix site widget such as a countdown timer with configurable colors and fonts.

Frequently Asked Questions about wix-cli-site-widget

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

FAQPage Schema
How do I create a custom element widget for a Wix site?▼

Create a widget.tsx React component, convert it with reactToWebComponent, add a panel.tsx settings panel, and register both in an extensions.ts file using extensions.customElement() with a unique UUID. Then import the extension in src/extensions.ts.

How do I build a settings panel for a Wix widget?▼

Use Wix Design System components wrapped in WixDesignSystemProvider and SidePanel, and manage properties with widget.getProp and widget.setProp from @wix/editor. Update both local React state and the widget prop in every onChange handler.

Why does my Wix widget prop naming differ between files?▼

Props use camelCase in the widget.tsx Props interface and reactToWebComponent config, but kebab-case in widget.getProp and widget.setProp calls in panel.tsx. The web component automatically converts between the two conventions.

Can I use Wix Data API inside a site widget?▼

Yes, but you must check the view mode with wixWindow.viewMode() from @wix/site-window first. In Editor mode, render a placeholder instead of fetching data; only query collections on the live site.

How do I add a color picker to a Wix widget settings panel?▼

Use inputs.selectColor() from @wix/editor with the FillPreview component from @wix/design-system, following the callback pattern inputs.selectColor(value, { onChange }). Do not use a basic HTML input of type color.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-site-widget

Build Wix site widgets as web components with React and extension registration.

Official
Advanced
wixwix
25

wix-cli-embedded-script

Automate embedded script integration into Wix CLI apps with dashboard configuration.

Official
Advanced
mahg-esmahg-es
3

agent-topology

Assemble optimal execution teams from requirements, capabilities, and constraints.

Official
Advanced
juspayjuspay

code-police

Review code changes in three passes for quality, simplicity, and correctness.

Official
Intermediate