Webcloner

Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.

8 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add veyralabsgroup/webcloner --skill webcloner

Manual install

git clone --depth 1 https://github.com/veyralabsgroup/webcloner.git /tmp/webcloner
mkdir -p ~/.claude/skills
cp -r /tmp/webcloner/. ~/.claude/skills/webcloner

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# WebCloner — Website Visual Cloning

You are a senior front-end engineer and design systems expert. Your job is to produce a pixel-accurate
visual clone of a target website — not a content copy, a visual clone. Same layout, same spacing,
same typography, same interactions, same feel.

Most cloning attempts fail at 80% because they guess at interactions, miss assets, or skip the
extraction phase. This skill forces the right order: extract first, build second, QA third.

## Scope — What This Skill Handles

**In scope:**
- Landing pages
- Marketing sites
- Portfolio sites
- Ecommerce storefronts (product listings, product pages, cart)
- Single-page promotional sites
- Agency / studio sites

**Out of scope (do not attempt):**
- SaaS dashboards or admin panels
- Web apps with authentication flows
- Sites with heavy real-time data (live prices, feeds, WebSockets)
- Full ecommerce checkout + payment flows
- Anything requiring server-side business logic to render

If the target is out of scope, say so immediately and explain why. Don't attempt a partial clone
that will fail half-way through.

---

## Prerequisites

Before starting, verify these are available:

```bash
# Python 3.10+ with Scrapling
pip install scrapling
scrapling install # installs Playwright browsers

# Node 18+
node --version

# Check if Chrome MCP is available in this session
```

If Scrapling is not installed, offer the manual extraction fallback (see `references/manual-fallback.md`).

---

## Mode Selection

Read the full skill on GitHub

Details

Skill name: webcloner
Repository: veyralabsgroup/webcloner
Repo updated: 8 June 2026

FAQ

What does the Webcloner skill do?

How do I install the Webcloner skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add veyralabsgroup/webcloner --skill webcloner. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Webcloner popular?

It lives in veyralabsgroup/webcloner, which has 8 GitHub stars and 0 forks.

Related skills

Xiaoer Artstudio Design

Jane-xiaoer/xiaoer-artstudio-design

Design methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Clau

Frontend & Design

Wcss Slurm

dawidlinek/slurm-wcss-skill

Use this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte

Frontend & Design

HTML Animation to Mp4

AZR-Software-Solutions/html-animation-to-mp4

Convert an HTML/CSS/JS animation — especially a Claude "Design" timeline artifact (a *.dc.html bundle exported from Claude) — into a clean, shareable MP4 using deterministic headless-browser frame capture plus ffmpeg. Use this whenever the user has a web/HTML animation, a Claude Design or Artifacts animation, a `.dc.html` file, an animated promo / explainer / motion graphic, and wants a video file (MP4, reel, short, clip) out of it — even if they don't say "render", "ffmpeg", or "headless". Trigger on phrasings like "convert this animation to mp4/video", "export my HTML animation as a video",

Frontend & Design

Shain Dls

Dishain/Shain-Design-System-Skill

Token-based design system skill for Figma + code handoff. Use whenever working with Figma components, design tokens, color variables, token migration, component creation, design-to-code handoff, or DS audits. Trigger on: design system, DS, DLS, tokens, figma variables, component spec, token naming, token hierarchy, which color to use, variant properties, theme config, dark mode. Even for "which color should I use" or "create a component" — use this skill.

Frontend & Design

Avatar Sticker Pack

bianzigege/avatar-sticker-pack

Generate a reusable sticker pack from one or more user-provided avatar images. Use when the user asks for avatar stickers, emoji packs, reaction stickers, chibi stickers, human-proportion and Q-version variants, transparent PNG stickers, or a paired sticker set for chat platforms.

Frontend & Design

Linkedin Hdr Logo

Adamodigi/linkedin-hdr-logo

Convert a logo into an HDR JPEG whose whites glow brighter than the screen's normal white, in the one format that survives LinkedIn's image processing (Rec2020 PQ ICC profile JPEG). Use this skill whenever the user wants a logo's white to look extra bright, glowing, or HDR on LinkedIn or on social profiles, mentions the "LinkedIn HDR logo" effect, says their HDR upload loses its glow after LinkedIn processes it, or asks to make a logo "pop", "glow", or "defy screen brightness". Also use it when the user gives a logo file and asks to boost, expose, or brighten its whites for LinkedIn.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.