Skip to content
AI & Agents
Skill

/replica

Same-design migration — re-platform a site to AEM Edge Delivery (or any clean front end) keeping its current design near pixel-perfect. Recreates key pages (one archetype per page type) as clean re-authored HTML/CSS (never DOM copies), verifies each against the live site with a

BOOST
From plugin
adobe-skills
190154 skills4 MCP
Install
$ npx -y skills add adobe/skills --skill replica --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/replica

Context preview

The summary Claude sees to decide when to auto-load this skill.

Same-design migration — re-platform a site to AEM Edge Delivery (or any clean front end) keeping its current design near pixel-perfect. Recreates key pages (one archetype per page type) as clean re-authored HTML/CSS (never DOM copies), verifies each against the live site with a

SKILL.md

replica.SKILL.md
name: replica
description: Same-design migration — re-platform a site to AEM Edge Delivery (or any clean front end) keeping its current design near pixel-perfect. Recreates key pages (one archetype per page type) as clean re-authored HTML/CSS (never DOM copies), verifies each against the live site with a measured source-fidelity gate (structural + visual + stitched pixel diff per breakpoint), then hands off to migrate/deploy/rollout for site-wide delivery (subsumes prepare-migration's prep cascade — never chain the two). The only permitted design changes are entries in an explicit inconsistency register. Use when the user says "migrate this site keeping its current design", "same-design migration", "pixel-perfect replatform to AEM", or "keep the design, change the platform". NOT for redesigns — those are the stardust core pipeline (direct/prototype) or uplift.
license: Apache-2.0
compatibility: Requires Node 22+, Playwright with Chromium resolvable from the project, playwright-cli on PATH, and the impeccable skill (github.com/pbakaus/impeccable) installed alongside stardust.

stardust:replica — same-design migration

Same pages, same content, same design — new platform. `replica` migrates a site to AEM Edge Delivery (or just re-platforms its front end) keeping the current design **near pixel-perfect**: the target spec IS the captured current state, the only permitted deltas are the entries of an explicit **inconsistency register**, and every archetype must pass a **measured source-fidelity gate** against the live site before anything ships.

Two properties make this a different animal from the redesign pipeline:

1. **No creative decisions.** The direction step is mechanical promotion of the captured spec — the stardust `direct` skill is never invoked. Every judgment call in a replica run is a *measurement-policy* call, not a taste call. 2. **Recreation, not copying.** Archetypes are authored as clean semantic HTML/CSS from captured content + values lifted from the source site's own CSS — never DOM copies, never ported page-level stylesheets. Fidelity is proven by instruments, not asserted by construction.

Validated end-to-end (a typographic retail home page, 2026-07-03): 8.31% → 2.93% → **1.31%** pixel diff in 3 measured iterations, height Δ 0, content-diff "findings: none" (198/198 nodes). Every fix came off the instruments, never off eyeballing.

Inputs

  • `<URL>` — required. The site to migrate.
  • `--breakpoints <list>` — optional. Gate breakpoints, default `1440,360`.

Mobile is NOT free: the validation run's 1440-tuned prototype measured 24% at 360. Each breakpoint gets its own gate pass.

  • `--register <file>` — optional. User-supplied inconsistency items to seed

the register (see Phase 2). Without it and without an audit, the register is empty — a pure replica.

Setup

1. Run the master skill's setup (`../stardust/SKILL.md` § Setup): context loader, state read. **Flow guard.** If `state.json.flow` is `redesign`, refuse: print the never-mix line and the switch command (`$stardust replica --switch-flow`, which marks the redesign flow's prototyped and migrated pages stale — master skill § Two migration flows). If `flow` is absent, stamp `flow: "replica"`, `flowSource: "user-phrase"` (`../stardust/reference/state-machine.md` § Flow keys): invoking `replica` is the choice. 2. Verify Playwright is importable from the project root (extract needs it; so do the gate scripts). 3. Probe the gate's deps from the project root first — `node -e "import('pixelmatch').then(()=>process.exit(0))"` (and playwright, pngjs, cheerio) — and only on failure install them AS devDependencies, never `--no-save`: `npm i -D playwright pixelmatch pngjs cheerio --legacy-peer-deps` (a `--no-save` install is pruned by the next real `npm i` — recorded twice in one run, #125). A harness that already resolves them leaves the delivered code repo untouched; the devDependencies otherwise land in the repo the skills push. Run every probe from the project root: ESM resolves `playwright` from the script's own location. 4. Copy scripts into the project and run them from there, not from the plugin: this skill's whole `scripts/` dir to `stardust/scripts/replica/`, the master skill's `../stardust/scripts/` (ledger.mjs, state.mjs) to `stardust/scripts/stardust/`, the migrate skill's `../migrate/scripts/` (migrate.mjs) to `stardust/scripts/migrate/`, AND the whole `../diff/scripts/` dir to `stardust/scripts/diff/` (the diff scripts import diff-profiles.mjs, and ALL live-target hardening — including stitch-shot's — lives in its live-session.mjs; stitch-shot resolves it from `stardust/scripts/diff/` next to `stardust/scripts/replica/`, so keep the two dirs siblings). Never copy into the project-root `scripts/` — that is the EDS boilerplate's directory (master skill § Artifacts, the write boundary).

**Reading and inspection discipline — the context is the budget** (`reference/reading-discipline.md`, read it once at Setup). Every byte a step prints is re-read on every later model call (recorded: 750k characters of tool output in one 77-minute session). The rules in one line each: reference docs by section (`section.mjs <doc> --list`, then one heading, one section per call); captured CSS through `css-rules.mjs`, capture JSON through `json-query.mjs` (values that feed a command from `--tsv`/`--path`, never the table), captured HTML through `html-slice.mjs`; instrument output through `run-bg.mjs wait` and `log --grep`, never `cat`; live-vs-prototype boxes through `measure.mjs`, never an authored probe; images one crop per fact, never a stitched page or the live/build/diff triplet (the extract thumbnail, `thumb.mjs`, is the one exception); script flags from `../stardust/reference/scripts-index.md` first, then `--help`, never the source. Write anything you will need again to a file under `stardust/` and read it ba

Read more
Ships withadobe-skills

Repository of Adobe skills for AI coding agents.

Get the whole plugin

Other skills on adobe-skills.