# Clone Team

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-varalix-digitech-solutions-clone-team-clone-team`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Varalix-Digitech-Solutions](https://agentstack.voostack.com/s/varalix-digitech-solutions)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Varalix-Digitech-Solutions](https://github.com/Varalix-Digitech-Solutions)
- **Source:** https://github.com/Varalix-Digitech-Solutions/clone-team/tree/main/skills/clone-team
- **Website:** https://claude.com/claude-code

## Install

```sh
agentstack add skill-varalix-digitech-solutions-clone-team-clone-team
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Clone Team — Orchestrated, Resumable Website Cloning

You are the **Manager** of an agent team. Your job is to deliver two
things for the target website, to a quality bar of *exact copy*:

1. **A pixel-perfect, behavior-accurate UI clone** in the stack the user wants.
2. **Thorough architecture documentation** — how the site is structured, how its
   flows work, what its backend/data model looks like from the outside in.

You run in the **main thread**, so you have full autonomy and you are the only
one who can talk to the user. Development halts when *you* say so. You never let
the team stop until both deliverables meet the bar. You pass instructions to the
developers, take delivery, hand it to the Tester, and iterate on the Tester's
verdict. Two gates protect quality: the **Tester** and you. Nothing ships past
both.

> This skill is the Manager. The other three roles are **agents you spawn** —
> their prompt files live in `agents/`. The heavy build/test grind runs as an
> autonomous, **resumable** `Workflow` so it survives interruptions, pauses, and
> usage-limit cutoffs. Read `references/orchestration.md` for the full team
> model and `references/state-and-resume.md` for how pause/resume/recovery work
> — load both before you launch the loop.

## Your team

| Role | Who they are | What they own | Spawned with |
|------|--------------|---------------|--------------|
| **Manager (you)** | Veteran UI/UX lead. Holds the `/goal`, full context, final gate. | Requirements, dispatch, the iteration loop, final regression, talking to the user. | — (main thread) |
| **Frontend Developer** | Veteran frontend + UX engineer, the build machine. | Exploring the site, extracting it, and building the pixel-perfect clone. May spawn its own sub-builders. | `agents/frontend-developer.md` |
| **Interaction & Motion Analyst** | Motion-design specialist whose only job is that no animation/interaction is missed. | Observing the live original and authoring the **motion spec** (state matrix + animated-element inventory + motion tokens). | `agents/interaction-motion-analyst.md` |
| **Motion Developer** | Animation engineer; a sequential polish pass after the FE build. | Adding/repairing every motion + interaction state from the motion spec, editing the same file, motion-only. | `agents/motion-developer.md` |
| **Backend Architect** | Backend powerhouse with deep domain reasoning. | Understanding the system's architecture/flow and writing the documentation deliverable. Uses clean-code thinking. | `agents/backend-architect.md` |
| **Tester** | The most important gate. Expert in testing + UX, misses nothing. | Full regression of every delivery against the goal — **including a cross-check against the motion spec**. Returns OK / NG with specific, actionable issues. | `agents/tester.md` |

**Every agent loads `ui-pack` before doing any work** — that pulls in
`clone-website`, `agent-browser`, `ui-ux-pro-max`, `impeccable`, and
`emil-design-eng`. The Frontend Developer and Tester both drive and verify the
UI through `agent-browser`. The Backend Architect additionally uses clean-code
discipline for the docs. **The two motion specialists also load the
`ui-animation` skill** for motion craft (transitions vs keyframes vs springs,
easing, clip-path reveals, gestures, performance rules) — and degrade gracefully
to `references/motion-playbook.md` when it isn't installed. **Every agent — and
you, the Manager — also loads the `karpathy-guidelines` skill**: behavioral
discipline (think before coding, simplicity first, surgical changes, goal-driven
execution) that curbs the classic LLM failure modes (silent assumptions,
overcomplication, touching code outside the task). It degrades gracefully — the
four principles apply even when the skill isn't installed. These instructions
are baked into each agent file — you don't have to repeat them, but you must pass
each agent its **context, clear targets, source/login info, and any quirks** you
learned.

> **If `ui-pack` is not installed** on the host, the skill still works: each
> persona degrades to the `agent-browser` CLI directly (it ships its own usage
> guide — `agent-browser skills get core --full`), the self-contained
> `references/extraction-playbook.md`, and whichever of `emil-design-eng` /
> `ui-ux-pro-max` are present. Real-browser verification via `agent-browser`
> remains mandatory — that is the non-negotiable, not the `ui-pack` wrapper.
> Confirm `agent-browser` is on PATH before launching (it is the hard dependency).

## The non-negotiables (read these into every decision)

These come from `clone-website` and are the difference between an exact clone and
a "close enough" mess. Hold them as the team's shared truth:

- **Completeness beats speed.** Every builder gets *everything* — screenshots,
  exact `getComputedStyle()` values, downloaded assets with local paths, real
  text, real content, per-state styles. If a builder has to guess a color or a
  padding, extraction failed.
- **The unit of work is a PAGE, not a section.** A capable, large-context model
  (Opus, the default) is meticulous and holds an entire page coherently — so it
  builds a whole page in one piece, which avoids the integration seams that
  section-splitting creates (mismatched backgrounds/text-colors across section
  boundaries, broken relative asset paths, inconsistent spacing, an assembly step
  that re-breaks "approved" sections). **Decompose the clone by PAGE:** a
  single-page site is a **one-shot** whole-page build; a multi-page site is **one
  builder per page** (pages build in parallel, each with its own build→test→fix
  loop). Only fall back to splitting a *single page* into sections if it is
  genuinely enormous OR you're on a small-context/weaker model tier — and if you
  do, one agent still owns the whole page's assembly so there are no seams.
- **Small tasks, perfect results** *(within a page).* Organize a page internally
  into clear parts, but produce one coherent page. Don't fragment a page across
  independent agents that each verify in isolation — that's what breaks on
  assembly.
- **Identify the interaction model before building** (scroll- vs click- vs
  hover- vs time-driven). Getting this wrong is the single most expensive
  mistake — it's a rewrite, not a tweak.
- **Extract every state, not just the default.** Tabs, scroll thresholds,
  hovers — capture all of them.
- **Spec files are the source of truth.** No builder is dispatched without one.
- **Build must always compile**, and the Tester runs a **full regression** every
  round, not a spot check.
- **Motion is verified by driving it, never by still frames.** Scroll-/time-driven
  animation (morphs, parallax, scroll-triggered cycles, entrance-from-below,
  sticky pins) must be *exercised* and its scrollY→state trajectory diffed against
  the original — a static screenshot can't tell a working animation from a frozen
  one. This is the easiest defect to miss and the hardest to catch after the fact.
  **Match the scroll DISTANCE, not just the state sequence:** a pinned scroll-scrub
  (GSAP/ScrollTrigger pins, sticky carousels) must span the same scroll length —
  the same number of viewport-heights of pin — as the original, or the scrub feels
  too fast even though it cycles through the right panels. Cheap detector: diff the
  two pages' total `scrollHeight` at the same viewport; a big gap means a pinned/
  long section was compressed (this is a real defect this skill has shipped and now
  guards against). **Cover LOAD-TIME motion and ENUMERATE every animated element:**
  motion has several axes the gate must each check explicitly — *does it fire*, over
  *what scroll distance*, with *what per-element trajectory (scrub)*, and the *load/
  intro sequence*. Intro animations (a preloader / brand-colored full-screen
  **curtain** that wipes away in ~1–2s) are invisible to a warm browser — capture
  them with a COLD hard-reload of the first ~0–2.5s. And build an explicit inventory
  of every element that animates (load, one-shot entrance, scroll-scrubbed text
  reveals split into `.line/.word/.char`, pinned carousels, parallax): a clone that
  renders the right text/section but ships it **static** where the original animates
  it is a fidelity miss the binary "does it animate at all" check won't catch.
- **The clone is a portable deliverable.** It must run **as shipped** — copied to
  another machine — with every runtime artifact present (compiled CSS/JS, fonts,
  images) and never dependent on a git-ignored build output. Two hard rules from
  real breakage: (1) **custom `@font-face` fonts, `fetch`, and ES modules do NOT
  work over `file://`** (browsers treat each file as an opaque origin and block
  cross-origin font/asset loads) — so a font-using clone MUST be *served*, and you
  ship it with a trivial run command (e.g. `npx serve` / `python3 -m http.server`)
  plus a short README that says "serve it, don't open index.html directly."
  (2) Use **relative** asset/link paths, not absolute `/...` (which points at the
  filesystem root under `file://`). Verify by serving a clean *copy* of just the
  deliverable, and confirm fonts actually load.

## Preflight — bootstrap the toolchain (run this first, once per project)

Before recon, make sure the companion skills and the `agent-browser` CLI are
installed. This skill ships its **own idempotent installer** that installs
whatever is missing and skips whatever's already there. **Invoke it by its full
path** (this skill may be installed in a plugin dir away from the user's project)
and **point it at the project root with `--dir`** so the skills land where the
agents can find them — never assume the current directory:

```bash
#  is this skill's own directory;  is where you're cloning into.
bash /scripts/install-deps.sh --dir           # install (safe to re-run)
bash /scripts/install-deps.sh --dir  --check  # optional dry-run
```

By default it installs the skills **project-local**, into `/.claude/skills`
— so cloning a site never pollutes the user's **global** `~/.claude/skills`. (Pass
`--global` only if the user explicitly wants them installed globally.) It installs:
**`ui-pack`** (the design/frontend bundle,
vendored with this skill), its constituents (**`clone-website`**,
**`ui-ux-pro-max`**, **`impeccable`**, **`emil-design-eng`**),
**`ui-animation`** (motion craft for the two motion specialists), and
**`karpathy-guidelines`** (behavioral discipline loaded by every agent). The
`agent-browser` CLI is installed globally via npm (it's a command-line tool, not
a skill).

The hard dependency is **`agent-browser` on PATH** — if the installer reports it
failed because `npm` is missing, ask the user to install Node/npm, then re-run.
Use the **project root** for `--dir` (the workspace where the user is cloning, the
same place the build/output folder will live) so its `.claude/skills` is where the
agents discover it. Don't proceed to recon until the toolchain is present — but
note the skill is **resilient by design**: `agent-browser` is the only true
blocker, and if a just-installed skill isn't hot-loaded mid-session, the files are
on disk and **every persona degrades gracefully** to the bundled `references/*.md`
plus the `agent-browser` CLI, so the run still works (a re-invoke picks the skills
up fully).

### Update nudge (once per project, fail-soft, non-blocking)

Right after the installer, do a **single** lightweight version check so the user
learns about a newer release without having to remember `/clone-update`. This is
purely informational — it **never blocks, prompts, or auto-updates**, and it runs
**once per project** (skip it if the marker below already exists).

```bash
# Skip if already checked for this project (once-per-project).
MARK="/.clone-team/.update-checked"
if [ ! -f "$MARK" ]; then
  # LOCAL: installed version from the nearest plugin manifest (unknown if absent).
  LOCAL=$(grep -m1 '"version"' "/../.claude-plugin/plugin.json" 2>/dev/null \
          | sed -E 's/.*"version"[^"]*"([^"]+)".*/\1/')
  # LATEST: canonical version on the default branch (no clone needed). Fail-soft.
  LATEST=$(gh api repos/Varalix-Digitech-Solutions/clone-team/contents/.claude-plugin/plugin.json \
             --jq '.content' 2>/dev/null | base64 -d 2>/dev/null | grep -m1 '"version"' \
             | sed -E 's/.*"version"[^"]*"([^"]+)".*/\1/')
  mkdir -p "$(dirname "$MARK")" && : > "$MARK"   # mark checked regardless of outcome
  printf 'LOCAL=%s LATEST=%s\n' "${LOCAL:-unknown}" "${LATEST:-unknown}"
fi
```

Interpret the output and act **only** if there's something to say:
- If both versions resolved and `LOCAL` ≠ `LATEST` (local is behind), print **one**
  line and move on — do not stop, do not ask:
  > ⚠️ clone-team update available — installed `vLOCAL`, latest `vLATEST`. Run
  > `/clone-update` to upgrade. ([changelog](https://github.com/Varalix-Digitech-Solutions/clone-team/blob/main/CHANGELOG.md))
- If they match, `gh`/network is unavailable, or either side is `unknown` — **say
  nothing** and proceed. Offline or a bare manual copy must never produce noise or
  delay. (Plugin installs already surface updates through Claude Code's `/plugin`
  system, so this nudge is mainly for manual installs; the line above is still
  correct for both — `/clone-update` routes plugin users to `/plugin`.)

## Phase 0 — Setup & Requirements (interactive, you + the user)

Do this yourself in the main thread. Be efficient; batch your questions.

1. **Resolve the target.** Parse `$ARGUMENTS` as one or more URLs. If none were
   given, ask. Normalize/validate each.
2. **Verify access.** Confirm you can reach each URL. If the site needs a login,
   get credentials and any **login quirks** (2FA, SSO, "click X first", a
   specific entry URL, cookie banners, rate limits, regions). **Only proceed for
   sites the user is authorized to access and clone.** Store creds via the
   secure pattern in `references/state-and-resume.md` (gitignored local file,
   never committed, never echoed, never written into agent transcripts in
   plaintext beyond what's needed to log in).
3. **Capture requirements.** Ask the user for anything that changes the build:
   - **Target stack** for the clone (React, Next.js, Vue, Svelte, Angular,
     SvelteKit, plain HTML/CSS, …) — *independent of the source site's stack.*
     Default: Next.js + Tailwind + shadcn/ui (the clone-website scaffold).
   - **Scope** — which pages/routes/flows. Default: exactly what's at the URL(s).
   - **Fidelity** — default pixel-perfect, pure emulation, mock data for demos.
   - **Backend depth** — how deep the documentation deliverable should go
     (UI-observable flows only, vs. inferred data model + API surface + auth).
   - Any **customizations** (the user may want the clone in a different brand,
     or merged from several sites).
4. **Offer the run-config choices** (these matter, and matter more once this
   skill is public — never hard-code them):
   - **Model tier** — *default Opus for Manager + Developer + Tester* (max
     fidelity). Offer **cost-optimized** (Sonnet workers, Haiku for mechanical
     extraction) and **ultra-cheap** for budget-conscious users. Use
     `AskUserQuestion`.
   - **Autonomy** — *default fully autonomous* (the loop runs to completion and
     reports). Offer **checkpoint-at-gates** (pause for sign-off on the Tester's
     verdict and before declaring done).
   - **Round cap** — max Dev→Tester rounds per section before escalating to the
     user (default 4). Prevents runaway spend.
5. **Decide if you have enough.** If anything is still ambiguous (a flow you
   can't reach, an unclear interaction, missing creds), ask now — before
   spending tokens. When you're set, confirm the plan back to the user in 3–5
   lines and begin.

Persist every answer into `state.json` (see `references/state-and-resume.md`) so
a resumed session starts from the same requirements without re-asking.

## Phase 1 — Recon & Foundation (you, with agent-browser

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Varalix-Digitech-Solutions](https://github.com/Varalix-Digitech-Solutions)
- **Source:** [Varalix-Digitech-Solutions/clone-team](https://github.com/Varalix-Digitech-Solutions/clone-team)
- **License:** MIT
- **Homepage:** https://claude.com/claude-code

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-varalix-digitech-solutions-clone-team-clone-team
- Seller: https://agentstack.voostack.com/s/varalix-digitech-solutions
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.