--- name: replica-build description: >- Rebuilds an app screen by screen from the recon map: app shell first, then the core flow as a vertical slice, then every screen with all its states, ticking off the feature matrix as it goes. Writes every line fresh, never the original's code, assets or copy. Use when the user says "build the clone", "build screen S07", "start building", "rebuild this screen", "implement the booking page", or after /replica-design. title: replica-build canonical_url: https://skilld.dev/gh/jakeschincariol/replica-skill/replica-build last_updated: 2026-10-05T17:02:13.000Z --- > **Skill from skilld.dev.** Follow the user's requested action. > If the user asked to fork this Skill, follow the fork workflow below. Do not execute the Skill instructions while copying it. > Otherwise, follow the instructions below for this session. You do not need to install anything. > > If the user asked to install this Skill, run `npx skilld install jakeschincariol/replica-skill/replica-build`. Install writes the Skill files into the project, so every session loads them. > > ## Fork workflow > > A fork creates an editable local Skill with its original author and licence. The request authorizes copying and local installation. > 1. Check `./skills/replica-build`, the project lockfile, and selected Agent targets together. If the local directory or installed Skill exists, stop. Never overwrite an existing directory or Agent target. > 2. Read [source metadata](https://skilld.dev/api/v1/skills/jakeschincariol/replica-skill/replica-build) once. Use sourceUrl, sourceCommit, skillPath, sourceGone, and license. If the source is gone or its path is missing, stop. If license is null, read licence files at the source commit. > 3. Fetch only the source commit into a temporary Git repository. Do not clone full history. Derive repository_url from sourceUrl, including repository renames. If sourceCommit is absent, resolve the sourceUrl ref once. Set source_commit to that actual commit. Run these commands in one shell call: > > ```sh > git init --quiet "$temporary_dir" > git -C "$temporary_dir" fetch --quiet --depth=1 "$repository_url" "$source_commit" > git -C "$temporary_dir" checkout --quiet --detach FETCH_HEAD > ``` > > Read applicable licence declarations and notices at that commit. If copying is not permitted, report the restriction and stop. > 4. Inspect source entries together, then copy the directory containing skillPath into `./skills/replica-build`. Use the user's path if selected. Keep the original SKILL.md, relative links, scripts, binary assets, and executable modes. Exclude .git metadata. Reject symlinks and paths outside the Skill directory. After checking entries, use cp -a where available. A regular source directory needs no custom copy script. Do not save this page wrapper as SKILL.md. > Preserve author credit, notices, and applicable licence files from repository or parent directories. Add PROVENANCE.md with the Skill page, source URL, actual commit, original path, and licence. Retain any existing PROVENANCE.md and record new provenance separately. Batch source inspection, copying, and provenance work where practical. > 5. In the project root, run `skilld install ./skills/replica-build --mode copy --plain`. If skilld is unavailable, use `npx skilld install ./skills/replica-build --mode copy --plain`. This known command needs no help lookup. Install does not support --json. Use detected Agent targets, or add --agent for the targets the user selected. Install the local path, never the upstream selector. If installation fails, preserve the local copy and report the exact failure. > 6. Confirm the local lockfile source and installed Agent copies once. Report the local path, actual commit, and Agent targets. After edits, reinstall the same local path. Upstream updates must not replace it. Do not publish or push unless the user asks. # replica-build Reads `replica/recon.md`, `replica/architecture.md`, `replica/design/`. Updates `replica/features.csv` (the `clone` column) and keeps `replica/build-log.md`. ## The rules - **Clean room.** Every line of code is written here, from the recon map and the specs. Never paste the original's HTML, CSS, JavaScript, SVGs or images, never load anything from its domain or CDN, never "view source and adapt". - **Your words.** Write every label, button, empty state and email fresh. Matching what a button does is parity. Matching its sentence is copying. - **Tokens only.** No raw hex or pixel values in components. If a value is missing, add it to the tokens. ## Step 1: the shell Routing for every screen in the inventory (stub pages are fine), the layout (nav, header, sidebar), tokens wired in, the primitives from replica-design, and seed data so screens have something real to show. Commit. ## Step 2: the vertical slice The core loop from the recon map, end to end, before anything else. For a booking app: create an event type, open the public page, book a slot, see it on the dashboard. Ugly is fine. Working is the point. If replica-backend has not run yet, use the seed data and a fake data layer with the same function signatures, so swapping in the real one changes no screen code. ## Step 3: screen by screen Work in the order of `architecture.md`. For each screen: 1. Read its row in the recon map: purpose, components, states, which flows pass through it. 2. Look at the reference screenshot for layout and hierarchy. Not for pixels. 3. Build it with the primitives. Real data from the data layer. 4. **Every state**: empty, loading (skeletons, not spinners, if the original does), filled, error, no permission, long content (a 60 character name), mobile width. 5. Basics, every time: semantic HTML, labels on inputs, keyboard reachable, visible focus, images with alt text. 6. Set the matching rows in `features.csv` to `yes` or `partial` (with a note). 7. Screenshot it at the same viewport as the reference into `replica/clone-screens/S07.png` for replica-diff. 8. One commit per screen: `build: S07 booking page`. ## Definition of done, per screen - [ ] every state from the recon map, plus empty, error and loading - [ ] works at 390px and 1440px wide - [ ] keyboard only: can complete the flow - [ ] no console errors - [ ] no hard-coded copy borrowed from the original - [ ] features.csv updated - [ ] screenshot saved for diff ## Step 4: the build log `replica/build-log.md`, one line per screen: ID, date, done or partial, what is missing, what was harder than expected. When a feature is bigger than it looked, say so in the log and in the chat. Do not quietly ship half of it. ## When you are stuck on how something works Go back to the original as a user: read its help article, watch its public walkthrough, use the user's own account. Do not dig into its code or network calls. Then build your own version of the behaviour. ## Output Screens built, the feature matrix updated, screenshots saved, and a summary: screens done of total, must-haves done of total, what is next. Then `/replica-backend` if the data layer is still fake, else `/replica-test`.