skills.rest
ESSSoWhat
ESSSoWhatCOMMUNITY
Explore all skills by this author →
GitHub

wix-cli-site-plugin

Creates Wix CLI site plugin extensions with custom elements, settings panels, and slot placements.

Updated Feb 21, 2026
Search Tags:#extension#slots#wix#custom element#settings panel#site plugin#wix cli
One-click install
npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-site-plugin-esssowhat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-plugin
Source: https://github.com/ESSSoWhat/live-translate-realtime-dubbing/tree/main/wix-app/np/.agents/skills/wix-cli-site-plugin
Command: npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-site-plugin-esssowhat

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building site plugins for Wix business solutions requires coordinating three separate files (custom element, settings panel, extension registration) with strict conventions around kebab-case attributes, slot IDs, and UUID generation, which is error-prone without guidance. ## Core Features & Use Cases - Three-File Plugin Scaffolding: Generates the plugin component (HTMLElement custom element), settings panel (Wix Design System React), and extension configuration with placements and auto-add behavior. - Slot Placement Guidance: Provides appDefinitionId, widgetId, and slotId references for Wix Stores, eCommerce checkout, side cart, Bookings, Events, and Blog pages. - Editor Integration Patterns: Covers widget.getProp/setProp bindings, native color and font pickers via @wix/editor inputs, and editor sandboxing workarounds for restricted storage APIs. - Use Case: Build a best-seller badge plugin that appears on Wix Stores product pages, with a settings panel letting site owners customize badge text and colors through the Wix Editor sidebar. ## Quick Start Create a Wix site plugin named best-seller-badge that displays a customizable badge on product pages.

Frequently Asked Questions about wix-cli-site-plugin

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

FAQPage Schema
How do I create a site plugin for Wix Stores product pages?▼

Create three files under src/extensions/site/plugins: a custom element extending HTMLElement, a settings panel using @wix/design-system, and an extension file calling extensions.sitePlugin() with the Stores appDefinitionId, widgetId, and slotId. Then register it in src/extensions.ts.

What files are required for a Wix CLI site plugin?▼

A site plugin requires three files: a .tsx plugin component extending HTMLElement with observedAttributes, a .panel.tsx settings panel using Wix Design System components, and a .extension.ts file defining placements, tagName, and a unique static UUID.

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

Use inputs.selectColor() from @wix/editor together with the FillPreview component from @wix/design-system. Do not use a basic HTML input type=color, since the native Wix picker supports theme colors and gradients.

Why is localStorage not working in my Wix site plugin?▼

Site plugins are sandboxed in the Wix Editor, which blocks localStorage, sessionStorage, cookies, IndexedDB, and the Cache API. Check the environment with viewMode() from @wix/site-window and mock storage or skip those APIs in Editor mode.

Can a Wix site plugin appear in multiple slots?▼

Yes, the placements array accepts multiple slot configurations, each with its own appDefinitionId, widgetId, and slotId. The plugin is added to the first available slot in the order defined, and users can move it manually in the editor.

Do I need createClient to use Wix SDK modules in site plugins?▼

No, site plugins import SDK modules like @wix/data or @wix/stores directly and call their methods without createClient(). The Wix runtime provides the client context automatically, and using createClient produces a different API surface.

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-site-plugin

Creates Wix CLI site plugin extensions with custom elements, settings panels, and slot placements.

Community
Advanced
wixwix
25

wix-cli-site-plugin

Create Wix Site Plugins that inject custom elements into UI slots.

Official
Advanced
cucurb-itcucurb-it
2

agw-deep-feature-analysis

Document domain context, scope, and terminology for feature analysis requests.

Official
Intermediate