# Copycat > > - **Type:** Skill - **Install:** `agentstack add skill-minosdevs-copycat-skill-copycat-skill` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [minosdevs](https://agentstack.voostack.com/s/minosdevs) - **Installs:** 0 - **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [minosdevs](https://github.com/minosdevs) - **Source:** https://github.com/minosdevs/copycat-skill ## Install ```sh agentstack add skill-minosdevs-copycat-skill-copycat-skill ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # copycat — URL → clone pixel-perfect Le but : partir d'une URL et livrer une reproduction **visuellement indiscernable** (layout, fonts, couleurs, espacements, responsive, hover, animations) qui tourne localement avec une console propre. Pas une « inspiration », pas un « dans l'esprit de » : le même site. Ce qui fait la différence entre un clone moyen et un clone parfait, c'est la **mesure**. On ne devine jamais une font, une couleur ou un espacement : on les lit dans le navigateur. Et on ne déclare pas « c'est bon » à l'œil : on diffe les pixels et on lit la console. ## Les 3 scripts (dossier `scripts/`) | script | rôle | |---|---| | `capture.mjs ` | Photographie et dissèque le site original → dossier `copycat//` avec `REPORT.md` | | `compare.mjs --original --clone ` | Mesure l'écart clone vs original (diff pixel, fonts, palette, typo, console) → `compare/REPORT.md` | | `extract.browser.js` | L'extracteur in-page, aussi collable tel quel dans la console DevTools (retourne le JSON des design tokens) | Installation une seule fois (Node ≥ 18) : ```bash cd /scripts && npm install && npx playwright install chromium ``` `` est le dossier de ce SKILL.md (`~/.claude/skills/copycat` en install perso, `.claude/skills/copycat` en install projet, ou le cache du plugin). Vérifie avec `ls` avant de lancer. ## Workflow ### 0. Cadrer (30 secondes, pas plus) - **URL cible** : celle donnée. S'il y a plusieurs pages à cloner, c'est `--depth 1` (pages du nav). - **Stack de sortie** : regarde le repo courant. `package.json` avec `next` → composants Next.js (App Router, Tailwind si déjà présent). Sinon, repo vide ou pas de framework → **HTML/CSS/JS statique** (`index.html`, `styles.css`, `script.js`, `assets/`). Le statique est le plus fidèle et le plus simple : c'est le défaut si l'utilisateur ne précise rien. Ne propose pas un framework qu'il n'a pas demandé. - **Périmètre** : on clone le front. Les formulaires pointent vers rien (ou un `console.log`), l'auth, le paiement et les widgets tiers (Intercom, analytics) ne sont pas reproduits — dis-le à la fin. - **Légal, en une ligne dans le livrable** : reproduire un site pour apprendre, prototyper ou refaire son *propre* site est courant ; réutiliser en production le logo, les photos, les textes ou la marque d'un tiers ne l'est pas. Remplace les assets de marque par des placeholders si l'utilisateur destine le clone à un autre usage que le sien / l'étude. ### 1. Capturer ```bash node /scripts/capture.mjs https://exemple.com --out copycat/exemple.com ``` Options utiles : `--depth 1` (pages du nav, max `--max-pages 8`), `--viewports desktop,mobile` ou `--viewports large:1920x1080,desktop`, `--scale 2` (retina, plus lourd), `--dark`, `--locale fr-FR`, `--wait 3000` (sites lents / animations d'intro), `--videos`, `--channel chrome|msedge` (vrai navigateur installé, pour les sites protégés), `--headed` (voir ce qui se passe), `--no-hover` (plus rapide). Compte 1 à 2 minutes pour 3 viewports. Le script gère déjà : le scroll complet pour déclencher le lazy-load et les reveal-on-scroll, les bannières cookies (masquées en CSS, **sans** cliquer « accepter »), les pages trop hautes pour la capture native (stitching des folds), les stylesheets cross-origin (téléchargées), les `@font-face` relatifs au CSS, les proxys d'images (`/_next/image?url=`), les SVG inline (logos). Si le site bloque le headless (Cloudflare, page blanche, 403, screenshot qui time out) : relance avec `--channel chrome` (le vrai Chrome installé, en headless — passe la plupart des murs anti-bot), sinon `--headed`, ou ouvre l'URL dans le Browser pane, fais les screenshots à la main avec `computer` et exécute le contenu de `extract.browser.js` via `javascript_tool` puis `JSON.stringify(__copycatExtract())`. Tu obtiens le même JSON que `manifest.json → design`. ### 2. Lire la capture — dans cet ordre 1. `REPORT.md` en entier. La section « TL;DR for the rebuild » te donne stack, fonts, body, containers, breakpoints, header, motion. Les warnings en bas disent ce qui n'a pas été capturé. 2. Les **folds** de `screens/desktop/` un par un (outil Read sur les PNG). C'est la vue la plus fiable : un vrai viewport à une vraie position de scroll. Note pour chaque fold ce que tu vois — alignements, largeur de colonne, rythme vertical, où sont les ombres et les bordures. 3. Les crops `screens/sections/NN-*.png` au moment de construire la section NN. 4. `screens/mobile/` avant d'écrire le responsive, pas après. 5. `content/text.md` pour le texte exact (copie-colle, ne retape pas — les apostrophes typographiques, les espaces insécables et les majuscules comptent). 6. `css/*.css` quand une valeur te manque : c'est le CSS **réel** du site. Cherche dedans la classe ou le sélecteur vu dans `content/dom-outline.txt` plutôt que d'inventer. 7. `manifest.json` pour le détail (`design.typography.top`, `design.ctas`, `design.layout.stickies`, `hover[]`, `design.motion`, `design.media.images[]` avec les tailles rendues). Charge `references/fidelity-checklist.md` maintenant : c'est la liste de ce qui trahit un clone. ### 3. Poser les fondations avant la première section Dans cet ordre, parce que tout le reste en dépend : 1. **Fonts** : copie `assets/fonts/` dans le projet, écris les `@font-face` (mêmes `font-family`, `font-weight`, `font-style`, `font-display`) à partir de `manifest.design.fonts.faces`. Si la font vient de Google Fonts (`fonts.externalLinks`), garde le lien. Si la font est propriétaire et non téléchargeable, choisis la plus proche **et dis-le** dans le livrable — c'est le premier écart visible d'un clone. 2. **Tokens** : reprends les variables CSS de `:root` telles quelles (noms inclus, ça rend le CSS lisible et le diff facile), la palette, `html { font-size }`, `body { background; color; font; line-height; letter-spacing }`, `color-scheme`. 3. **Container** : le `max-width` + `padding-x` le plus fréquent de `layout.containers`. Les breakpoints de `layout.breakpoints` deviennent tes media queries (mêmes valeurs, même unité). 4. **Header** : position (`fixed`/`sticky`), hauteur, fond, `backdrop-filter`, z-index, le logo (SVG inline sauvegardé dans `assets/svg/logo-header.svg`), comportement mobile (burger si `nav.hasBurger`). 5. **Meta** : ``, description, favicons (dans `assets/icons/`), `og:*`, `lang`, viewport. ### 4. Construire section par section, de haut en bas Pour chaque section de la table « Sections » du rapport : - Ouvre son crop et le fold correspondant. Repère la grille (colonnes, gap), les largeurs réelles (`dom-outline.txt` donne `[WxH]` et `flex/grid` avec `gap`), l'alignement vertical. - Prends les tailles/poids/interlignes dans la table « Typography » — un `h2` à `40px/46px -0.8px` se code `font-size:40px; line-height:46px; letter-spacing:-0.8px`, pas « text-4xl ». - Utilise les **vraies images** (`assets/images/`, nommées d'après la source) aux **tailles rendues** du rapport (`renderedWidth × renderedHeight`, `object-fit`, `border-radius`). Les SVG inline vont en inline (les icônes de `assets/svg/`). - Boutons : la table « Buttons / CTAs » a bg, couleur, bordure, radius, padding, font, ombre. Les états hover sont dans « Hover states » (`color → …`, `transform → …`, `boxShadow → …`) avec la durée de transition dans « Motion » → reproduis-les, un clone sans hover se sent mort. - Animations : `design.motion.keyframes` liste les noms ; les vraies `@keyframes` sont dans `css/`. Copie-les. Les reveal-on-scroll (éléments `opacity:0` + classe ajoutée) se refont en 15 lignes avec un `IntersectionObserver` — reproduis le délai et l'easing vus dans « Animated elements ». - Écris le responsive **en même temps** que la section, en regardant le fold mobile correspondant, pas dans une passe finale. Ne saute pas de section « parce qu'elle est simple ». Le footer et les micro-sections (bandeau logos, stats) sont ceux qu'on bâcle et qui font « faux ». ### 5. Vérifier — la boucle qui fait le clone Lance le clone (serveur de dev du projet, ou `npx serve` pour du statique — utilise `preview_start` avec `.claude/launch.json`, jamais un serveur dans Bash), puis : ```bash node /scripts/compare.mjs --original copycat/exemple.com --clone http://localhost:3000 ``` Lis `copycat/exemple.com/compare/REPORT.md` : - **Verdict** A/B/C/D + `% mismatch` par viewport. Vise **< 2 %** avec console propre (A). L'anti- aliasing et la compression d'images coûtent déjà 0,5–1,5 %. - **Worst zones** : les bandes de 200 px les plus différentes, mappées aux sections. Corrige la plus haute d'abord — un décalage de hauteur en haut décale tout ce qui suit et gonfle le %. - **Design diff** : fonts manquantes, couleurs manquantes, typo (`h1 size 56px → 48px`), body, titres absents, CTAs absents, meta, compteurs d'animations/sticky, images cassées. - **Console** : erreurs, exceptions, requêtes échouées, HTTP ≥ 400 du **clone**. Cible : 0. Une image 404 ou une font qui ne charge pas se voit ici avant de se voir à l'œil. - `compare/desktop-side-by-side.png` (original | clone | diff) et les folds du clone dans `compare/desktop/` à comparer visuellement avec `screens/desktop/`. Corrige, relance, jusqu'à A ou jusqu'à ce que l'écart restant soit expliqué (rendu de texte de la machine, contenu dynamique, vidéo). Trois itérations suffisent en général si l'étape 3 a été faite sérieusement. Ne conclus jamais sur la seule impression visuelle : c'est le rapport qui dit « fini ». Vérifie aussi à la main, dans le Browser pane : hover des CTA, ouverture du menu mobile (`resize_window` mobile), scroll (header qui change de fond ?), pas d'overflow horizontal. ### 6. Livrer Dans le message final : - Où est le clone, comment le lancer. - Le verdict `compare` par viewport et la console (0 erreur, ou lesquelles restent et pourquoi). - Ce qui **n'est pas** reproduit : formulaires sans backend, auth, widgets tiers, vidéos, contenu dynamique, fonts propriétaires remplacées (par quoi). - La note d'usage des assets (logo/photos/textes appartiennent au site original). ## Références - `references/fidelity-checklist.md` — les 40 détails qui font qu'un clone paraît faux (charge-la à l'étape 2, relis-la avant de livrer). - `references/rebuild-recipes.md` — recettes prêtes : `@font-face` depuis le manifest, IntersectionObserver reveal, header sticky avec changement de fond au scroll, burger menu, marquee de logos, accordéon FAQ, carrousel de témoignages, structure statique vs Next.js. - `references/troubleshooting.md` — site bloqué, page blanche, capture vide, fonts 404, images proxifiées, stitching, sites avec smooth-scroll (Lenis) ou scroll horizontal. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [minosdevs](https://github.com/minosdevs) - **Source:** [minosdevs/copycat-skill](https://github.com/minosdevs/copycat-skill) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-minosdevs-copycat-skill-copycat-skill - Seller: https://agentstack.voostack.com/s/minosdevs - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.