How to use the replica-build agent skill: install and run it

What the replica-build skill makes the agent do

The skill builds a functional clone of an existing app in a fixed order. It first sets up the shell: routing for every screen in the inventory, the layout with navigation, header and sidebar, the design tokens, and seed data so screens have something to show. It then builds the core loop end to end, before any other screen, so you can see the product working early. Ugly but working is the stated goal at that stage.

After the vertical slice, the agent works through the remaining screens one at a time. For each screen it reads the recon map, builds the screen with shared primitives, covers every state (empty, loading, filled, error, no permission, long content, mobile width), ticks off matching rows in replica/features.csv, saves a screenshot for diffing, and makes one commit per screen. It also keeps a build log in replica/build-log.md that records what is missing and what was harder than expected.

Understand the clean-room rule before you start

The skill is written as a clean-room rebuild. The agent must write every line of code, label, button, empty state and email itself. It must not paste the original's HTML, CSS, JavaScript, SVGs or images, must not load anything from the original's domain or CDN, and must not view the source and adapt it.

The skill also forbids digging into the original's code or network calls. When the agent is unsure how something works, it is told to use the product as a user would, for example by reading its help articles or public walkthroughs, and then build its own version of the behaviour.

Install the replica-build skill

Download the ZIP of the replica-build skill from this page. The package contains a single file, SKILL.md. Then choose one of two install routes.

For a personal install, unzip the file into ~/.claude/skills/ so the skill is available across your projects. For a single project, unzip it into the project's .claude/skills/ folder so it applies only there.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the ZIP there.

• Personal: unzip into ~/.claude/skills/
• Single project: unzip into .claude/skills/ inside the project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Prepare the inputs the skill expects

The skill does not work standalone. It reads files that must already exist in your project: replica/recon.md (the recon map), replica/architecture.md (the architecture notes) and the replica/design/ folder (design specs). These usually come from companion skills, and the workflow refers to replica-design, replica-backend and replica-test as well.

You also need Git, because the skill makes one commit per screen. Screenshot tooling is needed to save images into replica/clone-screens/ so that screens can be compared against the reference.

• replica/recon.md must exist
• replica/architecture.md must exist
• replica/design/ must exist
• Git, for per-screen commits
• Screenshot tooling, to save images to replica/clone-screens/

Trigger the skill with natural requests

You do not need to type a special command to start it. The skill is designed to activate when you use phrases like these: build the clone, build screen S07, start building, rebuild this screen, implement the booking page, or after running /replica-design. Plain wording like these is enough, and you can name a screen by its ID from the recon map.

Ask for a single screen when you want to iterate on one part. Ask for a full build when you want the agent to start from the shell and work down the architecture order.

• "Start building the clone."
• "Build screen S07."
• "Rebuild this screen: the booking page."
• "Implement the booking page."

Read the output and track progress

At the end of a session the agent reports the screens built, the feature matrix changes, the screenshots saved, and a summary of screens done out of total and must-haves done out of total. It also says what is next, and may point you to /replica-backend if the data layer is still fake, or to /replica-test otherwise.

Check replica/build-log.md when you return to a project. It lists each screen with its status, what is missing, and any feature that turned out bigger than expected. The skill is written so that partial work is reported rather than hidden.

Safety notes: scripts and network

According to the skill's listing, replica-build runs no scripts and makes no network calls. It works by reading your local specs and writing code and notes into your project. The clean-room rules also prohibit fetching or copying code, assets or copy from the original product.

Review the generated code and commits as you would for any agent output, and keep the Git history so you can see exactly what changed for each screen.