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

wix-cli-site-component

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

Updated Feb 21, 2026
Search Tags:#typescript#react#css#wix#wix cli#site component#editor manifest
One-click install
npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-site-component-esssowhat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-component
Source: https://github.com/ESSSoWhat/live-translate-realtime-dubbing/tree/main/wix-app/np/.agents/skills/wix-cli-site-component
Command: npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-site-component-esssowhat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/astro, and 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 types, and props must stay perfectly synchronized with the Wix Editor contract. This Skill encodes that contract so components integrate correctly with the visual editor on the first attempt. ## 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: Generates functional components with sub-component patterns, element removal state handling, and strict TypeScript typing. - Editor-Safe CSS: Enforces responsive styling without media queries, CSS variables for dynamic values, and selector synchronization across all files. - Use Case: A developer asks for a product card with image, title, price, and buy button; the Skill outputs the manifest, React component, CSS, types, and extension registration wired 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: a manifest.json defining the editor contract, a React component.tsx, a style.css with matching selectors, and types.ts. Then register the component in an extensions.ts file using extensions.siteComponent from @wix/astro/builders.

What data types does the Wix component manifest support?▼

The manifest supports text, textEnum, number, booleanValue, link, image, video, vectorArt, richText, webUrl, localDate, localTime, direction, a11y, arrayItems, and menuItems. Each data item maps to a runtime value such as string, number, or a structured object like { href, target, rel } for links.

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 exporting extensions.siteComponent with a unique UUID, and the main src/extensions.ts app registration file. Missing the second 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 does my Wix component styling not update from the editor?▼

Editor styling fails when CSS selectors do not exactly match the manifest selector and React className, or when display is set directly instead of via a --display CSS variable. All three files must use identical class names, and the root must use display: var(--display).

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
wixwix
25

wix-cli-site-plugin

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

Official
Advanced
alinaqialinaqi
705

typescript

Enforces TypeScript strict mode with ESLint, Jest testing, and CI quality gates.

Community
Intermediate
nirganonnirganon

wix-cli-site-widget

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

Community
Advanced