{"id":49918900,"url":"https://github.com/leosssvip-dot/website-replication-skill","last_synced_at":"2026-05-20T22:00:47.406Z","repository":{"id":358001811,"uuid":"1238551377","full_name":"leosssvip-dot/website-replication-skill","owner":"leosssvip-dot","description":"Skill for Claude Code / OpenAI Codex: audit a reference site and produce a differentiated parity plan (UI, interactions, API, data, architecture).","archived":false,"fork":false,"pushed_at":"2026-05-15T13:50:15.000Z","size":125,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-16T18:39:01.194Z","etag":null,"topics":["browser-automation","claude-agent-skill","claude-code-skill","competitive-analysis","feature-parity","openai-codex-skill","ui-replication","web-audit"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leosssvip-dot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-14T08:14:30.000Z","updated_at":"2026-05-15T13:50:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/leosssvip-dot/website-replication-skill","commit_stats":null,"previous_names":["leosssvip-dot/website-replication-skill"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/leosssvip-dot/website-replication-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leosssvip-dot%2Fwebsite-replication-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leosssvip-dot%2Fwebsite-replication-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leosssvip-dot%2Fwebsite-replication-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leosssvip-dot%2Fwebsite-replication-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leosssvip-dot","download_url":"https://codeload.github.com/leosssvip-dot/website-replication-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leosssvip-dot%2Fwebsite-replication-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33151625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-automation","claude-agent-skill","claude-code-skill","competitive-analysis","feature-parity","openai-codex-skill","ui-replication","web-audit"],"created_at":"2026-05-16T18:18:36.524Z","updated_at":"2026-05-17T19:01:09.183Z","avatar_url":"https://github.com/leosssvip-dot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# website-replication-skill\n\n\u003e [English](#english) · [中文](#中文)\n\nAn **agent-harness-agnostic** skill that audits any reference website or web app and produces a *differentiated parity plan* across UI, interactions, API contracts, data model, and architecture — without copying protected expression. Tested on **Claude Code** and **OpenAI Codex**; any harness that loads markdown skills and exposes file + browser MCP tools can run it.\n\n---\n\n## English\n\n### Overview\n\n**Typical uses**: benchmarking a competitor · replicating a legacy version of your own product · learning behavior from a partner integration · auditing an inspiration source.\n\n**Status**: stable templates · domain-agnostic · works for SaaS, e-commerce, content, collaboration, AI tools, marketplaces, and internal tools.\n\n### What This Skill Replicates — and What It Does NOT\n\n\u003e **Read this before installing.** The word *replication* in the name routinely gets misread as \"1:1 visual clone\". It is not.\n\n**Replicates** (product behavior parity):\n\n- Workflow logic and step sequences\n- Field structure, form composition, validation rules\n- State transitions (loading, success, error, gated, paid)\n- Interaction patterns (what each button does, what each menu reveals)\n- API capability mapping (endpoints, payload shape, async patterns)\n- Data model and entity relationships\n\n**Does NOT pixel-clone** (intentionally, by design):\n\n- Logos, brand marks, distinctive iconography\n- Exact verbatim copy / wording\n- Distinctive page composition and visual rhythm\n- The reference site's specific color palette, typography, spacing values, radius scale\n- Proprietary imagery, illustrations, photography\n- Class names, design-system tokens (extracted only as *reference*, not as values to paste)\n\nIf you expect the output to *look* like the reference site — same colors, same fonts, near-identical layout — **the skill will not give you that, and that is the correct behavior**. Every workflow step pushes the result toward your target product's own brand: HTML/CSS examples use *your* tokens, `design-tokens.js` outputs are reference material (not values to paste), the `Differentiation preference` knob's three options all preserve some level of intentional visual difference.\n\n**Why**: trademark, trade dress, and the \"look and feel\" doctrine make pixel-cloning a real legal exposure. The skill treats that risk as the user's, not its own, and refuses to amplify it. See *Ethics \u0026 Legal* below.\n\n**If you genuinely need higher visual fidelity** (internal clone of your own legacy product, partner integration where contracts permit it, you have explicit license), open an issue. A future `visual-fidelity-priority` mode may be added under explicit IP-risk acknowledgement, but the safe default will remain behavior-only.\n\n### Ethics \u0026 Legal\n\nThis skill replicates **product behavior** (workflows, field structure, state handling, API capability mapping). It does **not** authorize you to:\n\n- Copy logos, exact copy, proprietary assets, or distinctive page composition.\n- Bypass authentication, paywalls, rate limits, robots restrictions, or technical protections.\n- Substitute for legal advice on trademark, patent, copyright, or Terms-of-Service compliance.\n\nUsers are responsible for their own IP, ToS, jurisdiction, and ethics review. Treat the output as engineering planning material, not legal opinion.\n\nThe skill enforces **evidence redaction**: cookies, auth headers, tokens, customer data, private message contents, account identifiers, and one-time URLs must never be saved or shared in reports.\n\n### Dependencies\n\nThe skill replicates not just UI but **interactions** — buttons, tab switches, mode toggles, async results, error states. That requires a browser automation layer. The agent auto-detects whatever is available and degrades gracefully.\n\n#### Required (at least one browser automation tool)\n\nWithout one of these, the skill falls back to static HTML fetch and **every interaction is marked `inferred`** rather than `observed`.\n\n| Tool | Purpose | Install |\n|---|---|---|\n| **Chrome MCP** (`Claude_in_Chrome`) | Click, screenshot, DOM read, network capture in a real Chrome session | Configure per the Claude-in-Chrome project's published setup steps |\n| **Playwright MCP** | Headless / headed browser automation, multi-browser | Microsoft Playwright MCP — install per [microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp) |\n| **Claude Preview** (`Claude_Preview`) | Sandboxed preview environment with click / eval / screenshot / network | MCP server provided with Claude Code; enable in MCP settings |\n\n#### Recommended (optional, improves coverage)\n\n| Tool | Purpose |\n|---|---|\n| **Mobile MCP** (`mobile-mcp`) | Real device or simulator screenshots for mobile parity; otherwise DevTools responsive mode is used and findings are marked `inferred` |\n| **WebFetch** / **web-reader MCP** | Reading official product docs, API references, changelogs |\n| **WebSearch** | Locating docs, integration guides, status pages when URLs are unknown |\n| **`curl`** | Unauthenticated endpoint probing when an MCP is not configured |\n\n#### Runtime\n\n- **Claude Code** ≥ current stable, or **OpenAI Codex CLI / IDE** with skills enabled.\n- Filesystem write access to the evidence directory (default `./audit/`).\n\n### Repository layout\n\n```\nwebsite-replication-skill/\n├── SKILL.md                          # Entry point — agent loads this first\n├── agents/\n│   └── openai.yaml                   # OpenAI Codex skill metadata\n├── references/\n│   ├── output-template.md            # Implementation-ready deliverable\n│   ├── quick-audit-template.md       # ≤1h single-page/workflow audit\n│   └── parity-checklist.md           # Coverage self-check\n├── examples/\n│   └── sample-audit.md               # Fictional walkthrough (no real data)\n├── LICENSE                           # MIT\n├── .gitignore\n└── README.md\n```\n\n### Install\n\n#### Claude Code\n\n```bash\nmkdir -p ~/.claude/skills\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  ~/.claude/skills/website-replication-skill\n```\n\n\u003e Prefer to customize? Fork the repo and substitute your fork's URL.\n\nTrigger by asking Claude something like \"audit this site and produce a parity plan\", or invoke explicitly via the skill picker.\n\n#### OpenAI Codex\n\n```bash\nmkdir -p ~/.codex/skills\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  ~/.codex/skills/website-replication-skill\n```\n\n\u003e Prefer to customize? Fork the repo and substitute your fork's URL.\n\nIn Codex CLI / IDE, type `$website-replication-skill` to invoke explicitly. Implicit invocation is enabled via `agents/openai.yaml`.\n\n#### Other agent harnesses\n\nThe skill is plain markdown + a JS enumeration script + a YAML manifest — no harness-specific runtime. Any agent that can:\n\n1. Load markdown files as system / skill context (so `SKILL.md` reaches the model)\n2. Read / write files (so `MANIFEST.md`, inventories, and reports persist)\n3. Call a browser automation MCP (Chrome MCP / Playwright MCP / equivalent)\n\n…can run it. Copy or symlink this directory into wherever your harness expects skills:\n\n```bash\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  \u003cyour-harness-skill-dir\u003e/website-replication-skill\n```\n\nTested concretely on Claude Code and OpenAI Codex. Other harnesses are expected to work but have not been verified — please open an issue with results if you try one.\n\n#### Project-scoped install\n\nDrop the directory under `.claude/skills/` or `.codex/skills/` (or your harness's equivalent) inside a specific repo to make the skill available only for that project.\n\n### Usage\n\n#### Minimum inputs the skill will ask for\n\n- Reference site URL(s) and scope (which pages, tabs, modes).\n- Existing codebase path (if rebuilding into a repo) — optional.\n- Existing API or integration docs — optional.\n- Differentiation preference: `workflow parity with original style` / `same features with target design system` / `research only`.\n\nIf any are missing, the skill proceeds with explicit assumptions and marks unknowns rather than blocking.\n\n#### Picking a template\n\n| Situation | Template |\n|---|---|\n| ≤ 1h, single page or single workflow | [references/quick-audit-template.md](references/quick-audit-template.md) |\n| Implementation-ready audit with API / data / architecture plan | [references/output-template.md](references/output-template.md) |\n| Coverage self-check during / after either of the above | [references/parity-checklist.md](references/parity-checklist.md) |\n\n#### Default evidence directory\n\nScreenshots, DOM dumps, network logs, and the final report go to `./audit/\u003csite-slug\u003e/\u003cYYYY-MM-DD\u003e/` unless you specify another path. `audit/` is `.gitignore`'d — never commit real audit evidence.\n\n### Claim taxonomy\n\nEvery claim in a report is tagged:\n\n- `observed` — directly seen via interaction or network capture.\n- `documented` — found in official API / product docs.\n- `inferred` — reasonable deduction from partial evidence.\n- `blocked` — would require paid / authenticated access that is unavailable.\n- `not applicable` — does not apply to this competitor's product category.\n\nThis is the single most important contract of the skill: do not let the agent silently flatten these into \"facts\".\n\n### Contributing\n\nPull requests welcome, especially:\n\n- New product-category data-model examples for [output-template.md §7 Data Model](references/output-template.md#7-data-model).\n- Real (fully redacted) sample audits under `examples/`.\n- Translations of SKILL.md / templates.\n\nPlease do **not** submit:\n\n- Sample audits containing real customer data, auth tokens, or non-redacted screenshots.\n- Examples that copy competitor logos, distinctive composition, or exact copy.\n- Changes that remove the evidence-safety or out-of-scope sections.\n\n### License\n\n[MIT](LICENSE) © 2026 Fred\n\n---\n\n## 中文\n\n### 简介\n\n**与 agent harness 无关**的 skill，可在任意支持加载 markdown skill + 浏览器 MCP 工具的 agent 框架里运行。已在 **Claude Code** 与 **OpenAI Codex** 上实测；其它符合条件的框架（参考下方 \"Other agent harnesses\" 段三条要求）按 symlink 或 copy 引入即可——是否真的兼容请自行验证后反馈。\n\n用于审计任意参考网站或 Web 应用，产出一份覆盖 UI、交互、API 契约、数据模型、架构的**差异化对等实施方案** —— 而不复制受保护的表达。\n\n**典型场景**：竞品对标 · 复刻自家旧版产品 · 学习合作方集成行为 · 审计灵感来源。\n\n**状态**：模板已稳定 · 不绑定具体行业 · 适用 SaaS、电商、内容、协作、AI 工具、Marketplace、内部工具。\n\n### 这个 skill 复刻什么、不复刻什么\n\n\u003e **安装前请先读这段。** 名字里 \"replication\" 经常被误读成\"像素级 1:1 克隆\"。不是。\n\n**会复刻**（产品行为对等）：\n\n- 工作流逻辑与步骤顺序\n- 字段结构、表单组成、validation 规则\n- 状态切换（loading / success / error / gated / paid）\n- 交互模式（每个按钮做什么、每个菜单展开什么）\n- API 能力映射（endpoint、payload 形状、异步模式）\n- 数据模型与实体关系\n\n**不会做视觉 1:1 克隆**（**故意的设计选择**）：\n\n- logo、品牌标识、独特图标\n- 一字不差的原文文案\n- 独创性页面构图、视觉节奏\n- 参考站独特的配色、字体、间距值、圆角 scale\n- 专有插画、摄影、图像\n- class 名、设计系统 tokens（只作为**参考**抽取，不是直接套用的值）\n\n如果你期待产出**看上去**像参考站（同色、同字体、版式接近），**skill 不会给你这个，而这正是正确行为**。所有工作流步骤都把结果推向你自己产品的品牌：HTML/CSS 示例用*你的* tokens，`design-tokens.js` 输出是参考材料（不是直接套用的值），`Differentiation preference` 三个选项都保留某种程度的有意视觉差异。\n\n**为什么**：商标、商业外观（trade dress）、\"look and feel\"原则让像素级克隆面临真实诉讼风险。skill 把这个风险视为用户自担，并拒绝放大它。详见下方*法律与伦理*段。\n\n**如果你确实需要更高视觉保真度**（内部复刻自家旧版、合同明确允许的合作方集成、有显式授权），开 issue。未来可能加 `visual-fidelity-priority` 模式，但需要使用者书面承担 IP 风险责任；**默认值仍是行为级复刻**。\n\n### 法律与伦理\n\n本 skill 复刻的是**产品行为**（工作流、字段结构、状态处理、API 能力映射），**不授权**你做以下事情：\n\n- 复制 logo、原文文案、专有资产或具有独创性的页面构图。\n- 绕过登录、付费墙、限流、robots 限制或任何技术保护措施。\n- 替代关于商标、专利、版权或 ToS 合规的法律意见。\n\n知识产权、ToS、司法管辖区与伦理审查由用户自行负责。skill 输出物是工程规划材料，不是法律意见。\n\nskill 强制执行**证据脱敏**：cookies、auth headers、tokens、客户数据、私信内容、账号标识、一次性 URL 一律不得保存或写入报告。\n\n### 依赖\n\n本 skill 不只复刻 UI，还要复刻**交互** —— 按钮、tab 切换、mode toggle、异步结果、错误状态。这需要浏览器自动化能力。Agent 会自动检测当前可用工具并优雅降级。\n\n#### 必需依赖（浏览器自动化工具，至少装一个）\n\n如果一个都没有，skill 会回退到纯静态 HTML 抓取，**所有交互一律标 `inferred`**，不再是 `observed`。\n\n| 工具 | 用途 | 安装 |\n|---|---|---|\n| **Chrome MCP**（`Claude_in_Chrome`） | 在真实 Chrome 会话里点击、截图、读取 DOM、抓网络请求 | 按 Claude-in-Chrome 项目官方说明配置 |\n| **Playwright MCP** | Headless / headed 浏览器自动化，多浏览器 | 微软官方 Playwright MCP，按 [microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp) 说明安装 |\n| **Claude Preview**（`Claude_Preview`） | 沙箱预览环境，支持 click / eval / screenshot / network | Claude Code 附带的 MCP server，在 MCP 设置里启用 |\n\n#### 推荐依赖（可选，覆盖更全）\n\n| 工具 | 用途 |\n|---|---|\n| **Mobile MCP**（`mobile-mcp`） | 真机或模拟器移动端截图；没有就退到 DevTools 响应式模式，相关结论标 `inferred` |\n| **WebFetch** / **web-reader MCP** | 读官方产品文档、API reference、changelog |\n| **WebSearch** | URL 未知时查文档、集成指南、状态页 |\n| **`curl`** | 未配置 MCP 时探测无需鉴权的接口 |\n\n#### 运行环境\n\n- **Claude Code** ≥ 当前 stable，或启用 skill 的 **OpenAI Codex CLI / IDE**。\n- 对证据目录（默认 `./audit/`）的可写权限。\n\n### 目录结构\n\n```\nwebsite-replication-skill/\n├── SKILL.md                          # Agent 入口，最先加载\n├── agents/\n│   └── openai.yaml                   # OpenAI Codex skill 元数据\n├── references/\n│   ├── output-template.md            # 可落地的完整交付模板\n│   ├── quick-audit-template.md       # ≤1h 单页 / 单流程审计\n│   └── parity-checklist.md           # 覆盖度自检清单\n├── examples/\n│   └── sample-audit.md               # 虚构样例（无真实数据）\n├── LICENSE                           # MIT\n├── .gitignore\n└── README.md\n```\n\n### 安装\n\n#### Claude Code\n\n```bash\nmkdir -p ~/.claude/skills\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  ~/.claude/skills/website-replication-skill\n```\n\n\u003e 想自定义？fork 后用你自己仓库的 URL 替换上面的地址即可。\n\n之后向 Claude 说\"audit 这个网站，产出 parity plan\"之类的话即可触发；也可在 skill picker 中显式调用。\n\n#### OpenAI Codex\n\n```bash\nmkdir -p ~/.codex/skills\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  ~/.codex/skills/website-replication-skill\n```\n\n\u003e 想自定义？fork 后用你自己仓库的 URL 替换上面的地址即可。\n\n在 Codex CLI / IDE 输入 `$website-replication-skill` 显式调用。隐式调用由 `agents/openai.yaml` 启用。\n\n#### 其它 agent 框架\n\nSkill 本体是纯 markdown + JS 枚举脚本 + YAML manifest，没有 harness 专属 runtime。只要你的 agent 能：\n\n1. 把 markdown 文件作为 system / skill 上下文加载（让 `SKILL.md` 能被模型读到）\n2. 读写文件（让 `MANIFEST.md`、inventory、报告能持久化）\n3. 调用浏览器自动化 MCP（Chrome MCP / Playwright MCP / 同类）\n\n就能跑。把目录 clone / symlink 到 harness 期望的 skill 目录即可：\n\n```bash\ngit clone https://github.com/leosssvip-dot/website-replication-skill.git \\\n  \u003c你的-harness-skill-目录\u003e/website-replication-skill\n```\n\nClaude Code 与 OpenAI Codex 已实测可用；其它 harness 预期可用但未验证 —— 跑通了欢迎开 issue 反馈。\n\n#### 项目级安装\n\n把目录放进具体仓库的 `.claude/skills/` 或 `.codex/skills/`（或你 harness 的等价目录），skill 只在该项目下可用。\n\n### 使用\n\n#### Skill 会问的最少输入\n\n- 参考站 URL 与范围（页面 / tab / mode）。\n- 现有代码仓库路径（重建时）— 可选。\n- 现有 API 或集成文档 — 可选。\n- 差异化偏好：`workflow parity with original style` / `same features with target design system` / `research only`。\n\n缺项时不阻塞，skill 会显式标注假设并标记未知项。\n\n#### 模板选择\n\n| 场景 | 模板 |\n|---|---|\n| ≤ 1h，单页或单流程 | [references/quick-audit-template.md](references/quick-audit-template.md) |\n| 含 API / 数据 / 架构的可落地审计 | [references/output-template.md](references/output-template.md) |\n| 上述过程中 / 之后做覆盖度自检 | [references/parity-checklist.md](references/parity-checklist.md) |\n\n#### 默认证据目录\n\n截图、DOM、网络日志、最终报告写入 `./audit/\u003csite-slug\u003e/\u003cYYYY-MM-DD\u003e/`，除非你指定其他路径。`audit/` 默认在 `.gitignore` 内，**真实证据不要提交到仓库**。\n\n### Claim 分级体系\n\n报告里每条结论都打标签：\n\n- `observed` —— 通过交互或网络抓包直接看到的。\n- `documented` —— 官方 API / 产品文档里写明的。\n- `inferred` —— 从局部证据合理推断的。\n- `blocked` —— 需要付费 / 鉴权访问而当前不可达的。\n- `not applicable` —— 该竞品品类不适用。\n\n这是 skill 最重要的契约：**不允许 agent 把它们偷偷合并为\"事实\"**。\n\n### 贡献\n\n欢迎 PR，尤其是：\n\n- 给 [output-template.md §7 Data Model](references/output-template.md#7-data-model) 补新品类的数据模型样例。\n- 在 `examples/` 下提交**完全脱敏**的真实审计样例。\n- SKILL.md / 模板的多语言翻译。\n\n请**不要**提交：\n\n- 含真实客户数据、auth token、未脱敏截图的样例。\n- 复制了竞品 logo、独创性构图或原文文案的样例。\n- 删除证据安全或 out-of-scope 章节的改动。\n\n### 许可证\n\n[MIT](LICENSE) © 2026 Fred\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleosssvip-dot%2Fwebsite-replication-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleosssvip-dot%2Fwebsite-replication-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleosssvip-dot%2Fwebsite-replication-skill/lists"}