albertirgi/replica

Que fait replica ?

Reconstruisez ce que l'utilisateur désigne, puis prouvez-le. capture transforme la référence en un plan de faits mesurés. Vous construisez à partir du plan. compare note la construction sur quatre axes (mise en page, style, pixels, mouvement) et vous indique quelle correction rapporte le plus de points. Vous avez terminé lorsque compare sort avec le code 0, pas quand la construction vous semble correcte.

<skill> ci-dessous désigne le répertoire dans lequel se trouve ce SKILL.md.

Règles

1. Mesurez, ne devinez pas. Prenez chaque taille, couleur, police, espacement, durée et easing depuis blueprint.md, blueprint.json ou un rapport. N'utilisez pas votre mémoire de l'apparence habituelle de sites similaires.
2. Ne trichez jamais sur le score. N'intégrez pas de captures d'écran ou d'images de la référence, n'utilisez pas d'iframe ou de proxy vers la référence, ne collez pas son HTML rendu en bloc, ne modifiez rien dans .replica/, et n'abaissez pas --level pour passer. Construisez une vraie UI dans la stack de l'utilisateur.
3. Utilisez la stack du projet. Lisez d'abord package.json et les composants existants les plus proches. Respectez le framework, l'approche de style et la bibliothèque d'animation déjà en place. N'ajoutez une dépendance que lorsque la référence nécessite quelque chose que le projet ne peut pas faire.
4. Corrigez dans l'ordre du rapport, quelques-uns à la fois. Les éléments en haut causent souvent ceux en bas : une correction de cascade peut déplacer des dizaines d'éléments. Relancez compare après chaque lot. N'empilez jamais dix changements spéculatifs.
5. Respectez la propriété. Les polices, images, icônes et textes copiés de la référence appartiennent à leurs propriétaires. Utilisez les propres ressources et textes de l'utilisateur là où il les a. Sinon, demandez, ou utilisez des espaces réservés avec les mêmes dimensions, marqués data-replica="placeholder" : compare vérifie toujours leurs boîtes mais laisse leurs pixels en dehors du score pixel. Dites dans le message final quelles ressources de la référence vous avez réutilisées.

0. Périmètre

Décidez ces points et énoncez-les dans votre premier message :

• Cible : l'URL ou le fichier, plus la partie : un sélecteur CSS pour une section ou un composant, ou une plage temporelle pour une vidéo.

• Destination : le fichier ou la route dans le projet de l'utilisateur, et la stack.

• Niveau, qui définit la barre que compare vous impose :

  niveau	quand l'utilisateur dit	barrières (toutes doivent passer)
  structure	"même mise en page/feeling mais notre marque", "comme X avec notre contenu"	mise en page ≥ 90, mouvement ≥ 85
  faithful (par défaut)	"clone ceci", "recrée", "fais en sorte que ça ressemble à"	mise en page ≥ 95, style ≥ 95, pixels ≥ 85, mouvement ≥ 90
  exact	"pixel-parfait", "1:1", "exactement"	mise en page ≥ 98, style ≥ 98, pixels ≥ 97, mouvement ≥ 95

• Déclencheur : ce qui démarre le mouvement (chargement de page, survol, clic, défilement dans la vue, défilement avec effet de frottement). Cela devient --action.

Déduisez ce que vous pouvez de la demande et du dépôt. Ne demandez que lorsque deux interprétations mèneraient à un travail différent.

1. Configuration (une fois par machine)

npm install --prefix <skill>/scripts
node <skill>/scripts/replica.mjs doctor

Si doctor signale qu'aucun navigateur n'est trouvé, exécutez la commande d'installation qu'il affiche. Si Google Chrome est installé, Replica l'utilise comme solution de secours. Les références vidéo et GIF nécessitent également ffmpeg dans le PATH.

2. Capturer la référence

Conservez tout dans .replica/<nom>/ dans le projet de l'utilisateur, et ajoutez .replica/ à .gitignore.

node <skill>/scripts/replica.mjs capture <url|fichier.html|image|video> --out .replica/<nom>/ref \
  --selector "<css de la partie>" --viewports 1440x900,390x844 --action load --motion 1500

• --selector : limitez la capture à la partie que vous clonez. Des pages entières produisent des plans énormes.
• --viewports : les largeurs que vous allez livrer. La première est la principale ; le mouvement y est enregistré.
• --action et --motion <ms> : uniquement lorsqu'il y a du mouvement à cloner. Faites l'enregistrement assez long pour couvrir tout le mouvement ; capture imprime une note si quelque chose bougeait encore à la fin.
• --hide "<css>" : masquez les bannières de cookies, les widgets de chat et les superpositions de développement. Cela s'applique aux deux côtés.

Les recettes pour les images, vidéos, pages derrière un mur de connexion, iframes, canvas et mode sombre se trouvent dans references/sources.md.

Ensuite, lisez ref/blueprint.md en entier. Examinez ref/<viewport>/shot.png et ref/motion/filmstrip.png avec votre visualiseur d'images. La syntaxe du plan est expliquée dans references/blueprint.md. Les références image et vidéo n'ont pas de plan, construisez donc à partir des captures et des images.

3. Construire

Travaillez dans cet ordre : tokens → squelette de la mise en page → typographie → boîtes et peinture → médias → responsive → mouvement.

• Tokens : placez les couleurs, l'échelle typographique, les rayons, les ombres et les variables CSS du plan dans le système de tokens du projet (variables CSS ou thème Tailwind) avec leurs valeurs exactes.
• Mise en page : reproduisez chaque valeur flex … / grid cols[…], gap et pad de la ligne de contour, ainsi que les largeurs des conteneurs.
• Typographie : faites correspondre exactement la famille, le poids, la taille/la hauteur de ligne et l'espacement des lettres. Si une police est indisponible ou sous licence, utilisez la plus proche disponible et enregistrez-la comme une différence connue.
• Mouvement : lorsque le plan contient des "Animations déclarées", copiez leur durée, leur délai, leur easing et leurs keyframes exactement. Sinon, utilisez le début, la durée et l'easing du timeline, ou ses paramètres de ressort.
• Servez-le : rendez le clone accessible via une URL ou un fichier HTML qui affiche le même état (une route de serveur de développement, une story, ou un fichier statique). Si son élément racine a besoin d'un sélecteur différent de celui de la référence, passez --selector à compare.

Des notes pour chaque stack (CSS, Tailwind, Framer Motion, GSAP) se trouvent dans references/building.md.

4. Comparer, corriger, répéter

node <skill>/scripts/replica.mjs compare .replica/<nom>/ref <url|fichier du clone> [--selector "<css racine du clone>"]

Il écrit round-N/ avec report.md, issues.json, score.json et sheets/. Le code de sortie 0 signifie réussite, 1 signifie pas encore, et 2 signifie une erreur.

1. Lisez round-N/report.md : le tableau des scores, puis Correction suivante. Chaque élément montre combien de points sa correction rapporte.
2. Examinez round-N/sheets/*.png : la référence | la vôtre | aperçu des différences, zones agrandies, et la bande de mouvement.
3. Corrigez les 3 à 5 premiers éléments, en incluant toujours tout élément "Cause probable". Exécutez ensuite compare à nouveau.

• Si le rapport montre ▼ (le score a baissé), annulez votre dernier changement avant d'essayer autre chose.
• Si deux tours consécutifs gagnent moins d'1 point, arrêtez de corriger. Relisez le plan pour la zone défaillante, et vérifiez que les polices se sont chargées et que vous comparez le bon sélecteur, état et viewport.
• Arrêtez après 8 tours, et rapportez ce qui reste et pourquoi.

references/fixing.md couvre ce que chaque type de constatation signifie et le changement qui la résout généralement.

5. Livrer

Terminez avec ceci, rempli :

Replica · <cible> → <fichiers modifiés>
Niveau <niveau> · tour <N> · score <global> — RÉUSSI | PAS ENCORE
mise en page <n> · style <n> · pixels <n> · mouvement <n>
Différences connues : <chacune, avec sa raison (police sous licence, propre texte de l'utilisateur, …)>
Ressources de la référence réutilisées : <liste, ou aucune> · espaces réservés : <liste, ou aucun>
Preuves : .replica/<nom>/round-<N>/report.md et sheets/

Si cela n'a pas réussi, dites-le clairement et listez les principales constatations restantes.