skills.rest
imMamdouhaboammar
imMamdouhaboammarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clone-website

Reverse-engineers websites into pixel-perfect Next.js clones via browser-driven extraction and parallel builder agents.

Updated Jul 27, 2026
Search Tags:#browser automation#next.js#mcp#pixel-perfect#reverse engineering#css extraction#website cloning
One-click install
npx skills add https://github.com/imMamdouhaboammar/Mimera --skill clone-website-immamdouhaboammar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/imMamdouhaboammar/Mimera/tree/main/.agents/skills/clone-website
Command: npx skills add https://github.com/imMamdouhaboammar/Mimera --skill clone-website-immamdouhaboammar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually rebuilding an existing website's design is slow and error-prone: developers guess at colors, spacing, fonts, and interaction behaviors, producing clones that look close but feel wrong. This Skill automates the full reverse-engineering pipeline, extracting exact computed styles, real assets, and behavioral states from a live site and rebuilding it component-by-component. ## Core Features & Use Cases - Deterministic Extraction: Captures full-page screenshots, computed CSS via getComputedStyle, fonts, colors, favicons, images, videos, and inline SVGs from the target URL using browser MCP tools. - Behavior & Interaction Mapping: Performs scroll, click, hover, and responsive sweeps to document interaction models (scroll-driven vs click-driven), state transitions, and animation triggers before any code is written. - Spec-Driven Parallel Builds: Writes auditable per-component spec files, then dispatches parallel builder agents in git worktrees to implement each section, merging incrementally with verified builds. - Visual QA Diff: Compares the clone side-by-side against the original at desktop and mobile widths and fixes discrepancies against the spec. - Use Case: Provide a marketing site's URL and receive a pixel-perfect Next.js + Tailwind + shadcn/ui replica with real content, assets, responsive layouts, and matching scroll/hover animations. ## Quick Start Ask the agent to clone a site by saying: clone https://example.com into a pixel-perfect Next.js replica.

Frequently Asked Questions about clone-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clone a website pixel-perfectly with an AI agent?▼

Provide the target URL and the skill drives a browser MCP tool to extract computed CSS, assets, fonts, and behaviors, writes per-component spec files, then dispatches parallel builder agents to rebuild each section in Next.js with Tailwind and shadcn/ui.

What tools are required to reverse-engineer a website's design?▼

A browser automation MCP server such as Chrome MCP, Playwright MCP, Browserbase MCP, or Puppeteer MCP is mandatory. The target project must also have a working Next.js, Tailwind v4, and shadcn/ui scaffold that builds successfully.

Can I clone multiple websites in one command?▼

Yes, pass multiple URLs as arguments. Each site is processed independently with isolated extraction artifacts in per-hostname folders, and sites can run in parallel or sequentially depending on available resources.

Does website cloning capture scroll animations and interactive states?▼

Yes, a mandatory interaction sweep scrolls, clicks, and hovers across the page to document triggers, before/after computed styles, and transitions. It detects scroll-driven versus click-driven models, smooth scroll libraries like Lenis, and multi-state tab content.

What are the limitations of automated website cloning?▼

The clone covers visual layout, styling, interactions, and mock data only. Real backends, databases, authentication, real-time features, SEO optimization, and accessibility audits are explicitly out of scope unless the user requests otherwise.

Why does my website clone look wrong after building?▼

Common causes are missing layered overlay images, approximated CSS instead of computed values, or a wrong interaction model such as click-based tabs where the original is scroll-driven. The visual QA diff phase compares against the original and fixes components against their spec files.

Related Skills

Explore More Software Engineering Skills→
BEIRUXBEIRUX

clone-website

Extracts assets, computed CSS, behaviors, component specs, and screenshots to rebuild websites in Next.js with shadcn/ui and Tailwind v4.

Official
Advanced
seppegadeyneseppegadeyne

toprank-setup-cms

Validate CMS connectivity, credentials, and access permissions for WordPress, Strapi, Contentful, and Ghost.

Community
Intermediate
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate
ringlochidringlochid

figma-layout-reader

Convert Figma design files into layout handoffs with canvas sizes, spacing, typography, and colors.

Community
Advanced