skills.rest
thisisjaymehta
thisisjaymehtaCOMMUNITY
Explore all skills by this author →
Website𝕏@thisisjaymehtaGitHub

wix-cli-site-component

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

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

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 Scaffolding: Generates TypeScript-strict functional components with sub-component patterns, element removal state handling, and SSR-safe code. - Extension Registration: Creates the component-specific extensions.ts file with UUID generation and PascalCase 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, responsive 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?▼

Manifests support text, textEnum, number, booleanValue, link, image, video, vectorArt, richText, webUrl, localDate, localTime, direction, arrayItems, and menuItems. Content data belongs in element definitions, while component-level data holds only layout and configuration values.

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

The component requires two registration steps: a component-specific extensions.ts file with a unique UUID and platform.PascalCase type, plus registration in the main src/extensions.ts 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. Responsive design must use flexbox, grid, clamp() for fluid typography, and container-relative sizing since components live in user-resizable containers between 300 and 1200 pixels.

Why does my Wix component styling break in the editor?▼

Styling breaks when CSS selectors do not exactly match manifest selectors and React classNames, or when display is set directly on the root instead of via a --display CSS variable. All three files must use identical class names.

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, CSS, and custom sub-components instead, with all user-facing content coming from manifest-driven props.

Related Skills

Explore More Software Engineering Skills→
ESSSoWhatESSSoWhat

wix-cli-site-widget

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

Community
Intermediate
ESSSoWhatESSSoWhat

wix-cli-site-plugin

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

Community
Advanced
jpoutrinjpoutrin
14

typescript-style

Enforce TypeScript/JavaScript coding style and ESLint standards on frontend code.

Community
Basic
yaelbroyaelbro

wix-cli-site-widget

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

Community
Advanced