/reskin

name: reskin
description: Rebuild an existing site's pages with byte-faithful content on a separately-defined donor design system — another live site, or local static HTML prototypes (Figma donors are contract-defined, not yet implemented). Content fidelity is gated byte-level (text, ordered images, SEO metadata); design application is flexible (content re-laid-out onto donor modules). Use when the user says "reskin my site with this design", "apply this design system to my content", "restyle my site to look like <other site>", "new design, same content", "rebrand my site using these prototypes", or names a content site plus a design donor. NOT for redesigning from intent (that's the stardust core extract/direct/prototype chain) and NOT for keeping the current design while migrating (that's the replica flow).
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:reskin — same content, donor design

The user has a site (the **content source**) and a design that already exists somewhere else (the **donor**: another live site, or a directory of static HTML prototypes; Figma is future scope). Reskin rebuilds the content site's pages so that every visible byte of content survives — text, ordered images, CTAs, SEO metadata — while the surface comes entirely from the donor's tokens and module vocabulary.

The two halves have different contracts:

• **Content is non-negotiable.** The gate is byte equality of

whitespace-normalized visible text, the ordered visible-image set, and full metadata carry-over. Not "close" — equal, after an explicitly declared, executable normalization ledger.

• **Design is flexible.** Content is re-laid-out onto donor modules; a

carousel may become a static card grid, a sidebar may become a band. Structure (element counts, tag sequences) is informational, never gating — a reskin re-structures markup by design.

The decisive rule, validated in the UC2-E1 experiment (a healthcare site × a fintech donor: 2281/2281 text bytes, 7/7 images, 47/47 slots, 13/13 metadata, 17/17 donor-token probe): **the page is generated programmatically from the captured content model — content strings are never retyped.** Byte fidelity then holds by construction and the content gate becomes a regression check instead of a debugging tool.

Inputs

• `<content-url>` — required. The site whose content is preserved.
• Donor, exactly one of:
• `--donor <url>` — a live site whose design system is adopted.
• `--donor-dir <path>` — a directory of local static HTML

prototypes (claude-design / Mobirise / Relume / Lovable / v0 / hand-coded). Served on localhost and captured through the same path — recipe in `reference/donor-sources.md` § Local prototypes.

• `--donor-figma <url>` — **not yet implemented.** The contract is

defined (`reference/donor-sources.md` § Figma) but the adapter is future scope. Tell the user exactly this: *"Figma donors are not implemented yet. Export the frames as static HTML prototypes (or point me at a live staging URL of the design) and re-run with `--donor-dir` / `--donor`. The Figma adapter — variables→palette, text styles→type, frame screenshots→vision references, provenance class `figma-mcp` — is specced in `skills/reskin/reference/donor-sources.md` and will land in a later release."* Do not improvise a partial Figma capture.

• `--pages <slug,slug,...>` — optional. Restrict the content capture

to specific pages. Default: the archetype set (one page per page family; scale to siblings happens in Phase 6 via `migrate`).

• `--scope <selectors>` — optional. Pre-declare the content-root

scope for a single-page run (comma-separated, `!` suffix keeps a scope whole; see `reference/content-model.md` § Scope declaration). Without it, run the scope-discovery procedure per page.

Setup

1. Run the master skill's setup (`../stardust/SKILL.md` § Setup): impeccable dep check, context loader, state read. **Flow.** Stamp `state.json.flow: "reskin"` if unset (`../stardust/reference/state-machine.md` § Flow keys); if another flow is set, print it and the switch command (`$stardust reskin --switch-flow`) instead of running. 2. **Playwright import-resolvability probe** — same contract as `../extract/SKILL.md` § Setup: `node -e "import('playwright').then(()=>process.exit(0))"` from the project root; on failure `npm i -D playwright --no-save --legacy-peer-deps`. Re-run the probe at the start of every phase that renders — a `--no-save` install is pruned by any later real `npm i`. 3. **Copy the scripts into the project.** ESM resolves `import('playwright')` from the *script's* directory and the plugin tree ships no `node_modules`. Copy `skills/reskin/scripts/*` (all five files — `capture-content.mjs` and `dom-equality.mjs` import `source-normalize.mjs` as a sibling) byte-identical to `stardust/scripts/reskin/`, **and** `skills/diff/scripts/ live-session.mjs` to `stardust/scripts/diff/` — every reskin gate script (capture-content, dom-equality, donor-probe, **and** slot-coverage) imports it unconditionally at startup, regardless of target type: without the copy each one exits 2 immediately, even for `--help` or a local-file `--rendered` target. It supplies ALL live-target hardening (real-Chrome UA + standard headers, challenge detection, headed-stealth escalation), resolved from `../diff/` next to `../reskin/`, so keep the two dirs siblings. Run the copies. 4. **Origin collision** — if `stardust/state.json` records a different `site.originUrl`, stop and ask before mixing sites, per `../extract/SKILL.md` § Setup.

Procedure

Phase 1 — INGEST DONOR

The donor's design system is captured **separately** from the content site, into `stardust/canon-source/`.