skills.rest
yaelbro
yaelbroCOMMUNITY
Explore all skills by this author →
GitHub

wix-cli-site-component

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Wix Editor-integrated site components requires coordinating four synchronized files (manifest.json, component.tsx, style.css, types.ts) with strict selector, data, and CSS property alignment, which is error-prone when done manually. ## Core Features & Use Cases - Manifest Generation: Produces editor manifests defining editorElement configuration, CSS properties, data APIs, nested elements, and behaviors for visual customization. - React Component Architecture: Generates functional components with sub-component patterns, element removal state handling, and strict TypeScript typing. - Editor-Compliant CSS: Creates responsive stylesheets using CSS variables, container-based layouts, and selectors synchronized with the manifest. - Use Case: Ask for a product card with image, title, price, and buy button, and receive a complete component folder with manifest, React code, styles, types, and extension registration 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 is a Wix component manifest and what does it contain?▼

The manifest.json defines the contract between your React component and the Wix Editor. It contains the editorElement configuration with selector, displayName, archetype, layout options, cssProperties for styling controls, data for content configuration, and elements for nested editable parts.

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

The component requires two registration steps: a component-specific extensions.ts file exporting the siteComponent with a unique UUID, and registration in the main src/extensions.ts file. Missing either 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 use container-based responsiveness with flexbox, grid, clamp() for fluid typography, and CSS variables, since they live in user-resizable containers between 300-1200px.

What data types are available in the Wix component manifest?▼

Available data types include text, textEnum, number, booleanValue, link, image, video, vectorArt, richText, webUrl, localDate, localTime, arrayItems, menuItems, direction, and a11y. Each maps to specific runtime values like strings, numbers, or structured objects.

Why must CSS selectors match between manifest, React, and CSS files?▼

The Wix Editor applies styling customizations by matching the manifest selector to rendered DOM elements. If the React className, CSS selector, and manifest selector differ, the editor cannot apply user customizations to that element.

Related Skills

Explore More Software Engineering Skills→
ESSSoWhatESSSoWhat

wix-cli-data-collection

Creates CMS data collection schemas for Wix CLI apps using TypeScript extension definitions.

Community
Intermediate
nirganonnirganon

wix-cli-site-plugin

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

Community
Advanced
ESSSoWhatESSSoWhat

wix-cli-app-validation

Validates Wix CLI applications through installation, TypeScript checks, build, and preview deployment.

Community
Intermediate
nirganonnirganon

wix-cli-site-widget

Creates React-based custom element widgets with settings panels for Wix CLI applications.

Community
Advanced