How mood-global-services/how-to-clone-website---claude-skills works
This repository is a Claude Code template for reconstructing websites, with a minimal Next.js app as the clone’s runtime. The README documents the cloning workflow, but its skill implementation is not present in the tree; workflow links below reflect that documentation rather than inspected skill source. The sampled app currently displays a placeholder, so the finished clone’s rendering is described as the intended result, not current behavior.
Components 19
Clone workflow
- Clone skill
Site research
- Reconnaissance
- Design tokens
- Asset downloads
- Component specs
Clone construction
- Design foundation
- Builder agents
- Git worktrees
- Assembly and QA
Next.js runtime
- Next.js app
- Root layout
- Global styles
- Button primitive
- Class utilities
Other components
- User
- Target website
- Claude Code
- Chrome MCP
- Site visitor
Connections 21
- User → Claude Code: starts
- Claude Code → Clone skill: runs skill
- Clone skill → Reconnaissance: begins with
- Reconnaissance → Chrome MCP: inspects through
- Chrome MCP → Target website: captures site
- Reconnaissance → Design tokens: extracts
- Clone skill → Design foundation: updates
- Clone skill → Asset downloads: downloads
- Clone skill → Component specs: writes
- Clone skill → Builder agents: dispatches
- Builder agents → Component specs: builds from
- Builder agents → Git worktrees: works in
- Clone skill → Assembly and QA: merges and wires
- Assembly and QA → Git worktrees: merges
- Assembly and QA → Next.js app: wires page
- Assembly and QA → Target website: compares visually
- Site visitor → Next.js app: requests page
- Next.js app → Root layout: renders within
- Root layout → Global styles: loads
- Next.js app → Button primitive: uses
- Button primitive → Class utilities: merges classes with