skills.rest
nirganon
nirganonCOMMUNITY
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 Mar 30, 2026
Search Tags:#extension#wix#custom element#settings panel#site plugin#wix cli#slot placement
One-click install
npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-site-plugin-nirganon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-plugin
Source: https://github.com/nirganon/nir-beauty/tree/main/.agents/skills/wix-cli-site-plugin
Command: npx skills add https://github.com/nirganon/nir-beauty --skill wix-cli-site-plugin-nirganon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/design-system, @wix/editor, @wix/astro, @wix/site-window, @wix/data, @wix/ecom, @wix/stores, @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 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 wiring. - 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: Ask for a best-seller badge on Wix Stores product pages and receive the complete plugin component, settings panel with color pickers, and extension config targeting both old and new Stores versions. ## Quick Start Create a Wix site plugin that displays a customizable badge on product pages with text and color settings.

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 calling extensions.sitePlugin() with the Stores appDefinitionId, widgetId, and slotId. 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 the Cache API are restricted there. Check the mode with 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 is the most common cause of the plugin not appearing.

Do Wix checkout plugins support automatic installation?▼

Some checkout and side cart plugins do not support auto-add on installation. In that case you must build a dashboard page that calls dashboard.addSitePlugin() so users can place the plugin into a slot manually.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-site-plugin

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

Official
Advanced
stellar-zkstellar-zk
3

review-edge-case-hunter

Walks every branching path in code or diffs and reports unhandled edge cases as JSON.

Official
Intermediate
PurpleAILABPurpleAILAB
60

economic-attack

Detect economic attack vulnerabilities in Solidity smart contracts.

Official
Advanced
ievo-aiievo-ai

feedback

Collect user feedback and submit it as GitHub issues for the iEvo plugin.

Official
Basic