Clone any website pixel-perfect: foreman-style extraction, spec files, parallel builders
Rétro-ingénierie d'un site section par section — façon contremaître : extraire le CSS exact et les comportements via automatisation navigateur, écrire une spec par composant, dispatcher des builders parallèles, merger, QA visuelle
- Quoi
- Rétro-ingénierie d'un site section par section — façon contremaître : extraire le CSS exact et les comportements via automatisation navigateur, écrire une spec par composant, dispatcher des builders parallèles, merger, QA visuelle
- Coût
- Gratuit
- Prérequis
- un MCP d'automatisation navigateur (Chrome, Playwright, Browserbase ou similaire) ; un scaffold Next.js + shadcn/ui + Tailwind pour le rebuild ; ne cloner QUE des sites que vous possédez ou dont vous avez les droits (⚠️ USAGE AUTORISÉ UNIQUEMENT — copier un design protégé est votre responsabilité légale)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — fiche courte (le repo ne déclare aucune licence, donc aucun contenu n'est reproduit) : le skill de clonage de site web de @julianromli — un workflow agent façon contremaître pour la rétro-ingénierie au pixel près d'un site web. Phase 1, reconnaissance via automatisation navigateur : screenshots pleine page (desktop + mobile), extraction globale (fonts, couleurs, favicons), plus sweeps scroll/clic/survol/responsive enregistrant chaque comportement dans une bible BEHAVIORS et une carte de topologie de page. Phase 2, construction de la fondation (design tokens, types, icônes, assets téléchargés) avec un build qui passe. Phase 3, la boucle de base : extraire le CSS calculé exact et le vrai contenu par section (y compris tous les états et le modèle d'interaction — clic vs scroll), écrire une spec par composant, puis dispatcher des builders parallèles en worktrees pour les implémenter. Phase 4, assemblage de la page. Phase 5, QA visuelle par diff — comparaison screenshots côte à côte desktop et mobile, test de chaque comportement. Inclus : une liste d'anti-patterns tirée des échecs passés (mauvais modèle d'interaction, overlays manqués, extraction responsive sautée). Bémols honnêtes : ⚠️ USAGE AUTORISÉ UNIQUEMENT — cloner un site web peut copier un design protégé : ne clonez que des sites que vous possédez ou dont vous avez les droits, ou utilisez-le pour apprendre comment fonctionnent les interactions ; copier le design de quelqu'un d'autre est votre responsabilité légale ; méthodologie plus outillage navigateur — nécessite un MCP navigateur disponible et un scaffold Next.js + shadcn ; licence non déclarée par le repo source — fiche courte avec lien uniquement, rien copié. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un MCP d'automatisation navigateur (Chrome, Playwright, Browserbase ou similaire) ; un scaffold Next.js + shadcn/ui + Tailwind pour le rebuild ; ne cloner QUE des sites que vous possédez ou dont vous avez les droits (⚠️ USAGE AUTORISÉ UNIQUEMENT — copier un design protégé est votre responsabilité légale) Installe-moi « Cloner n'importe quel site au pixel près : extraction façon contremaître, specs, builders parallèles ». Il donne à mon agent le workflow de clonage de @julianromli : reconnaissance via automatisation navigateur (screenshots, fonts/couleurs/assets, sweeps d'interactions, topologie de page), construction de la fondation avec compilation vérifiée, extraction par section du CSS calculé exact et des comportements avec une spec par composant, builders parallèles en worktrees, assemblage de la page, et une passe de QA visuelle par diff. IMPORTANT : le repo ne déclare aucune licence — récupérer depuis le lien seulement, et ne rien reproduire au-delà du lien. Dépôt : https://github.com/julianromli/ai-skills/blob/main/skills/clone-website/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « clone-website ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. fournir la ou les URLs cibles et confirmer que je les possède ou que j'ai les droits de les cloner ; avoir le MCP navigateur connecté et le scaffold Next.js prêt). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.