Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

replica-build (Screen-by-Screen Clone Builder)

Rebuilds a clone app from recon and design specs — shell first, then the core flow, then every screen with all its states — writing 100% fresh code under a clean-room rule.

Dev & CodingIntermediate★ 1,368⑂ 175AI score 9/10Last updated: Oct 3, 2026

What it does

  • Reads replica/recon.md, replica/architecture.md and replica/design/, then builds in four phases: app shell (routing, layout, tokens, seed data) → vertical slice of the core loop → screen by screen → build log.
  • For each screen it implements every state: empty, loading, filled, error, no permission, long content, mobile width.
  • Enforces baseline quality every time: semantic HTML, labeled inputs, keyboard reachability, visible focus, alt text.
  • Updates the clone column in features.csv, saves comparison screenshots to replica/clone-screens/S07.png, and makes one commit per screen.
  • Clean room rule: never paste the original's HTML/CSS/JS/SVG/images, never load from its domain or CDN, and write all copy fresh.

Who it's for

  • Frontend/fullstack developers rebuilding a referenced UX as their own product.
  • Solo devs and agencies working only from specs and screenshots who must ship complete screens.
  • Teams who want a checklist-driven UI build with no missing states or accessibility gaps.

Examples

  1. Say "start building" and it scaffolds the shell: routes for every screen in the inventory, layout, tokens wired in, seed data, then commits.
  2. For a booking app it first makes the loop work end to end — create event type, open public page, book a slot, see it on the dashboard — before polishing.
  3. Say "build screen S07" and it builds all states, checks 390px and 1440px, updates features.csv, saves the screenshot, and commits build: S07 booking page.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Jakeschincariol/replica-skill/HEAD/replica-build/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the replica-build folder from the GitHub repo Jakeschincariol/replica-skill into my ~/.claude/skills/replica-build/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Jakeschincariol/replica-skill.git /tmp/replica-skill && mkdir -p ~/.claude/skills && cp -r /tmp/replica-skill/replica-build ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/Jakeschincariol/replica-skill.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r replica-skill/replica-build ~/.claude/skills/ (also copy the sibling skills such as replica-recon, replica-design, replica-backend and replica-diff).
  5. Go to your project folder and run claude.
  6. Make sure the earlier phases produced replica/recon.md, replica/architecture.md and replica/design/.
  7. Trigger it with a request like "build the clone" or "build screen S07".
View source on GitHub ↗License: MIT