Generated banner for Wix Headless Replatform
Generated logo for Wix Headless Replatform

Wix Headless Replatform

WixOfficialPublished by Wix

  • Skill
  • Workflow
  • Software development
  • MIT
  • Low risk
  • Has scripts

From the author

Clone, rebuild, migrate, or reverse-engineer a public website home page into a Wix Headless frontend while preserving source identity, SEO, interactions, and visual fidelity.
— the description by Wix

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The wix-headless-replatform skill acts as a central supervisor for migrating or cloning a public website's home page into a Wix Headless environment. It enforces a structured, multi-stage process that includes browser-based extraction, build planning, implementation, and visual verification. The skill ensures visual fidelity, SEO preservation, and structural integrity by utilizing a frozen manifest approach, where every stage produces durable artifacts that inform the next. It supports both standalone cloning and integrated migration modes, with specific protocols for handling gaps and ensuring the final output is a functional Wix CLI project.

What it does

  • Clones or migrates a public website home page to a Wix Headless frontend.
  • Manages the end-to-end workflow through distinct stages: context, evidence, implementation, and verification.
  • Uses browser-backed extraction to capture visual and structural data.
  • Enforces strict visual fidelity and SEO preservation standards.
  • Supports one-click automation for migration handoffs.
  • Generates a final report and terminal receipt for migration completion.

When to use it

  • When you need to clone a public website home page into a new Wix Headless project.
  • When performing a migration of an existing site to a Wix Headless architecture.
  • When you require a structured, verifiable process for rebuilding a frontend with high visual fidelity.
  • When working within a migration handoff that provides specific project and data-binding intent.

Advantages

  • Ensures consistent results through a rigid, stage-based supervisor protocol.
  • Maintains high visual and functional fidelity to the source website.
  • Provides a clear path for recovery and gap resolution during the build process.
  • Automates the transition from extraction to a runnable Wix CLI scaffold.

Usage examples

“Clone the home page of a website into a new Wix Headless project.”
The agent initiates the standalone clone workflow, resolving the source URL and proceeding through the context and evidence stages to create a new Wix CLI project.
“Migrate this website using the provided handoff file.”
The agent enters migration mode, reads the handoff configuration, and continues the build process within the existing migration-owned project structure.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/wix/wix-headless-replatform-p46x/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip wix-headless-replatform.zip -d .agents/skills

Documentation by Wix

wix-headless-replatform

Role

Drive a close-enough, visually polished Wix Headless frontend from a source website. The implemented scope is one resolved home page and the default output is projects/<project-name>, derived from the hostname. Use Wix CLI Headless, Astro, TypeScript, and Tailwind; use React only for complex interactive islands. Reject additional-page and explicit-URL scope with an actionable explanation until a later approved workflow defines page resolution and shared evidence across routes.

This entry skill is the supervisor. It decides the next workflow stage and loads only the resource for that stage. Do not preload every resource or reference: stage-specific rules are deliberately demand-loaded.

Two modes exist:

  • Standalone clone: source URL to a new, real Wix CLI Headless project.

  • Migration phase: --handoff <migration-project>/website/handoff.json continues on the migration-owned destination. Never omit --handoff for an integrated migration: the standalone command creates a second site.

Non-negotiable invariants

  • Treat the requested public branded homepage as authorized; apply the boundaries in references/safety.md without asking a separate routine authorization question.

  • Browser-backed extraction is mandatory. Do not substitute HTML-only extraction.

  • Resolve the home page before capture. Build only from a validated frozen extraction manifest; raw observations are never builder inputs.

  • A standalone output must be a successful Wix CLI scaffold with valid Wix identity and runnable dev and build scripts. Never hand-create a Wix-shaped substitute.

  • In migration mode, reuse the handoff's site/project and route/data-binding intent; do not create or retarget a second destination.

  • Preserve source structure, first-viewport evidence, chrome hierarchy, source assets, fonts, core interactions, SEO, internal URL behavior, and branded fallback behavior.

  • A build is not completion. Completion requires the accepted post-build visual-review and gap-loop evidence described by rp-qa-gap-loop, plus optional facelift acceptance only when the user explicitly selected facelift mode.

Supervisor protocol

On every new or resumed run:

  1. Resolve the source URL, output directory, and mode. In migration mode read website/handoff.json and docs/site-clone/frontend-automation-state.json first.

  2. Select the first incomplete stage from the table below and read only that resource's SKILL.md plus the references it explicitly needs.

  3. Execute that stage until it writes its required durable artifact, or records a specific genuine blocker with evidence and an exact unblock action.

  4. Re-select the stage after every boundary. Do not say that a required next step “needs to happen” and end the run; load its resource and perform it.

StageLoad only whenResourceDurable outcome
Contextmode, scope, project, or browser environment is unresolvedresources/rp-project-context/SKILL.mdvalid context, approval record, runnable project/plan state, or blocker
Evidencefrozen home-page extraction is absent or staleresources/rp-source-evidence/SKILL.mdvalidated extraction/latest.json and frozen manifest, or global blocker
Implementationfrozen build plan exists and home UI is incompleteresources/rp-ui-implementation/SKILL.mdmanifest-hash-aware runnable home implementation
Verify and improvebuild, QA, comparison, review, fix, report, release, or receipt is incompleteresources/rp-qa-gap-loop/SKILL.mdaccepted result, done_with_gaps, or global blocker
Optional faceliftnormal clone accepted and automation state says facelift is requestedresources/rp-facelift/SKILL.mdaccepted facelift review, or blocker

When frontendPhase.allowedNow is plan, complete only the plan-eligible context and evidence work and leave a resumable plan-state record. When it is build, continue through implementation and verification against the migration-owned project.

One-click continuation

A migration handoff declaring automationMode: "one_click" authorizes routine scope and frontend checkpoints. Record those approvals in docs/site-clone/frontend-automation-state.json; do not pause to ask whether to proceed with a required stage, screenshot review, or authorized gap-fix pass. An explicit facelift request may be carried from 1-click intake, but it remains gated until normal clone acceptance; 1-click never implies facelift by itself.

In a one-click build run, keep selecting and executing stages until one of these durable outcomes exists:

  • website/completion.json is valid and the latest visual review is complete with no open critical/high identity finding; or

  • five visual gap cycles have been completed and website/completion.json records the truthful terminal status done_with_gaps with the final reviewed evidence; or

  • a genuine blocker is recorded with owner, evidence, attempted recovery, and exact next authority/action needed.

An owned local extraction gap is not a genuine blocker. Continue unrelated work, use no more than two distinct targeted recovery attempts, then build the affected dependency closure provisionally and surface post-assembly choices in final-report.json and .md.

Before classifying a shell, browser, or network failure as a blocker, use the repo-local Wix/Yarn toolchain PATH ordering and follow the recovery order in resources/rp-project-context/SKILL.md: aligned-shell retry, then the required browser/network escalation and retry, then blocker only if it still fails or approval is pending. After every gap iteration, immediately return to the stage table; never treat a first build, a reported plan, or backend import as frontend completion.

In migration mode the build must also leave the final route manifest that old-link preservation consumes (output-contract.md, "Migration terminal receipt"). A built site is not proof that old URLs work; redirect application and public verification stay pending until the cutover step runs them.

Commands

Run node scripts/site-clone.mjs <source-url> for standalone mode, or node scripts/site-clone.mjs <source-url> --handoff <path> for migration mode. The active resource gives the exact commands and inputs for its stage.

References

Resources load their own references. The shared contracts are kept under references/: safety.md, workflow.md, extraction-schema.md, output-contract.md, qa-checklist.md, and the interaction/layout/control/normalization/gap contracts.

Files

scripts/lib/component-registry.mjs

import { execFile } from "node:child_process";
import path from "node:path";
import { promisify } from "node:util";
import { access, copyFile, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
import { createHash } from "node:crypto";
import { fileURLToPath } from "node:url";
import { resolveCapabilityBinding, validateComponentCapabilities } from "./component-capabilities.mjs";

const execFileAsync = promisify(execFile);

export const REGISTRY_RUNTIME_CLASSES = new Set(["astro-native", "react-static", "react-island"]);

export async function loadApprovedRegistry(registryRoot = new URL("../../registry/", import.meta.url)) {
  const root = registryRoot instanceof URL ? registryRoot : path.resolve(registryRoot);
  const rootPath = root instanceof URL ? fileURLPath(root) : root;
  const read = async (relativePath) => JSON.parse(await readFile(root instanceof URL ? new URL(relativePath, root) : path.join(root, relativePath), "utf8"));
  const registry = await read("registry.json");
  const approvalsDir = root instanceof URL ? new URL("approvals/", root) : path.join(root, "approvals");
  const approvals = new Map();
  for (const file of await jsonFilesRecursive(approvalsDir)) {
    const approval = JSON.parse(await readFile(root instanceof URL ? new URL(`approvals/${file}`, root) : path.join(approvalsDir, file), "utf8"));
    if (approval.decision === "approved" && approval.revoked !== true) {
      approvals.set(`${approval.registryItemName}@${approval.registryItemRevision}`, approval);
    }
  }
  const items = [];
  const rejected = [];
  for (const item of registry.items || []) {
    if (!item.revision || !item.sourceHash) {
      rejected.push({ item: item.name, reason: "registry-entry-is-not-immutable" });
      continue;
    }
    const approval = approvals.get(`${item.name}@${item.revision}`);
    if (!approval) {
      rejected.push({ item: item.name, reason: "missing-human-approval" });
      continue;
    }
    if (!REGISTRY_RUNTIME_CLASSES.has(approval.runtimeClass)) {
      rejected.push({ item: item.name, reason: "invalid-runtime-class" });
      continue;
    }
    if (!approval.reviewer?.human || !approval.reviewer?.id) {
      rejected.push({ item: item.name, reason: "approval-is-not-attributed-to-a-human" });
      continue;
    }
    if (!approval.licenseRef || !approval.sourceHash) {
      rejected.push({ item: item.name, reason: "approval-evidence-incomplete" });
      continue;
    }
    if (approval.sourceHash !== item.sourceHash) {
      rejected.push({ item: item.name, reason: "approval-source-hash-mismatch" });
      continue;
    }
    if (!item.capabilitiesRef || !item.capabilitiesHash || !item.contractRef || !item.contractHash) {
      rejected.push({ item: item.name, reason: "runtime-contract-metadata-missing" });
      continue;
    }
    if (approval.capabilitiesRef !== item.capabilitiesRef || approval.capabilitiesHash !== item.capabilitiesHash
      || approval.contractRef !== item.contractRef || approval.contractHash !== item.contractHash) {
      rejected.push({ item: item.name, reason: "approval-runtime-contract-mismatch" });
      continue;
    }
    try {
      const capabilityBytes = await readFile(safeJoin(rootPath, item.capabilitiesRef, "capability manifest"));
      const capabilityHash = createHash("sha256").update(capabilityBytes).digest("hex");
      if (capabilityHash !== item.capabilitiesHash) {
        rejected.push({ item: item.name, reason: "capability-manifest-hash-mismatch" });
        continue;
      }
      const capabilities = JSON.parse(capabilityBytes);
      const validation = validateComponentCapabilities(capabilities, {
        name: item.name,
        revision: item.revision,
        contract: approval.contractKind,
      });
      if (!validation.ok) {
        rejected.push({ item: item.name, reason: "capability-manifest-invalid", details: validation.errors });
        continue;
      }
      const contractBytes = await readFile(safeJoin(rootPath, item.contractRef, "agent contract"));
      const contractHash = createHash("sha256").update(contractBytes).digest("hex");
      if (contractHash !== item.contractHash) {
        rejected.push({ item: item.name, reason: "agent-contract-hash-mismatch" });
        continue;
      }
      if (!contractBytes.toString("utf8").trim()) {
        rejected.push({ item: item.name, reason: "agent-contract-empty" });
        continue;
      }
      items.push({ ...item, approval, capabilities });
    } catch (error) {
      rejected.push({ item: item.name, reason: "capability-manifest-unreadable", details: [error.message] });
    }
  }
  return { registry: { ...registry, items }, rejected };
}

export function selectRegistryItem(contract, approvedRegistry) {
  const hardRequirements = new Set(contract.hardRequirements || []);
  const rejected = [...(approvedRegistry.rejected || [])];
  const candidates = [];
  for (const item of approvedRegistry.registry?.items || []) {
    const approval = item.approval;
    const reasons = [];
    if (approval.contractKind !== contract.kind) reasons.push("contract-kind-mismatch");
    if (contract.requiresClientRuntime && approval.runtimeClass === "react-static") reasons.push("interaction-requires-runtime-state");
    for (const requirement of hardRequirements) if (approval.qualityGates?.[requirement] !== true) reasons.push(`quality-gate:${requirement}`);
    const capability = resolveCapabilityBinding(item.capabilities, contract.capabilityRequirements || {});
    reasons.push(...capability.reasons);
    if (reasons.length) rejected.push({ item: `${item.name}@${item.revision}`, reason: reasons.join(",") });
    else candidates.push({ item, binding: capability.binding });
  }
  candidates.sort((a, b) => {
    const aDeps = Object.keys(a.item.dependencies || {}).length + (a.item.registryDependencies || []).length;
    const bDeps = Object.keys(b.item.dependencies || {}).length + (b.item.registryDependencies || []).length;
    return aDeps - bDeps || a.item.name.localeCompare(b.item.name);
  });
  if (!candidates.length) return { strategy: "bounded-custom", selected: null, rejected };
  const winner = candidates[0];
  return {
    strategy: "curated-registry",
    selected: {
      name: winner.item.name,
      type: winner.item.type,
      files: winner.item.files,
      runtimeClass: winner.item.approval.runtimeClass,
      sourceHash: winner.item.approval.sourceHash,
      approvalRef: winner.item.approval.approvalRef,
      revision: winner.item.revision,
      dependencies: winner.item.dependencies || {},
      capabilitiesRef: winner.item.capabilitiesRef,
      capabilitiesHash: winner.item.capabilitiesHash,
      contractRef: winner.item.contractRef,
      contractHash: winner.item.contractHash,
      binding: winner.binding,
    },
    rejected: [...rejected, ...candidates.slice(1).map(({ item }) => ({ item: `${item.name}@${item.revision}`, reason: "higher-adaptation-or-dependency-cost" }))],
  };
}

// Installs the project's dependencies with the package manager its lockfile names (npm when none),
// so the lockfile and node_modules match the package.json a registry install just rewrote.
export async function installProjectDependencies({ outputDir }) {
  const root = path.resolve(outputDir);
  const exists = async (name) => { try { await access(path.join(root, name)); return true; } catch { return false; } };
  const runner = await exists("pnpm-lock.yaml") ? ["pnpm", "install"]
    : await exists("yarn.lock") ? ["yarn", "install"]
      : ["npm", "install", "--no-audit", "--no-fund"];
  const [command, ...args] = runner;
  const options = { cwd: root, maxBuffer: 16 * 1024 * 1024 };
  try {
    await execFileAsync(command, args, options);
    return { packageManager: command };
  } catch (error) {
    // Same fallback create-wix-project.mjs uses: a Corepack-only Node setup has no bare yarn/pnpm.
    if (error?.code !== "ENOENT" || command === "npm") throw error;
    await execFileAsync("corepack", [command, ...args], options);
    return { packageManager: `corepack ${command}` };
  }
}

export async function installRegistrySelection({ selection, ...options }) {
  const { installations } = await installRegistrySelections({ selections: [selection], ...options });
  return installations[0];
}

// Installs every curated selection of a page in one pass: each distinct item's files are copied
// once, their exact dependencies are merged into package.json once, and the package manager runs
// once. Installing per unit made a page with N approved buttons run N serial full installs.
// Returns one installation record per selection, in order.
export async function installRegistrySelections({ selections = [], outputDir, registryRoot = new URL("../../registry/", import.meta.url), installDependencies = installProjectDependencies }) {
  const root = registryRoot instanceof URL ? fileURLPath(registryRoot) : path.resolve(registryRoot);
  const destinationRoot = path.resolve(outputDir);
  const items = new Map();
  const dependencies = {};
  const dependencyOwner = {};
  for (const selection of selections) {
    if (!selection || selection.strategy !== "curated-registry" || !selection.selected) continue;
    const selected = selection.selected;
    const key = `${selected.name}@${selected.revision}`;
    if (items.has(key)) continue;
    const installed = [];
    for (const file of selected.files || []) {
      if (!file.path || !file.target || !file.sha256) throw new Error(`Registry file metadata is incomplete for ${selected.name}`);
      const source = safeJoin(root, file.path, "registry source");
      const destination = safeJoin(destinationRoot, file.target, "registry target");
      const sourceBytes = await readFile(source);
      const actualHash = createHash("sha256").update(sourceBytes).digest("hex");
      if (actualHash !== file.sha256) throw new Error(`Registry source hash mismatch for ${file.path}: expected ${file.sha256}, got ${actualHash}`);
      await mkdir(path.dirname(destination), { recursive: true });
      await copyFile(source, destination);
      installed.push({ source: file.path, target: file.target, sha256: actualHash });
    }
    const itemDependencies = selected.dependencies || {};
    if (Array.isArray(itemDependencies)) throw new Error(`Registry dependencies must be exact name/version pairs for ${selected.name}`);
    for (const [name, version] of Object.entries(itemDependencies)) {
      if (!/^\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?$/.test(String(version))) throw new Error(`Registry dependency ${name} must use an exact version, got ${version}`);
      if (dependencies[name] !== undefined && dependencies[name] !== String(version)) {
        throw new Error(`Registry dependency ${name} is pinned to ${dependencies[name]} by ${dependencyOwner[name]} and ${version} by ${key}; approved items must agree`);
      }
      dependencies[name] = String(version);
      dependencyOwner[name] = key;
    }
    items.set(key, { selected, installed, dependencies: itemDependencies });
  }
  let dependencyInstall = { ok: true, skipped: "no-dependencies" };
  if (Object.keys(dependencies).length) {
    const packagePath = path.join(destinationRoot, "package.json");
    const packageJson = JSON.parse(await readFile(packagePath, "utf8"));
    packageJson.dependencies = { ...(packageJson.dependencies || {}), ...dependencies };
    packageJson.dependencies = Object.fromEntries(Object.entries(packageJson.dependencies).sort(([a], [b]) => a.localeCompare(b)));
    await writeFile(packagePath, `${JSON.stringify(packageJson, null, 2)}\n`);
    // Rewriting package.json alone leaves the generated component importing packages that are not
    // installed and a lockfile that has drifted; install before returning so the next build works.
    try {
      dependencyInstall = { ok: true, ...(await installDependencies({ outputDir: destinationRoot, dependencies })) };
    } catch (error) {
      throw new Error(`Installing registry dependencies for ${[...items.values()].map((item) => item.selected.name).join(", ")} failed: ${error.message}`);
    }
  }
  const astroConfiguration = [...items.values()].some((item) => item.selected.runtimeClass?.startsWith("react-"))
    ? await ensureAstroReactIntegration(destinationRoot)
    : { changed: false, reason: "not-required" };
  const installations = selections.map((selection) => {
    const item = selection?.strategy === "curated-registry" && selection.selected ? items.get(`${selection.selected.name}@${selection.selected.revision}`) : null;
    if (!item) return { strategy: "bounded-custom", installed: [] };
    const { selected } = item;
    return {
      strategy: "curated-registry",
      item: selected.name,
      revision: selected.revision,
      sourceHash: selected.sourceHash,
      capabilitiesRef: selected.capabilitiesRef,
      capabilitiesHash: selected.capabilitiesHash,
      contractRef: selected.contractRef,
      contractHash: selected.contractHash,
      binding: selection.selected.binding,
      approvalRef: selected.approvalRef,
      installed: item.installed,
      dependencies: item.dependencies,
      dependencyInstall,
      astroConfiguration,
    };
  });
  return { installations, dependencyInstall, astroConfiguration };
}

async function ensureAstroReactIntegration(destinationRoot) {
  const configPath = path.join(destinationRoot, "astro.config.mjs");
  let source;
  try { source = await readFile(configPath, "utf8"); }
  catch (error) {
    if (error?.code === "ENOENT") throw new Error("React registry installation requires an existing astro.config.mjs");
    throw error;
  }
  const reactImport = source.match(/import\s+([A-Za-z_$][\w$]*)\s+from\s+["']@astrojs\/react["']/);
  const reactIdentifier = reactImport?.[1] || "react";
  const hasImport = Boolean(reactImport);
  const hasIntegration = new RegExp(`integrations\\s*:\\s*\\[[^\\]]*\\b${reactIdentifier}\\s*\\(`, "s").test(source);
  if (hasImport && hasIntegration) return { changed: false, config: "astro.config.mjs" };
  if (!/defineConfig\s*\(\s*\{/.test(source)) {
    throw new Error("Cannot safely add the React integration: astro.config.mjs must export defineConfig({...})");
  }
  let next = source;
  if (!hasImport) next = `import react from "@astrojs/react";\n${next}`;
  if (!hasIntegration) {
    if (/integrations\s*:\s*\[/.test(next)) {
      next = next.replace(/integrations\s*:\s*\[/, (match) => `${match}${reactIdentifier}(), `);
    } else {
      next = next.replace(/defineConfig\s*\(\s*\{/, (match) => `${match}\n  integrations: [${reactIdentifier}()],`);
    }
  }
  await writeFile(configPath, next);
  return {
    changed: true,
    config: "astro.config.mjs",
    sha256: createHash("sha256").update(next).digest("hex"),
  };
}

async function jsonFilesRecursive(dir, prefix = "") {
  try {
    const entries = await readdir(dir instanceof URL ? dir : path.resolve(dir), { withFileTypes: true });
    const files = [];
    for (const entry of entries) {
      const relative = prefix ? `${prefix}/${entry.name}` : entry.name;
      if (entry.isFile() && entry.name.endsWith(".json")) files.push(relative);
      if (entry.isDirectory()) {
        const child = dir instanceof URL ? new URL(`${entry.name}/`, dir) : path.join(dir, entry.name);
        files.push(...await jsonFilesRecursive(child, relative));
      }
    }
    return files.sort();
  } catch (error) {
    if (error?.code === "ENOENT") return [];
    throw error;
  }
}

function safeJoin(root, relativePath, label) {
  if (path.isAbsolute(relativePath) || relativePath.split(/[\\/]+/).includes("..")) throw new Error(`${label} must be a safe relative path: ${relativePath}`);
  const normalizedRoot = path.resolve(root);
  const target = path.resolve(normalizedRoot, relativePath);
  if (target !== normalizedRoot && !target.startsWith(`${normalizedRoot}${path.sep}`)) throw new Error(`${label} escapes its root: ${relativePath}`);
  return target;
}

function fileURLPath(value) {
  if (value.protocol !== "file:") throw new Error(`Registry URL must use file: ${value}`);
  return fileURLToPath(value);
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

  • Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Wix
Publisher
Wix (Official)
Source
wix/skills · skills/wix-headless-replatform · commit d168bc2
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Wix or Wix.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download wix-headless-replatform.zip