fork-skill

name	fork-skill
description	Use only when the user provides a public or user-authorized webpage URL and asks Codex to clone, recreate, rebuild, reproduce, copy, mirror, fork the page UI, or create a one-to-one or high-fidelity frontend implementation in the current project. Trigger on Chinese requests such as 复刻, 仿站, 还原, 照着做, 克隆, 一比一实现, 高保真还原, and English requests such as clone, recreate, rebuild, reproduce, copy, mirror this webpage, one-to-one, pixel match, high-fidelity webpage implementation. The task must involve browser-visible frontend UI, responsive layout, assets, animations, interactions, or visual validation. Prefer ordinary coding, browser, docs, product-spec, or design-spec workflows for GitHub fork requests, website summaries, scraping or extraction, SEO and audit reports, screenshot analysis, backend or API cloning, product ideation, and brand-new UI design.
metadata	{"short-description":"Clone a webpage frontend from one URL"}

Fork Skill

Use this skill to reproduce a source webpage in the current project with visual and behavioral evidence. The target is a working frontend implementation, plus repeatable screenshots, DOM/style evidence, interaction evidence, and a validation report.

Trigger Gate

Proceed when all are true:

• The user provides a webpage URL or identifies the current browser page as the source.
• The request asks for a clone, recreation, rebuild, copy, mirror, fork, 复刻, 仿站, 还原, 照着做, 克隆, 一比一实现, or 高保真还原.
• The expected output is browser-visible frontend UI in the current project.

Route other work to the matching workflow when the primary task is a GitHub fork, website summary, content extraction, SEO or accessibility audit, screenshot explanation, backend/API implementation, product specification, UI/UX specification, or a new design request.

For ambiguous trigger decisions, read references/trigger-boundaries.md.

Default Contract

• Source: the provided URL.
• Target route: the current app's primary route, usually /.
• Fidelity: evidence-close, with desktop and mobile parity.
• Viewports: desktop=1440x900,mobile=390x844.
• Workspace: .fork-skill/.
• Evidence directory: .fork-skill/evidence/latest.
• Report directory: .fork-skill/reports/latest.
• Initial screenshot threshold: 0.02.
• Data strategy: static fixtures for browser-visible remote data.
• Source isolation strategy: visual and interaction output matches the source, while target code, runtime requests, links, metadata, data, fonts, scripts, and assets contain no source-site URLs. Third-party asset hosts require explicit validation allowlist entries and source-site hosts stay forbidden.

Ask the user when credentials, CAPTCHA, paywall permission, private content, or an irreversible operation is required.

References

Load references only when their condition applies:

• references/trigger-boundaries.md: read when intent is ambiguous or a request overlaps with other skills.
• references/evidence-and-validation.md: read when interpreting evidence artifacts, DevTools findings, validation output, acceptance, or final reporting.
• references/interactions.md: read when the source page has menus, forms, carousels, modals, tabs, accordions, media controls, route changes, drag/drop, or source/target selector differences.
• references/implementation-notes.md: read when matching assets, fonts, responsive behavior, animations, fixture data, accessibility, or project integration details.

Core Pipeline

1. Inspect the target project.

   • Read README, package files, route structure, app entry points, styling setup, and existing components.
   • Identify dev, build, lint, typecheck, test, and preview commands.
   • Use the repo's framework, package manager, routing, styling, icons, animation libraries, and component conventions.

2. Initialize the clone workspace.

node "$HOME/.codex/skills/fork-skill/scripts/one-link-init.mjs" --url <source-url>

• Add --domains host,cdn.host when mirrored assets live on extra domains.
• Read .fork-skill/runbook.json.
• Prefer generated runbook commands for source serving, capture, and validation.

3. Serve and capture the mirrored source.

   • Start the source mirror using serveSourceCommand from .fork-skill/runbook.json.
   • Capture source evidence using captureSourceCommand.
   • Use Chrome DevTools MCP for spot checks: screenshots, snapshots, computed styles, network requests, storage, interaction states, and animation traces.

4. Build the interaction matrix.

   • Start with generated .fork-skill/interactions.json.
   • Add visible, high-value flows discovered from DevTools and source evidence.
   • Read references/interactions.md when adding anything beyond scroll, hover, focus, or click.

5. Rebuild the page.

   • Keep implementation changes in product source files.
   • Keep evidence, mirrors, reports, and temporary files under .fork-skill/.
   • Copy visible source images, video posters, icons, and font files into the target project or public asset directory, then reference them through target-hosted paths.
   • Use project font setup, CSS imports already accepted by the project, and static fixtures for visible remote data.
   • Replace source-origin and source-CDN URLs in app code, CSS, links, metadata, inline styles, fixtures, and generated markup with local target URLs or target-owned values.
   • Use third-party remote hosts only when explicitly approved; never preserve source-site hosts as target dependencies or links.
   • Match visible text, primary media, layout, spacing, colors, typography, responsive behavior, animations, and interactive states.

6. Capture paired evidence and validate.

   • Run the target app with the repo's dev or preview command.
   • Run capturePairCommand from .fork-skill/runbook.json.
   • Run validateCommand from .fork-skill/runbook.json.
   • Open .fork-skill/reports/latest/report.md.
   • Fix the largest visible mismatch first, then repeat capture and validation.

7. Run project checks.

   • Run available format, lint, typecheck, test, and build commands that match the repo.
   • Keep a dev server running when the user needs a live URL.

Script Entrypoints

• scripts/one-link-init.mjs: mirror source, create .fork-skill/runbook.json, seed .fork-skill/interactions.json.
• scripts/mirror-source.mjs: run wget with page requisites and write .fork-skill/source/manifest.json.
• scripts/capture-evidence.mjs: capture source/target screenshots, DOM/style dumps, network logs, animation frames, and interaction before/after states.
• scripts/validate-evidence.mjs: compare screenshots, DOM/text drift, interaction success, runtime resource URLs, target source resource URLs, source-site references, and write .fork-skill/reports/latest/report.md.

When scripts report missing tools, install them in the target project:

npm install -D playwright pixelmatch pngjs
npx playwright install chromium
brew install wget

Acceptance Gate

A clone is ready when:

• Desktop and mobile source/target screenshots pass the chosen threshold, initially 0.02.
• Source-site reference audit passes: target runtime evidence and source files contain no source-site URLs in links, metadata, resources, APIs, data fixtures, generated markup, fonts, scripts, styles, or CSS URLs.
• Target resource URL audit passes: runtime requests and target source files show images, videos, posters, fonts, stylesheets, scripts, manifests, XHR, fetches, and CSS URLs resolving through the target app or an explicitly approved third-party host.
• Key interaction screenshots and result JSON files exist for source and target.
• Major animation sequences have captured frames or DevTools trace evidence.
• Visible text, primary media, navigation, calls to action, forms, and fixture-driven states match.
• Project checks pass, or the final report names any pre-existing failure with evidence.
• Remaining deltas are specific, visible, and justified.

Final Response

Include:

• Source URL.
• Local route or URL.
• Files changed.
• Validation command and report path.
• Viewports verified.
• Interactions verified.
• Remaining deltas with reasons.
• Dev server URL when running.