motion-review

Motion review

Une page animée n'est pas terminée quand elle fonctionne sur votre écran. Elle est terminée quand elle obtient un bon score selon une grille fixe, passe tous les contrôles bloquants aux formats desktop et mobile, et que vous avez regardé le résultat au lieu de faire confiance au code.

Cette compétence vous offre trois choses :

1. Une boucle d'inspection et de correction : capture d'écran, notation, correction du pire problème, nouvelle capture.
2. Une grille de 10 critères notés de 1 à 10, avec la description de ce que signifient les notes 5, 8 et 10 : references/rubric.md.
3. Une liste de contrôle QA bloquante et deux scripts autonomes qui la mesurent : references/qa-checklist.md, scripts/section-shots.mjs, scripts/qa-lite.mjs.

La barre

• Moyenne de la grille de 8 ou plus, et aucun critère sous 7.
• Tous les contrôles bloquants passent à 1440x900 et 390x844.
• Vous avez vu chaque section aux deux tailles. Une révision sans captures d'écran est une supposition.

Si la page ne franchit pas la barre, elle n'est pas prête, aussi bon que soit le héros.

Prérequis

• Node 18 ou plus récent.
• Playwright dans le projet que vous révisez : npm i -D playwright puis npx playwright install chromium. Ou utilisez un Chrome installé avec playwright-core et passez --chrome "<chemin vers chrome>". Les scripts trouvent Chrome ou Edge aux emplacements habituels sous Windows, macOS et Linux par eux-mêmes.
• Optionnel : npm i -D sharp pour les planches-contact. Sans cela vous obtenez quand même chaque PNG.
• Exécutez les scripts depuis le dossier de votre projet. Ils cherchent Playwright et sharp d'abord dans le dossier où vous les exécutez, puis à côté du script, donc une seule installation dans votre projet suffit. Les chemins des scripts ci-dessous sont relatifs au dossier de cette compétence. Claude Code affiche ce dossier au chargement de la compétence ; après une copie manuelle, il est par exemple ~/.claude/skills/motion-review/, donc l'appel complet est node ~/.claude/skills/motion-review/scripts/qa-lite.mjs ./site.

La convention ?shot=N

Les scripts ouvrent index.html?shot=N et attendent que la page atterrisse sur la section N. Ajoutez ceci à votre page une fois (quelques lignes, cela rend chaque révision reproductible) :

// Accroche QA : ?shot=N fait défiler la section N au milieu de la fenêtre après le chargement.
const shot = new URLSearchParams(location.search).get("shot");
if (shot !== null) addEventListener("load", () => {
  const marked = document.querySelectorAll("[data-shot]");
  const s = (marked.length ? marked : document.querySelectorAll("section"))[+shot];
  if (s) scrollTo(0, s.getBoundingClientRect().top + scrollY + s.offsetHeight / 2 - innerHeight / 2);
});

Pour un film ou une introduction jouée une fois, faites aussi avancer la timeline vers son état final lorsque ?shot est présent, afin que la capture montre l'image composée et non l'image 1. Pour les films temporisés, voir la méthode de capture équitable dans la compétence d'analyse : ../motion-analytics/references/reference-grading.md.

La boucle d'inspection et de correction

Exécutez cette boucle jusqu'à ce que la page franchisse la barre. Chaque passage doit corriger le problème unique le plus dommageable en premier, pas dix petits à la fois.

1. Capturer

node scripts/section-shots.mjs ./mon-site 6 ./qa/shots

Ceci sert ./mon-site sur un port local, ouvre index.html?shot=0 jusqu'à ?shot=5 aux tailles desktop et mobile, écrit d0.png ... d5.png, p0.png ... p5.png, et desk-sheet.png et phone-sheet.png si sharp est installé. Il imprime toutes les erreurs de page et erreurs console rencontrées.

2. Regarder

Ouvrez d'abord les deux planches-contact, puis les images individuelles. Demandez-vous, section par section :

• L'idée unique de la page est-elle visible dans cette image, ou s'agit-il d'une section générique ?
• L'image mobile a-t-elle sa propre composition, ou est-ce le desktop compressé ?
• Un texte se trouve-t-il sur une partie chargée de l'image ?
• Quelque chose est-il rogné, en chevauchement, vide, ou encore en cours de chargement ?
• Chaque section ressemble-t-elle à la même marque ?

Notez ce que vous voyez en mots simples avant de noter. "Le titre du héros mobile couvre le visage du sujet" est utile. "Ça a l'air bien" ne l'est pas.

3. Vérifier

node scripts/qa-lite.mjs ./mon-site

Il affiche PASS ou FAIL pour chaque contrôle bloquant, avec les valeurs mesurées. Tout FAIL bloque la publication. Voir references/qa-checklist.md pour la signification de chaque contrôle, comment le script le mesure, et la correction habituelle.

Certains contrôles nécessitent un humain : le contrôle de pause arrête-t-il tout ce qui bouge, le défilement inversé est-il propre après un geste rapide, la page se sent-elle bien avec le son activé. La liste de contrôle les marque comme manuels. Faites-les.

4. Noter

Notez les 10 critères de la grille à partir des captures d'écran et en utilisant la page. Utilisez les repères dans references/rubric.md. Notez ce qui est à l'écran, pas ce que le code a l'intention de faire. Écrivez une phrase de preuve par note.

5. Corriger le pire problème

Choisissez la note la plus basse ou le premier FAIL. Corrigez la cause, pas le symptôme : si le texte est illisible sur mobile, corrigez l'échelle typographique et le voile, ne réduisez pas l'image. Gardez le changement petit et local.

6. Répéter

Capturez à nouveau, regardez à nouveau, re-notez les critères que vous avez touchés. Arrêtez-vous lorsque la barre est atteinte. Trois à cinq passages est normal pour une nouvelle page.

Format du rapport de révision

Lorsque vous rapportez une révision, utilisez cette forme pour que les résultats puissent être comparés dans le temps :

Page : <nom>   Passe : <n>   Date : <aaaa-mm-jj>
Grille : idée 8, maîtrise 7, animation 9, ... moyenne 8.1, plus bas 7 (maîtrise)
Bloquant : 11 sur 12 PASS. FAIL : cibles tactiles (3 sous 44 px sur mobile : .nav a, #prev, #next)
Vu : 6 images desktop, 6 images mobile
Pire problème : <une phrase>
Correction appliquée : <une phrase>
Suivant : <une phrase>

Règles empiriques

• Mobile en premier lors de la notation. La plupart des visiteurs arrivent sur mobile. Une page qui est 9 sur desktop et 6 sur mobile est un 6.
• Une animation qui ne peut pas être arrêtée est un bug. Tout ce qui bouge pendant plus de cinq secondes nécessite un contrôle de pause visible, et la réduction de mouvement doit donner une page complète et composée.
• Le défilement doit fonctionner dans les deux sens. Faire défiler vers le haut doit annuler ce que le défilement vers le bas a fait, proprement, à n'importe quelle vitesse.
• Pas d'erreurs silencieuses. Une seule erreur console est un FAIL, même si la page semble correcte. Cela signifie généralement qu'un chemin de repli est cassé.
• Jugez l'image figée et l'image animée. Une capture d'écran montre la composition ; seule l'utilisation de la page montre le timing. Faites les deux.

Liés

• Mesure du temps d'image, paliers de qualité et poids de la page : ../motion-analytics/SKILL.md.
• Construire la page en premier lieu : ../motioncraft-builder/SKILL.md.