skills.rest
yaelbro
yaelbroCOMMUNITY
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 Apr 9, 2026
Search Tags:#react#widget#wix#custom element#web component#settings panel#wix cli
One-click install
npx skills add https://github.com/yaelbro/Shelf-Control --skill wix-cli-site-widget-yaelbro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-widget
Source: https://github.com/yaelbro/Shelf-Control/tree/main/.agents/skills/wix-cli-site-widget
Command: npx skills add https://github.com/yaelbro/Shelf-Control --skill wix-cli-site-widget-yaelbro

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 props 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: Registers widgets with extensions.customElement() including UUID generation and main extensions.ts updates. - Use Case: A developer asks for a countdown timer widget; the Skill produces widget.tsx, panel.tsx with date/time/color/font pickers, and the extension registration so it appears in the Wix Editor. ## Quick Start Create a Wix site widget that displays a countdown timer with configurable title, 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 converted with reactToWebComponent, a panel.tsx settings panel using @wix/design-system, and an extensions.ts file calling extensions.customElement() with a unique UUID. Then register the extension in src/extensions.ts so it appears in the Wix Editor.

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

Wrap Wix Design System components in WixDesignSystemProvider, SidePanel, and SidePanel.Content. Load values with widget.getProp() and save changes with widget.setProp() using kebab-case prop names, updating local React state in each onChange handler.

Why does my Wix widget fail when fetching data in the editor?▼

The Wix Data API cannot run inside the Wix Editor environment. Check await wixWindow.viewMode() from @wix/site-window, and if it returns 'Editor', render a placeholder instead of querying the collection.

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

Use inputs.selectColor(value, { onChange }) from @wix/editor triggered by a FillPreview component from @wix/design-system. Do not use <Input type="color">, since it opens a basic browser picker instead of the native Wix color picker.

What naming convention do Wix widget props use?▼

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

Related Skills

Explore More Software Engineering Skills→
nirganonnirganon

wix-cli-extension-registration

Registers Wix CLI extensions with the app builder in src/extensions.ts.

Community
Basic
nirganonnirganon

wix-cli-orchestrator

Orchestrates Wix CLI extension selection, implementation sub-agents, and validation workflows.

Community
Advanced
biggorabiggora
1

wix-ecommerce

Design and implement Wix eCommerce apps, extensions, widgets, and Blocks.

Community
Intermediate
bex-cobex-co
275

routine-shipped-feature-inliner

Removes stale feature flags and inlines their permanently enabled code paths.

Official
Advanced