skilld
All skills
wix avatar

/wix-app

@dc6f1fa official
by Wix.comwix/skills33 stars
33

Build and review Wix CLI app extensions — dashboard pages, modals, plugins, menu plugins, custom element widgets, Editor React components, site plugins, embedded scripts, backend APIs, backend events, service plugins, data collections, and App Market readiness. Use when building ANY feature or extension for a Wix CLI app or preparing a Wix app for App Market review. Triggers on: add, build, create, implement, help me, dashboard, widget, plugin, backend, API, event, collection, embedded script, service plugin, Editor React component, checkout, shipping, tax, discount, SPI, CMS, schema, tracking, popup, admin panel, menu item, modal, validate, test, verify, register extension, App Market, app review, submission readiness.

Ask your Agent

Use this Skill: https://skilld.dev/gh/wix/skills/wix-app

This session only. Nothing lands on disk.

referenceseditor-react-componentBRANDED-COMPONENTS.md

≈572 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Branded / Themed Components

Use this reference only when the prompt explicitly requests a branded, themed, or brand-aware component. Do not infer this requirement from a generic request for polished styling.

Rules

Import theme tokens from @wix/react-component-schema/theme-variables.module.css using CSS Modules @value, then consume with var().

@value wst-primary-background-color from "@wix/react-component-schema/theme-variables.module.css";
@value wst-heading-3-font, wst-heading-3-color from "@wix/react-component-schema/theme-variables.module.css";
@value wst-paragraph-1-font, wst-paragraph-1-color from "@wix/react-component-schema/theme-variables.module.css";

.root    { background: var(wst-primary-background-color); }
.heading { font: var(wst-heading-3-font); color: var(wst-heading-3-color); }
.body    { font: var(wst-paragraph-1-font); color: var(wst-paragraph-1-color); }

Colors: wst-primary-background-color, wst-secondary-background-color, wst-base-1-color, wst-base-2-color, wst-shade-1/2/3-color, wst-accent-1/2/3/4-color, wst-links-and-actions-color

Headings: wst-heading-1..6-font / wst-heading-1..6-color

Body: wst-paragraph-1..3-font / wst-paragraph-1..3-color

  • Do not use var(--wst-*) directly; import the @value alias first.
  • Do not pass a fallback as var()'s second argument
  • Do not use @import; CSS Modules resolves theme aliases through @value.
  • Do not use wst-base-1-color for text on a light surface. Prefer heading/paragraph color tokens for body text.
  • Use matching control tokens: pair wst-button-primary-background-color with wst-button-primary-color for a primary CTA (or the secondary pair for a secondary CTA). Do not mix wst-links-and-actions-color with wst-base-2-color as button background and text: they are unrelated tokens and may fail contrast. Check the rendered contrast of every state, and choose a different token pair or design if it fails.

Checklist

  • Theme values are imported from theme-variables.module.css with @value.
  • Imported aliases are consumed through var().
  • Typography uses heading/paragraph font and color token pairs.
  • Text colors remain legible on the selected background token.

Source: SKILL.md on GitHub

Third-party checks

1 warningtoday4 checks · Risk SAFE
  • Gen Agent Trust Hubtoday

    This skill is a specialized development toolkit for building extensions on the Wix platform. It provides comprehensive instructions for creating dashboard pages, backend APIs, and site plugins using the Wix CLI and SDKs. No malicious patterns were detected; the skill's behaviors, such as dependency management, command execution for builds, and local script execution for code reviews, are entirely consistent with its purpose as a developer productivity tool for the Wix ecosystem.

  • Sockettoday

    1 alert: gptAnomaly

  • Snyktoday

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at dc6f1fa. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 2 days ago

Capability

compatibility
requires `@wix/cli` >= 1.1.192.

Topics

README badge

README badge for wix/skills/wix-app

What it does

Builds dashboard pages, modals, plugins, custom widgets, Editor React components, backend APIs, events, service plugins, and data collections for Wix CLI apps. Provides decision logic, API patterns, and validation workflows; scaffolding is owned by the Wix CLI via `wix generate --params`.

Generated from the current SKILL.md.

Frequently asked

What extension types does this skill cover?
All Wix CLI app extension types: dashboard pages, modals, plugins, menu plugins, custom element widgets, Editor React components, site plugins, embedded scripts, backend APIs, backend events, service plugins, and data collections.
Does this skill scaffold the extension files for me?
The Wix CLI owns scaffolding via `wix generate --params` for all extension types except Backend API. This skill provides decision logic, API guidance, and business-logic patterns to fill in the generated stubs. Backend API files must be created manually.
What Wix CLI version is required?
The skill requires @wix/cli >= 1.1.192.
Do I need to create a Data Collection extension for app-specific data?
Yes, if you're saving or persisting app-specific data, managing domain entities in a dashboard, or running a service plugin that reads app-configured data. The skill infers this automatically—you don't need to explicitly request it.
Does this skill cover Wix Stores API usage?
Yes. When using any Wix Stores API (products, inventory, orders), the skill requires dual V1/V3 catalog support and references the Stores Versioning guide for module selection and field mapping.

Generated from the current SKILL.md. These answers refresh after source changes.