skills.rest
duylinhdang1998
duylinhdang1998COMMUNITY
Explore all skills by this author →
WebsiteGitHub

clone-website

Reverse-engineers live websites into per-component specification files with extracted assets and computed CSS for Next.js builders.

Updated Apr 16, 2026
Search Tags:#frontend#pixel-perfect#browser-automation#component-specs#website-clone#css-extraction#asset-extraction
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill clone-website-duylinhdang1998
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/clone-website
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill clone-website-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the meticulous, audit-ready process of reverse-engineering live websites into pixel-perfect, buildable front-end artifacts so specialist teams don't have to guess styles, spacing, or behaviors.

Core Features & Use Cases

  • Exact visual fidelity: Extracts computed CSS, typography, colors, assets, and layered images to produce clones that match the original site with zero creative improvisation.
  • Behavior and interaction extraction: Captures scroll-driven behaviors, hover/click states, animations, and multi-state components and records triggers and transitions for builders.
  • Parallel, auditable build workflow: Produces per-component spec files, screenshots, diffs, and downloaded assets so builder agents can run in parallel and deliver verifiable results.
  • Governed execution model: Enforces sprint-based, specialist-only operation with preflight checks (active sprint, browser automation available, scaffold present) and strict verification steps before marking components done.

Quick Start

Run the company workflow to create a sprint, assign a frontend specialist, and request the team to clone the website at the target URL.

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 into pixel-perfect front-end components?▼

Pixel-perfect website cloning reverse-engineers live sites by extracting computed CSS, typography, colors, and layered assets to produce buildable front-end artifacts with zero creative improvisation.

What is computed CSS extraction and how does it help replicate a website?▼

Computed CSS extraction captures the final, browser-resolved styles of a live webpage, allowing you to reproduce exact spacing, typography, and colors without guessing the original stylesheet structure.

How do I extract scroll-driven behaviors and hover states when building a website clone?▼

When building a website clone, browser automation captures scroll-driven behaviors, hover and click states, and animations, recording triggers and transitions to create per-component specification files for builders.

Do I need a Next.js and Tailwind scaffold to use a website cloning workflow?▼

Yes, this workflow requires a Next.js, shadcn/ui, and Tailwind v4 scaffold along with browser automation tools and an active sprint workspace to successfully execute its preflight checks and generate buildable artifacts.

How do I manage parallel front-end builds when reverse-engineering a website?▼

Managing parallel front-end builds requires generating per-component spec files, screenshots, diffs, and downloaded assets so builder agents can work simultaneously and deliver verifiable, auditable results.

What are the limitations of using browser automation for pixel-perfect website cloning?▼

Limitations include strict governance: the process requires an active sprint workspace, browser automation availability, and a scaffold present, and it will not proceed without passing preflight verification checks.

Related Skills

Explore More Software Engineering Skills→
ahmetakyapiahmetakyapi

clone-website

Clone live websites into Next.js, shadcn/ui, and Tailwind v4 projects.

Community
Advanced
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
rjroyrjroy
6

backlog

Analyze GitHub project backlog items and generate priority-based recommendations.

Community
Advanced
ZevileNZevileN
32

clone-website

Reverse-engineer a target URL into a pixel-perfect clone with auditable component specs.

Community
Advanced