skills.rest
MollyStanden26
MollyStanden26COMMUNITY
Explore all skills by this author →
GitHub

clone-website

Clone a website homepage into a Next.js 14 project using Chrome MCP.

Updated Aug 23, 2026
Search Tags:#nextjs#tailwind#visual-qa#design-extraction#website-clone#chrome-mcp#asset-download
One-click install
npx skills add https://github.com/MollyStanden26/iautosale --skill clone-website-mollystanden26
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/MollyStanden26/iautosale/tree/main/.claude/skills/clone-website
Command: npx skills add https://github.com/MollyStanden26/iautosale --skill clone-website-mollystanden26

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Recreating a website's visual design and interactive behavior by hand is slow, error-prone, and often misses subtle computed styles and animations; this Skill automates precise extraction and reconstruction so the Next.js project matches the original site pixel-for-pixel.

Core Features & Use Cases

  • Automated Reconnaissance: Full-page screenshots, computed-style extraction, SVG and asset harvesting, and interaction sweeps across desktop, tablet, and mobile viewports.
  • Deterministic Foundation Build: Downloaded assets saved into public/, inline SVGs converted to React components, and a Tailwind-friendly component spec workflow that enforces build checks after every change.
  • Componentized Dispatch & QA: Generate detailed component specs, dispatch builder agents per section, assemble the page, and run visual QA diffs to eliminate spacing, color, and interaction regressions.
  • Use Case: Ideal for migrating a marketing homepage into an AutoConsign Next.js project while preserving exact visuals, hover states, animations, and responsive behavior.

Quick Start

Use the clone-website skill to reverse-engineer and rebuild the homepage at the provided URL into the project's marketing page with Chrome MCP enabled.

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 homepage into Next.js with pixel-accurate styling?▼

To clone a website homepage into Next.js, this Skill uses Chrome MCP to extract computed styles, assets, and interactions, then generates Tailwind-compatible React components. It automates visual reconstruction to match the original site pixel-for-pixel.

How does Chrome MCP extract website styles and assets for cloning?▼

Chrome MCP automates browser reconnaissance by capturing full-page screenshots, extracting computed styles, harvesting SVGs and assets, and sweeping interactions across desktop, tablet, and mobile viewports to reverse-engineer the homepage design.

Can I use this website cloning approach for marketing and landing pages?▼

Yes, this approach is specifically ideal for migrating marketing, landing, and promotional pages into a Next.js 14 project. It preserves exact visuals, hover states, animations, and responsive behaviors during the reconstruction process.

What do I need to run a Tailwind component build check when cloning a site?▼

You need Chrome MCP browser automation access and the ability to run npm build in your repository. The workflow enforces build checks after every change to eliminate spacing, color, and interaction regressions during component assembly.

Why does my visually cloned homepage have interaction regressions?▼

Interaction regressions occur when subtle computed styles and animations are missed during manual reconstruction. This Skill eliminates them by dispatching builder agents per section and running visual QA diffs to catch spacing, color, and interaction discrepancies.

What is the best way to preserve responsive behaviors when migrating a homepage?▼

The best way to preserve responsive behaviors is automated reconnaissance across desktop, tablet, and mobile viewports. This Skill extracts computed styles and interaction sweeps for each breakpoint, ensuring the Next.js clone matches the original site exactly.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
Hey-ViswaHey-Viswa

voltagent-design-skill

Apply Voltagent design-system patterns to product UI with React/Next.js-ready outputs.

Community
Advanced
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
TitoPrauseeTitoPrausee

ui-pattern-analysis

Analyze web UI patterns from code and screenshots into structured reports.

Community
Intermediate