Communitygithub.com

silasroliver-hue/replica-skill-cursor

根據重構映射表,逐畫面重建應用程式:先建立應用程式殼層,再以垂直切片方式實現核心流程,然後逐一構建每個畫面及其所有狀態,並同步更新功能矩陣。所有程式碼皆為全新撰寫,不複製原始專案的程式碼、素材或文字。

replica-skill-cursor 是什麼?

replica-build 是一個為 AI 代理(如 Claude Code、Cursor、Codex)設計的技能,用於從頭開始重建螢幕畫面式應用程式。它採用嚴格的「潔淨室」(clean room)方法:所有程式碼均根據重構映射表(recon map)和規格文件全新撰寫,絕不拷貝原始專案的 HTML、CSS、JavaScript、SVG、圖片或任何網路請求。此技能支援逐步建構流程:先建立包含路由、佈局和代幣(tokens)的應用程式殼層(shell);再實現一個端到端的垂直切片(vertical slice)以驗證核心流程;最後逐一構建每個畫面,並確保涵蓋所有狀態(空、載入、錯誤、無權限、行動版寬度等)。過程中,它會同步更新 `features.csv` 的功能矩陣,並為每個畫面儲存螢幕截圖,以便後續比對。此外,`replica-build` 會維護 `replica/build-log.md` 日誌,記錄每個畫面的完成狀態與遇到的挑戰,若在實作過程中遇到困難,它會建議以使用者身份參考原始應用的公開說明或操作流程。這個技能特別適合在用戶提出「建立克隆」、「建立螢幕 S07」、「開始建構」或「重構此畫面」等指示時使用。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/silasroliver-hue/replica-skill-cursor/tree/HEAD/.cursor/skills/replica-build

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

replica-build

讀取 replica/recon.md、replica/architecture.md、replica/design/。 更新 replica/features.csv(clone 欄位)並維護 replica/build-log.md。

規則

  • 潔淨室。 每一行程式碼都在這裡根據重構映射表和規格文件撰寫。絕不貼上原始專案的 HTML、CSS、JavaScript、SVG 或圖片,絕不從其網域或 CDN 載入任何內容,絕不「檢視原始碼並改編」。
  • 你的文字。 每個標籤、按鈕、空狀態和電子郵件都重新撰寫。功能一致是等效,複製句子是抄襲。
  • 僅用代幣。 元件內不得使用原始十六進位或像素值。若某個值缺失,請將其加入代幣中。

步驟 1:殼層

為盤點清單中的每個畫面建立路由(暫存頁面也可以),佈局(導航列、頁首、側邊欄)、代幣已串接、來自 replica-design 的基礎元件,以及種子資料,讓畫面有實際內容可顯示。提交。

步驟 2:垂直切片

在進行其他工作之前,先完成重構映射表中的核心循環,端到端。以預約應用程式為例:建立活動類型、開啟公開頁面、預約時段、在儀表板上查看結果。難看沒關係,能運作才是重點。若 replica-backend 尚未執行,請使用種子資料和一個具有相同函式簽章的虛擬資料層,以便日後切換為真實資料層時無需修改任何畫面程式碼。

步驟 3:逐一畫面

依照 architecture.md 的順序進行。對於每個畫面:

  1. 讀取其在重構映射表中的資料列:用途、元件、狀態、哪些流程經過此畫面。
  2. 查看參考螢幕截圖,了解佈局和層級結構,而非像素細節。
  3. 使用基礎元件進行建構,並從資料層取得真實資料。
  4. 每個狀態:空、載入(若原始畫面這麼做,請使用骨架而非轉圈動畫)、有資料、錯誤、無權限、長內容(例如一個 60 個字元的名稱)、行動版寬度。
  5. 每次都要做到的基本事項:語意化 HTML、輸入框標籤、可使用鍵盤操作、可見的焦點指示器、附有替代文字的圖片。
  6. 將 features.csv 中對應的資料列設為 yes 或 partial(並加上備註)。
  7. 使用與參考畫面相同的視窗尺寸截取螢幕截圖,儲存至 replica/clone-screens/S07.png,供 replica-diff 使用。
  8. 每個畫面一個提交:build: S07 booking page。

每個畫面的完成條件

  • 重構映射表中的所有狀態,加上空、錯誤和載入狀態
  • 在 390px 和 1440px 寬度下正常運作
  • 僅使用鍵盤即可完成流程
  • 無主控台錯誤
  • 無從原始畫面借用的硬編碼文字
  • features.csv 已更新
  • 已儲存螢幕截圖以供比對

步驟 4:建構日誌

replica/build-log.md,每個畫面一行:ID、日期、完成或部分完成、缺少什麼、比預期困難的部分。當某個功能比表面上看起來更龐大時,請在日誌和對話中說明。不要默默交付完成一半的功能。

當你卡在某個功能的運作方式時

以使用者身份回到原始應用:閱讀其說明文件、觀看其公開操作流程、使用用戶自己的帳號。不要深入研究其程式碼或網路請求。然後建立你自己的行為版本。

輸出

已建構的畫面、已更新的功能矩陣、已儲存的螢幕截圖,以及一份摘要:已完成畫面數/總畫面數、已完成必要功能數/總必要功能數、下一步。接著請執行 /replica-backend(若資料層仍是模擬的),否則執行 /replica-test。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

silasroliver-hue/replica-skill-cursor

>- Plans the stack, database schema and API for an app clone, from the recon map replica-recon wrote. Picks boring, managed tech, turns the inferred data model into real SQL with indexes and access rules, lists every route by flow, and orders the build as a thin vertical slice first. Use when the user says "plan the clone", "what stack should I use", "design the database", "write the schema", "plan the API", "architecture for my version of X", or after /replica-recon finishes.

silasroliver-hue/replica-skill-cursor

>- Builds the backend of an app clone: auth, database migrations and access rules, payments with Stripe, email, background jobs and third-party integrations through official APIs only, plus a security checklist. Use when the user says "add login", "set up auth", "wire up the database", "add payments", "connect Stripe", "add Google Calendar", "send emails", "backend for my clone", or when /replica-build is running on fake data.

silasroliver-hue/replica-skill-cursor

>- Names and rebrands an app clone so it is the user's own: name candidates with the trademark, domain, store and handle checks to run, a new palette checked for contrast, a logo brief, a voice guide, and a sweep tool that finds anything of the original left in the codebase. Use when the user says "name my app", "rebrand the clone", "make it mine", "pick a name and colours", "logo brief", "brand voice", "check for leftovers", or after /replica-entrepreneur. Always runs before /replica-launch.

silasroliver-hue/replica-skill-cursor

>- Ships an app clone live on the user's own domain: a preflight gate (tests green, parity must-haves done, rebrand sweep clean, listing linted, legal pages up), production database and env vars, the host, DNS records for the domain and for email, Stripe live mode, OAuth redirects, monitoring, and mobile builds to TestFlight and Play. Use when the user says "deploy it", "ship it", "put it live", "connect my domain", "go to production", "publish the app", or after /replica-launch.

相關技能