# mood-global-services/how-to-clone-website---claude-skills architecture

> Architecture diagram of the GitHub repository mood-global-services/how-to-clone-website---claude-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mood-global-services/how-to-clone-website---claude-skills
- Repository: https://github.com/mood-global-services/how-to-clone-website---claude-skills

## Overview

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.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Clone workflow"]
  node_skill["Clone skill"]
end

subgraph group_research["Site research"]
  node_recon["Reconnaissance"]
  node_tokens["Design tokens"]
  node_assets["Asset downloads"]
  node_specs["Component specs"]
end

subgraph group_build["Clone construction"]
  node_foundation["Design foundation"]
  node_agents["Builder agents"]
  node_worktrees["Git worktrees"]
  node_assembly["Assembly and QA"]
end

subgraph group_runtime["Next.js runtime"]
  node_app["Next.js app"]
  node_layout["Root layout"]
  node_styles["Global styles"]
  node_button["Button primitive"]
  node_utils["Class utilities"]
end

node_user(("User"))
node_target(("Target website"))
node_claude["Claude Code"]
node_chrome["Chrome MCP"]
node_visitor(("Site visitor"))

node_user -->|"starts"| node_claude
node_claude -->|"runs skill"| node_skill
node_skill -->|"begins with"| node_recon
node_recon -->|"inspects through"| node_chrome
node_chrome -->|"captures site"| node_target
node_recon -->|"extracts"| node_tokens
node_skill -->|"updates"| node_foundation
node_skill -->|"downloads"| node_assets
node_skill -->|"writes"| node_specs
node_skill -->|"dispatches"| node_agents
node_agents -->|"builds from"| node_specs
node_agents -->|"works in"| node_worktrees
node_skill -->|"merges and wires"| node_assembly
node_assembly -->|"merges"| node_worktrees
node_assembly -->|"wires page"| node_app
node_assembly -->|"compares visually"| node_target
node_visitor -->|"requests page"| node_app
node_app -->|"renders within"| node_layout
node_layout -->|"loads"| node_styles
node_app -.->|"uses"| node_button
node_button -->|"merges classes with"| node_utils

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_user toneBlue
class node_recon,node_tokens,node_assets,node_specs toneAmber
class node_foundation,node_agents,node_worktrees,node_assembly toneMint
class node_app,node_layout,node_styles,node_button,node_utils toneRose
class node_target,node_claude,node_chrome,node_visitor toneIndigo
```

## Components

### 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

- 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