Replicate webpage skill

Replicate Webpage

Recreate the observable frontend experience of a reference URL in the user's codebase. Produce maintainable source code rather than embedding the original site or substituting a screenshot.

Establish Scope

1. Confirm the target URL and the pages or states in scope. If the user supplies one URL, implement that page and the states reachable through its visible interactions.
2. Identify requested substitutions for copy, names, images, colors, and branding. Preserve unspecified details.
3. Inspect the existing repository and reuse its framework, package manager, component conventions, and design tokens where practical.
4. Distinguish observable frontend behavior from private implementation. Reproduce visible outcomes; do not claim to reproduce an inaccessible backend, internal algorithm, or proprietary source code.

Apply Safety and Ownership Boundaries

• Proceed with ordinary public pages, user-owned pages, internal prototypes, and authorized references.
• Do not reproduce credential collection, payment capture, identity verification, deceptive login flows, malware delivery, or third-party analytics and tracking identifiers.
• Replace functional authentication or payment submission with an inert demo state unless the user provides an authorized backend integration.
• Do not copy secrets, session data, private APIs, personal data, hidden tokens, or access-control bypasses discovered during inspection.
• Prefer user-provided or reusable assets. If ownership is unclear, recreate the visual role with placeholders or original alternatives and state the substitution.

Inspect the Reference

Use the available browser inspection and screenshot tools. Read references/fidelity-checklist.md before implementation.

1. Capture the full page at desktop and mobile widths, plus tablet when layout changes materially.
2. Record typography, spacing, colors, radii, shadows, borders, icons, imagery, grid rules, sticky elements, and overflow behavior.
3. Exercise menus, tabs, accordions, dialogs, carousels, forms, hover/focus states, loading states, and meaningful transitions.
4. Inventory routes, repeated components, breakpoints, and visible content states.
5. Inspect public network behavior only when needed to understand observable data shapes. Do not duplicate private credentials, tracking calls, or protected endpoints.

Implement the Replica

1. Build semantic, accessible components that match the visual hierarchy.
2. Recreate responsive rules from observed layout changes instead of forcing one screenshot to scale.
3. Match fonts using legitimate local or web-font sources; choose the closest available fallback when the original font cannot be reused.
4. Store customizable text, names, and image references in a small content/config layer rather than scattering literals across components.
5. Reproduce visible interactions and motion, including keyboard and focus behavior where applicable.
6. Use local mock data for backend-dependent states unless an authorized integration is explicitly in scope.
7. Avoid iframes, page mirroring, screenshot backgrounds, and wholesale copied production bundles.

Verify and Iterate

1. Run the project's existing lint, typecheck, test, and build commands.
2. Open the local implementation at every captured viewport.
3. Compare reference and local screenshots section by section using the checklist.
4. Fix structural mismatches before polishing color or single-pixel differences.
5. Test all recreated interactions and confirm there are no console errors, broken assets, horizontal overflow, or dead controls.
6. Repeat until remaining differences are either negligible or caused by unavailable assets, fonts, dynamic data, or inaccessible backend behavior.

Report the Result

State:

• the implemented routes and interactions;
• the requested content or asset substitutions;
• the verification commands run;
• any remaining differences and their concrete causes.