Motion-Review

Was macht Motion-Review?

Eine Bewegungsseite ist nicht fertig, wenn sie auf Ihrem Monitor funktioniert. Sie ist fertig, wenn sie in einer festen Rubrik gut abschneidet, alle blockierenden Prüfungen auf Desktop- und Telefongröße besteht und Sie das Ergebnis angesehen haben, anstatt dem Code zu vertrauen.

Dieses Skill gibt Ihnen drei Dinge:

1. Einen Look-and-Fix-Zyklus: Screenshot machen, bewerten, das Schlimmste beheben, erneut Screenshot machen.
2. Eine Rubrik mit 10 Kriterien, bewertet von 1 bis 10, mit Beschreibung, wie eine 5, 8 und 10 aussehen: references/rubric.md.
3. Eine blockierende QA-Checkliste und zwei eigenständige Skripte, die sie messen: references/qa-checklist.md, scripts/section-shots.mjs, scripts/qa-lite.mjs.

Der Standard

• Rubrik-Durchschnitt von 8 oder höher und kein einzelnes Kriterium unter 7.
• Jede blockierende Prüfung besteht bei 1440x900 und 390x844.
• Sie haben jeden Abschnitt gesehen in beiden Größen. Eine Überprüfung ohne Screenshots ist eine Schätzung.

Wenn die Seite den Standard nicht erreicht, ist sie nicht bereit, egal wie gut der Hero aussieht.

Anforderungen

• Node 18 oder neuer.
• Playwright im Projekt, das Sie überprüfen: npm i -D playwright dann npx playwright install chromium. Oder verwenden Sie ein installiertes Chrome mit playwright-core und übergeben Sie --chrome "<Pfad zu Chrome>". Die Skripte finden Chrome oder Edge an den üblichen Orten unter Windows, macOS und Linux von selbst.
• Optional: npm i -D sharp für Kontaktbögen. Ohne sharp erhalten Sie trotzdem jedes PNG.
• Führen Sie die Skripte aus Ihrem Projektordner aus. Sie suchen zuerst nach Playwright und sharp im Ordner, von dem aus Sie sie ausführen, dann neben dem Skript. Eine Installation in Ihrem Projekt reicht also aus. Die Skriptpfade unten sind relativ zu diesem Skill-Ordner. Claude Code zeigt diesen Ordner an, wenn das Skill geladen wird; nach einem manuellen Kopieren ist es beispielsweise ~/.claude/skills/motion-review/, also lautet der vollständige Aufruf node ~/.claude/skills/motion-review/scripts/qa-lite.mjs ./site.

Die ?shot=N-Konvention

Die Skripte öffnen index.html?shot=N und erwarten, dass die Seite auf Abschnitt N springt. Fügen Sie dies einmal zu Ihrer Seite hinzu (es kostet ein paar Zeilen und macht jede Überprüfung wiederholbar):

// QA-Hook: ?shot=N scrollt Abschnitt N nach dem Laden in die Mitte des Viewports.
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);
});

Springen Sie bei einem Film oder einem einmalig abspielbaren Intro auch die Timeline in ihren stabilen Zustand, wenn ?shot vorhanden ist, damit der Screenshot den zusammengesetzten Frame und nicht Frame 1 zeigt. Für zeitgesteuerte Filme siehe die faire Erfassungsmethode im Analytics-Skill: ../motion-analytics/references/reference-grading.md.

Der Look-and-Fix-Zyklus

Führen Sie diesen Zyklus aus, bis die Seite den Standard erfüllt. Jeder Durchgang sollte zuerst das einzelne schädlichste Problem beheben, nicht zehn kleine auf einmal.

1. Screenshots erstellen

node scripts/section-shots.mjs ./meine-seite 6 ./qa/shots

Dies stellt ./meine-seite auf einem lokalen Port bereit, öffnet index.html?shot=0 bis ?shot=5 in Desktop- und Telefongröße, schreibt d0.png ... d5.png, p0.png ... p5.png sowie desk-sheet.png und phone-sheet.png, wenn sharp installiert ist. Es gibt jeden Seitenfehler und Konsolenfehler aus, den es gesehen hat.

2. Ansehen

Öffnen Sie zuerst die beiden Kontaktbögen, dann die Einzelframes. Fragen Sie abschnittsweise:

• Ist die eine Idee der Seite in diesem Frame sichtbar oder ist dies ein generischer Abschnitt?
• Hat der Telefon-Frame seine eigene Komposition oder ist es der gequetschte Desktop?
• Liegt irgendein Text auf einem unruhigen Teil des Bildes?
• Ist etwas abgeschnitten, überlappend, leer oder lädt noch?
• Sieht jeder Abschnitt wie dieselbe Marke aus?

Schreiben Sie auf, was Sie in einfachen Worten sehen, bevor Sie bewerten. „Die Telefon-Hero-Überschrift bedeckt das Gesicht des Motivs“ ist nützlich. „Sieht gut aus“ ist es nicht.

3. Überprüfen

node scripts/qa-lite.mjs ./meine-seite

Es gibt PASS oder FAIL pro blockierender Prüfung aus, mit den gemessenen Werten. Jedes FAIL blockiert die Veröffentlichung. Siehe references/qa-checklist.md für die Bedeutung jeder Prüfung, wie das Skript sie misst und die übliche Behebung.

Einige Prüfungen erfordern einen Menschen: Stoppt die Pausensteuerung alles, was sich bewegt, läuft das Scrollen nach einem schnellen Wurf sauber rückwärts, fühlt sich die Seite mit Ton richtig an. Die Checkliste markiert diese als manuell. Führen Sie sie durch.

4. Bewerten

Bewerten Sie alle 10 Rubrik-Kriterien anhand der Screenshots und durch die Nutzung der Seite. Verwenden Sie die Anker in references/rubric.md. Bewerten Sie, was auf dem Bildschirm zu sehen ist, nicht was der Code beabsichtigt. Schreiben Sie einen Satz Nachweis pro Bewertung.

5. Das Schlimmste beheben

Wählen Sie die niedrigste Bewertung oder das erste FAIL aus. Beheben Sie die Ursache, nicht das Symptom: Wenn Text auf dem Telefon unleserlich ist, beheben Sie die Schriftskalierung und die Abschattung, verkleinern Sie nicht das Bild. Halten Sie die Änderung klein und lokal.

6. Wiederholen

Erstellen Sie erneut Screenshots, sehen Sie erneut nach, bewerten Sie die Kriterien neu, die Sie berührt haben. Hören Sie auf, wenn der Standard erfüllt ist. Drei bis fünf Durchgänge sind normal für eine neue Seite.

Berichtsformat für die Überprüfung

Wenn Sie eine Überprüfung melden, verwenden Sie diese Struktur, damit Ergebnisse im Laufe der Zeit verglichen werden können:

Seite: <Name>   Bestanden: <n>   Datum: <yyyy-mm-dd>
Rubrik: Idee 8, Handwerk 7, Bewegung 9, ... Durchschnitt 8,1, niedrigste 7 (Handwerk)
Blockierend: 11 von 12 BESTANDEN. FEHLGESCHLAGEN: Tippziele (3 unter 44 px auf Telefon: .nav a, #prev, #next)
Gesehen: 6 Desktop, 6 Telefon-Frames
Schlimmstes Problem: <ein Satz>
Angewendete Behebung: <ein Satz>
Nächstes: <ein Satz>

Faustregeln

• Telefon zuerst bewerten. Die meisten Besucher kommen über ein Telefon. Eine Seite, die auf dem Desktop eine 9 und auf dem Telefon eine 6 ist, ist eine 6.
• Bewegung, die Sie nicht stoppen können, ist ein Fehler. Alles, das sich länger als fünf Sekunden bewegt, benötigt eine sichtbare Pausensteuerung, und reduzierte Bewegung muss eine vollständige, zusammengesetzte Seite ergeben.
• Scrollen muss in beide Richtungen funktionieren. Scrollen nach oben muss das, was Scrollen nach unten getan hat, rückgängig machen, sauber, bei jeder Geschwindigkeit.
• Keine stillen Fehler. Ein Konsolenfehler ist ein FAIL, selbst wenn die Seite gut aussieht. Es bedeutet normalerweise, dass ein Fallback-Pfad defekt ist.
• Bewerten Sie den stabilen Frame und den bewegten Frame. Ein Screenshot zeigt die Komposition; nur die Nutzung der Seite zeigt das Timing. Tun Sie beides.

Verwandte Skills

• Messen von Framedauer, Qualitätsstufen und Seitengewicht: ../motion-analytics/SKILL.md.
• Die Seite erstmalig erstellen: ../motioncraft-builder/SKILL.md.