/wix-app

Wix Editor React Component Builder

Build Editor React Components for Harmony/Studio2 Wix CLI apps only. First determine create vs edit; for edits, inspect the existing component.

File Contract

Keep the Wix CLI scaffold and file roles:

Supplementary files are allowed; keep scaffold roles intact.

Workflow

1. Scaffold only when creating. Run in the Wix app (wix.config.json). Check the current directory, then this workspace; never search the OS:

   npx wix generate --params '{"extensionType":"EDITOR_REACT_COMPONENT","name":"ComponentName","folder":"component-name","description":"A meaningful description of component's intent and functionality"}'

   Never rerun the scaffold for an existing component. Write a meaningful description in 1-2 plain sentences (max 300 chars): what the user sees, when to use it, and capabilities that affect that choice. Don't repeat the component name or add implementation details.

2. Run the dependency preflight. Check required packages:

   deps=(@wix/react-component-schema @wix/react-component-utils @wix/editor-react-types)
   dev=(@babel/parser @babel/traverse @babel/types eslint eslint-plugin-jsx-a11y @typescript-eslint/parser 'typescript@<7' @types/eslint-plugin-jsx-a11y jsdom axe-core)
   
   node - "${deps[@]}" "${dev[@]}" <<'JS' || {
   const fs = require('fs'), path = require('path');
   const missing = process.argv.slice(2)
     .map(p => p.replace(/@<7$/, ''))
     .filter(p => !require.resolve.paths(p)?.some(d => fs.existsSync(path.join(d, p, 'package.json'))));
   if (missing.length) {
     console.error(`Missing dependencies: ${missing.join(', ')}`);
     process.exit(1);
   }
   JS
     d="$PWD"
     while [[ "$d" != / && ! -f "$d/yarn.lock" ]]; do d="$(dirname "$d")"; done
     if [[ -f "$d/yarn.lock" ]]; then install=(yarn add); else install=(npm install); fi
     "${install[@]}" "${deps[@]}" && "${install[@]}" -D "${dev[@]}"
   }

3. Plan. Identify props, root, parts, and states; read routed references. Use the scaffold and references before package declarations; probe an API only when undocumented or a typecheck fails.

4. Implement. Keep props, logic, and styles in their scaffolded editable files. Format edited source files with the app's configured formatter before checking formatting. Never edit or format *.generated.ts.

5. Run the accessibility review. Once the JSX is complete, run from the same folder (<SKILL_ROOT> is the directory containing the active SKILL.md):

   node <SKILL_ROOT>/scripts/scan-a11y-review.cjs src/extensions/site/components/<component-name>

   Follow editor-react-component/ACCESSIBILITY.md; fix and rerun at most twice, then report remaining findings.

6. Configure the editor extension. For creation or a requested sizing, installation, or manifest change, apply editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md to the extension; otherwise leave it unchanged. Synchronize preview requiredDataFields and rootClassName.

7. Generate and validate. Batch implementation edits, then build and generate the manifest once:

   npx wix build && npx wix generate manifest

   Run npx tsc --noEmit, relevant tests/lint, and the accessibility review. If later edits affect a check, rerun that check. Inspect the manifest when generated; never hand-repair it. Diagnose failures with editor-react-component/MANIFEST-ERRORS.md.

   For creation/layout changes, complete the routed overflow resize review.

8. Report. Summarize files, checks, blockers, and checks that could not run.

Reference Policy

Read only matched references. Preserve unrelated behavior. SKILL.md routes; references are leaves.

Required References

Optional References

Non-Negotiables

• React 18 only; do not assume React 19 runtime features.
• Include typed id, className, direction, and a11y support.
• Elected root: dir={direction}, fallback-direction class, logical CSS for direction-sensitive layout.
• Deterministic render; no browser globals during render.
• Explicit foreground colors need a known contrasting background; transparent roots inherit from the host.
• Baseline Widely Available CSS/DOM only, or supported fallbacks.
• Accessibility per part, per ACCESSIBILITY.md: read only a11y.ariaLabel, and only for a control without a visible name; never spread the a11y object or add one-off ARIA props.
• Named parts: global class, module class, and elementProps (root uses top-level props).
• Native design states: pair selectors with injected modifiers; keep non-input :focus-visible standalone unless editable focus is requested; toggle custom state classes from data, each with a matching :global() rule.
• Open/collapse components: expose a props-only isOpen: ElementState<boolean> root state and sync internal state from it.
• Single-visible-body arrays: name per item, ActiveItemIndex<'prop'>, render all bodies, hide inactive accessibly.
• Autoplay/loop: play/pause control, honor reduced motion, suppress autoplay in editor design mode.
• Resizable layout: keep required content usable at 320px. Reflow visible groups inside their page and cap track minima with minmax(min(100%, <minimum>), 1fr). Follow OVERFLOW.md.
• Preview composition, inline or through variables: withDefaults(withFallbackPlaceholder(PreviewOrComponent, options), defaultProps). Keep withDefaults outermost; use one crucial data field and match the root class.