wix-cli-site-plugin

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

Updated Mar 20, 2026
One-click install
npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wix-cli-site-plugin-thisisjaymehta
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wix-cli-site-plugin
Source: https://github.com/thisisjaymehta/login-with-email-test/tree/main/.agents/skills/wix-cli-site-plugin
Command: npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wix-cli-site-plugin-thisisjaymehta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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 like kebab-case attributes, UUID generation, and slot placement IDs that are easy to get wrong. ## Core Features & Use Cases - Three-File Plugin Scaffolding: Generates the HTMLElement plugin component, WDS-based settings panel, and extension registration file with correct naming and structure. - Slot Placement Guidance: Provides app definition IDs, widget IDs, and slot IDs for Wix Stores, eCommerce checkout, Bookings, Events, and Blog pages. - Editor Integration Patterns: Covers widget.getProp/setProp bindings, native color and font pickers via @wix/editor, and editor sandboxing workarounds for storage APIs. - Use Case: A developer wants to add a customizable "Best Seller" badge to Wix Stores product pages; this Skill produces the component, settings panel with color pickers, and extension config targeting both old and new Stores versions. ## Quick Start Create a Wix site plugin named best-seller-badge for the product page details slot with a text setting and background color picker.

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: an HTMLElement component with observedAttributes, a WDS settings panel using widget.getProp/setProp, and an extension file with extensions.sitePlugin() targeting the product page slot IDs. Then register it in src/extensions.ts.

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.

Can I use localStorage inside a Wix site plugin?

Site plugins are sandboxed in the editor, so localStorage, sessionStorage, cookies, IndexedDB, and Cache API are restricted there. Check wixWindow.viewMode() from @wix/site-window and only access storage when the mode is 'Site'.

Why is my Wix site plugin not showing in the plugin explorer?

The plugin must be registered in two places: its own .extension.ts file with a unique static UUID, and the main src/extensions.ts file. Missing the second registration step prevents the plugin from appearing in the plugin explorer.

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

No. Site plugins import SDK modules like @wix/data, @wix/ecom, and @wix/stores directly and call their methods without createClient(). The Wix runtime provides the client context automatically.