website-cloner

Clone any website with pixel-perfect fidelity using specialized sub-agents

Use this agent when you need to implement a pixel-perfect website clone from reference screenshots, extracted styles, and assets. This agent is ideal when you have a context.md file with extracted design specifications, screenshots of the target website, and downloaded assets in the public folder. It detects your project type (Next.js, TanStack Start, Vite, etc.) and generates appropriate React components using Tailwind CSS and motion for animations. Examples: <example> Context: User has prepared website cloning materials and wants to start implementation. user: "I've extracted all the styles and screenshots from the Stripe homepage. Please clone it." assistant: "I'll use the website-cloner agent to implement the Stripe homepage clone based on your extracted materials." <commentary> Since the user has prepared cloning materials (styles, screenshots) and wants to recreate a website, use the website-cloner agent to detect the project type and implement the pixel-perfect clone. </commentary> </example> <example> Context: User wants to recreate a landing page they've captured. user: "Here's the context.md with all the design tokens and the screenshots folder. Can you build this landing page?" assistant: "I'll launch the website-cloner agent to analyze your project setup and create the landing page component with exact styling." <commentary> The user has the required inputs (context.md and screenshots) for website cloning. Use the website-cloner agent to handle the full implementation process. </commentary> </example> <example> Context: User needs fixes applied after a review of a previous clone attempt. user: "The review-notes.md has issues from the first clone attempt. Can you fix them?" assistant: "I'll use the website-cloner agent to read the review notes and apply all the necessary fixes to match the original design." <commentary> When review-notes.md exists with issues to fix, the website-cloner agent handles the iteration process, addressing critical issues first and verifying fixes with Playwright. </commentary> </example>

Use this agent when you need to gather all visual assets (images, videos, SVGs, fonts) and extract complete style information (colors, typography, spacing, animations) from a website for cloning purposes. This agent systematically downloads and organizes all resources needed to recreate a website's visual appearance. **Examples:** <example> Context: User wants to clone a website and needs all assets extracted first. user: "I want to clone the website at https://example-startup.com" assistant: "I'll start by extracting all assets and styles from that website. Let me use the website-extractor agent to gather everything we need." <commentary> Since the user wants to clone a website, use the Task tool to launch the website-extractor agent to download all visual assets and extract complete style documentation before any implementation begins. </commentary> </example> <example> Context: User needs to extract design specifications from a reference site. user: "Can you get all the colors, fonts, and images from this competitor's website: https://competitor-site.com" assistant: "I'll use the website-extractor agent to systematically extract all visual assets and style information from that website." <commentary> The user needs comprehensive asset and style extraction. Use the website-extractor agent to download all images, fonts, and document the complete color palette, typography, and other design specifications. </commentary> </example> <example> Context: User is partway through a project and realizes they need assets from a reference site. user: "I need to match the exact styling of https://design-reference.com for the hero section. Can you extract the styles?" assistant: "Let me use the website-extractor agent to extract the complete style information from that website, including the hero section's specific styling, colors, typography, and any animations." <commentary> Even for partial style matching, the website-extractor agent should be used to ensure accurate extraction of all relevant design specifications. </commentary> </example>

Use this agent when you need to perform quality assurance review on a cloned website implementation. This agent should be launched after a website clone has been implemented in React/Tailwind and you want to identify all visual discrepancies between the original and the clone before delivery. Examples: <example> Context: User has just finished implementing a website clone and wants it reviewed. user: "I've finished cloning the Stripe homepage. Can you review it against the original?" assistant: "I'll use the website-qa-reviewer agent to perform a comprehensive visual comparison between your clone and the original Stripe homepage." <commentary> Since the user has completed a website clone implementation and wants it reviewed for accuracy, use the website-qa-reviewer agent to perform pixel-by-pixel comparison and identify all discrepancies. </commentary> </example> <example> Context: User mentions they're done with a section of their clone. user: "The hero section clone is complete. Let me know what needs fixing." assistant: "I'll launch the website-qa-reviewer agent to meticulously compare your hero section against the original and document every visual difference that needs addressing." <commentary> The user has completed implementing a section and needs QA review. Use the website-qa-reviewer agent to find all visual discrepancies. </commentary> </example> <example> Context: User asks for a final check before delivery. user: "We're about to deliver the Airbnb clone to the client. Can you do a final QA pass?" assistant: "Absolutely. I'll use the website-qa-reviewer agent to perform a thorough final review across all viewports and document any remaining issues before delivery." <commentary> This is a pre-delivery QA request for a website clone. The website-qa-reviewer agent is specifically designed for this final verification step. </commentary> </example>

Use this agent when you need comprehensive visual documentation of a website for cloning or reference purposes. This includes capturing full-page screenshots at multiple viewport sizes, individual section captures, component close-ups, hover states, and interactive elements. Ideal for website redesign projects, competitive analysis, or creating pixel-perfect recreations. **Examples:** <example> Context: User wants to clone a website and needs visual references user: "I need to clone example.com - can you get me all the screenshots I'll need?" assistant: "I'll use the website-screenshotter agent to capture comprehensive screenshots of example.com for your cloning project." <Task tool call to website-screenshotter agent> </example> <example> Context: User is analyzing a competitor's website design user: "Can you document all the UI components and states from competitor-site.com?" assistant: "I'll launch the website-screenshotter agent to capture detailed screenshots of all components, including their hover and interactive states." <Task tool call to website-screenshotter agent> </example> <example> Context: User needs responsive design references user: "I need to see how this landing page looks across different device sizes" assistant: "I'll use the website-screenshotter agent to capture the page at desktop, tablet, and mobile viewports with all sections documented." <Task tool call to website-screenshotter agent> </example> <example> Context: After discussing a website rebuild project user: "Before we start rebuilding, let's document exactly how the current site looks" assistant: "Great idea. I'll use the website-screenshotter agent to create a complete visual inventory of the current site including all sections, components, and interactive states." <Task tool call to website-screenshotter agent> </example>

Agentic workflow for cloning websites with pixel-perfect fidelity using specialized sub-agents. Use when the user wants to clone/copy/replicate a website, create a landing page based on an existing site, or needs to extract and recreate a website's design. Includes orchestration via slash command, four specialized sub-agents (screenshotter, extractor, cloner, qa-reviewer), and outputs React components with Tailwind CSS and motion animations.