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

wix-cli-site-component

Creates React site components with editor manifests for Wix CLI applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building custom components for Wix sites requires coordinating four tightly coupled files (manifest.json, component.tsx, style.css, types.ts) whose selectors, data keys, and props must stay perfectly synchronized with the Wix Editor contract. This Skill generates all of them correctly so site owners can visually customize content, styling, and behavior in the Wix Editor. ## Core Features & Use Cases - Manifest Generation: Produces editor manifests with installation settings, cssProperties, data APIs, nested elements, and behaviors following Wix schema rules. - React Component Architecture: Builds sub-component patterns with elementProps spreading, elementsRemovalState conditional rendering, and strict TypeScript typing. - Editor-Safe CSS: Enforces selector synchronization, CSS variables for dynamic styling, container-based responsiveness without media queries, and pointer-events rules. - Extension Registration: Creates the component-specific extensions.ts file with UUID and platform type naming, then registers it in the main extensions file. - Use Case: Ask for a product card with image, title, price, and buy button, and receive a complete component folder with manifest, React code, CSS, and types ready for the Wix Editor. ## Quick Start Create a Wix site component for a hero section with a background image, headline, subtitle, and CTA button.

Frequently Asked Questions about wix-cli-site-component

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

FAQPage Schema
How do I create a custom site component for the Wix Editor?▼

Create four files in src/extensions/site/components: manifest.json defining the editor contract, component.tsx with the React implementation, style.css with synchronized selectors, and types.ts with TypeScript definitions. Then register the component in an extensions.ts file with a unique UUID.

What data types can a Wix editor manifest expose?▼

The manifest supports text, textEnum, number, booleanValue, link, image, video, vectorArt, richText, webUrl, localDate, localTime, direction, a11y, arrayItems, and menuItems. Content data belongs in element-level data, while component-wide configuration goes in editorElement.data.

Why is my Wix site component not appearing in the editor?▼

The component must be registered in two places: a component-specific extensions.ts file using extensions.siteComponent with a unique static UUID, and the main src/extensions.ts file. Missing the second registration step prevents the component from appearing in the Wix Editor.

Can I use media queries in Wix site component CSS?▼

No, media queries are forbidden except for prefers-reduced-motion. Components must achieve responsiveness through flexbox, CSS grid, clamp() for fluid typography, and container-relative sizing since they live in user-resizable containers between 300 and 1200 pixels.

Why do my Wix editor styles not apply to component elements?▼

This happens when CSS selectors do not exactly match the manifest selector and React className. All three must be identical single-class selectors, and every manifest element needs pointer-events set to auto in the CSS.

Can I use @wix/design-system in Wix CLI site components?▼

No, @wix/design-system and @wix/wix-ui-icons-common are not available in site components. Use plain HTML and CSS or custom sub-components instead, and never add external dependencies to the component.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-app-validation

Automate dependency installation, TypeScript compilation, build, and preview for Wix CLI apps.

Official
Advanced
wixwix
25

wix-cli-site-plugin

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

Official
Advanced
biggorabiggora
1

wix-ecommerce

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

Community
Intermediate
northclocknorthclock
3

ayjnt-compile

Bundle ayjnt agent applications with the workerd runtime into standalone executables.

Official
Advanced