Generated banner for Rp UI Implementation
Generated logo for Rp UI Implementation

Rp UI Implementation

WixOfficialPublished by Wix

  • Skill
  • Workflow
  • Software development
  • MIT
  • No issues found

From the author

Implement a Wix Headless clone from generated source evidence.
— the description by Wix

AutoGineer summary

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

The rp-ui-implementation skill provides a rigorous, step-by-step procedure for building a UI clone based on frozen source evidence. It emphasizes strict adherence to predefined contracts, build plans, and manifest files to ensure the resulting implementation remains faithful to the source. The workflow mandates a section-by-section approach, requiring developers to verify each unit before moving to the next, while utilizing Astro for static content and React for interactive islands.

What it does

  • Executes a section-by-section UI implementation based on frozen build plans and specifications.
  • Enforces strict adherence to layout, interaction, and visual fidelity contracts.
  • Manages shared chrome elements like headers, footers, and navigation as first-class units.
  • Uses a deterministic component selection process to ensure consistency.
  • Requires unit-level verification across desktop, tablet, and mobile viewports.
  • Maintains a detailed implementation ledger to track the status of every site section.

When to use it

  • When building a high-fidelity clone of a Wix Headless site from existing source evidence.
  • When working within a strict development pipeline that requires frozen specs and integrity verification.
  • When you need to ensure that UI implementation remains decoupled from final verification loops.
  • When building complex sites that require a mix of static Astro content and interactive React islands.

Advantages

  • Prevents scope creep by strictly limiting implementation to frozen specs.
  • Ensures high visual and functional fidelity through mandatory unit-level verification.
  • Reduces technical debt by requiring fixes to be applied to the owning section rather than global overrides.
  • Provides a clear audit trail of implementation status and component selection decisions.

Usage examples

“Implement the next section of the site based on the current build plan.”
The agent reads the frozen spec for the next unit, builds the component using the approved registry, applies necessary data markers, and verifies the layout across viewports.
“How should I handle a missing fact discovered during implementation?”
The agent creates an extraction-gap request and uses the remaining recovery budget to implement a provisional solution before continuing with unrelated units.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/wix/rp-ui-implementation/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip rp-ui-implementation.zip -d .agents/skills

Documentation by Wix

UI implementation

Load this resource only when extraction/latest.json, its frozen manifest, and the matching build/build-plan.json exist and pass integrity verification. It owns implementation, not final comparison or fix-loop acceptance.

Read references/interaction-runtime-contract.md, references/layout-blueprint-contract.md, references/control-and-visual-fidelity-contract.md, and references/ui-normalization-contract.md.

Build only from frozen accepted or provisional specs named by the build plan. Do not read raw observations or browse the source to fill gaps. When implementation exposes a missing fact, create an owned extraction-gap request. Use remaining scoped recovery budget; after exhaustion implement the reliable portion provisionally and continue unrelated units.

Build global CSS, tokens, exact local font declarations, and the shared chrome from frozen specs first. Shared chrome includes every utility/promo bar, header, navigation, and footer. The footer is a first-class implementation and QA unit even though it is normally represented by shared-chrome.spec.json rather than a numbered section. Use exact logos and materialized assets; never recreate branding as text. Preserve dropdown hierarchy, source direction, header viewport footprint and scroll behavior, first-viewport visible copy, footer information architecture, and control-state ownership (including pseudo-elements and nested icons).

Required section-by-section method

For the home route, create or refresh docs/site-clone/build/section-implementation.json. It is keyed by the manifest and unit hashes and contains foundation, metadata, shared chrome, recursive components, and sections in dependency order. Status is implemented, verified, provisional, or user-accepted. Do not mark an entry verified from code inspection alone.

Implement exactly one entry at a time:

  1. Read only that entry's frozen spec and its declared frozen dependencies.

  2. Build one discrete clone root/component for that unit. Do not merge separate source bands into a generic parent section, and do not use a later source band's media or copy as a substitute for the current unit.

  3. Match its canvas, background layers, container, semantic regions, relationships, text geometry, media role, and responsive reflow before decorative polish. Composition and background-media role are identity locks.

  4. Apply the exact data-rp-section / data-rp-layout markers for numbered sections; use data-rp-chrome markers for shared chrome. Implement required scene markers and the public interaction bootstrap before optional motion.

  5. Check the rendered unit at the captured desktop, tablet, and mobile viewports. Mark it verified only when it matches its source artifact closely enough to proceed; otherwise fix that same unit before beginning the next one.

After every entry is verified, run the full-page gap loop. Triage every finding to its owning section or shared-chrome ledger entry and fix in that unit; never paper over an earlier section mismatch with global styling or an unrelated section rewrite. Load the normalization stylesheet only within its declared identity locks; it may improve local geometry and accessibility but may not redesign source identity.

Use Astro for static/content-heavy UI and React only for useful interactive islands. Select only pinned items from the local human-approved registry and record the decision/rejections in build/component-selection.json. Deterministic selection matches the frozen component request against the approved, hash-pinned capabilities and writes the resolved axes, slots, states, composition, and contractRef. Read the selection artifact first. Only when it selects an item, read that exact selected contract.md for concise binding/adaptation guidance. Do not scan the registry or read capability JSON, approvals, licenses, component source, candidate reviews, provenance, or live documentation for reasoning. When no item qualifies, use the bounded custom builder. Never guess a nearby variation or fetch a floating registry dependency during a migration.

Do not report the UI as complete after writing it, and never label a provisional unit verified. Leave a runnable project and all runtime markers/contracts in place, then return to the root supervisor for verification.

Files

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.

Security

No issues found by our static scan· No issues found

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 · wix-headless-replatform/resources/rp-ui-implementation · commit d168bc2
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Also distributed in
wix/skills

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 rp-ui-implementation.zip