À propos du projet

ui-clone-skills est un plugin pour agents de codage (compatible avec Claude Code et Codex) conçu pour reverse-engineer des sites web en direct en code React et Tailwind CSS. Contrairement aux outils standards de capture d'écran vers code qui infèrent la mise en page à partir des pixels, cet outil effectue une « forensic du mouvement » en inspectant le DOM vivant, en téléchargeant les feuilles de style et ressources réelles, et en extrayant les paramètres d'animation depuis les bundles JavaScript (incluant GSAP, Framer Motion et Webflow IX2). Le pipeline comprend quatre étapes principales : 1. Capture : Enregistre des cadres de référence, vidéos et cartes DOM sur plusieurs viewports et états d'interaction. 2. Décode : Extrait les feuilles de style, valeurs calculées et génère un `transition-spec.json` pour les paramètres de mouvement. 3. Recrée : Génère du code React/TSX et Tailwind basé sur les données observées. 4. Vérifie : Utilise des métriques déterministes comme l'Erreur Absolue (AE) et la Similarité Structurelle (SSIM) pour comparer l'implémentation avec la référence. Il fournit trois compétences principales : `ui-reverse-engineering` pour le pipeline complet, `ui-capture` pour collecter des preuves de référence, et `visual-debug` pour diagnostiquer les écarts entre le clone et le site original.