iamk3nnyt/claude-skills

email-qa

Filter: $ARGUMENTS Renderer: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs

1. Endgültiges HTML für jede Vorlage abrufen

• Galerie-Skript vorhanden? Suche in package.json nach email-gallery, email:preview oder emails. Wenn eines alle Vorlagen mit Fixture-Daten schreibt, führe es aus und verwende das Ausgabeverzeichnis.
• Andernfalls schreibe ein Harness in /tmp/email-qa/render.ts (außerhalb des Repositorys, es sei denn, der Benutzer möchte es behalten):
  • importiere jeden Renderer (React Email render(), Template-Literal-Funktionen, MJML);
  • rufe es mit realistischen Fixtures auf, einschließlich Grenzfällen: einem langen Namen, einem fehlenden optionalen Feld, 0 und 1 und vielen Elementen sowie beiden Gebietsschemata;
  • schreibe <template>-<case>.html;
  • stubbe alles, was env, DB oder Netzwerk liest. Führe es mit dem tsx des Repositorys aus.
• Überprüfe immer das finale generierte HTML, niemals das JSX.

2. Rendern + statische Prüfungen

node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs /tmp/email-qa/out/*.html --out /tmp/email-qa/shots

Für jede Datei werden @600/@375 hell und dunkel sowie @600-noimg und render.json mit statischen Problemen erstellt. Lies die Blätter für jede Vorlage.

3. Checkliste (über das hinaus, was das Skript markiert)

• Platzhalter: kein undefined, NaN, null, [object Object], {{…}}, Invalid Date, leeres kr, 0 st wo es ausgeblendet werden sollte.
• Preheader: vorhanden, aussagekräftig und keine Wiederholung des Betreffs. Aufgefüllt, damit der Textkörper nicht in die Inbox-Vorschau sickert.
• Abmeldelink: erforderlich für Zusammenfassungen und Marketing (plus List-Unsubscribe + List-Unsubscribe-Post Header im Sendecode). Transaktions-E-Mails sind ausgenommen; sage, welcher Typ jede Vorlage ist.
• Bilder aus: Die Nachricht ergibt immer noch Sinn, Alternativtext ist auf jedem sinnvollen Bild vorhanden, alt="" auf Abstandshaltern, und der CTA ist Live-Text, kein Bild.
• Dunkler Modus: Logos haben eine transparente oder dunkelsichere Variante, kein dunkler Text auf einem jetzt dunklen Hintergrund, und die Markenfarbe besteht weiterhin 3:1. Die erzwungene Inversion von Gmail/Outlook kann nicht emuliert werden, daher markiere hartcodiertes #000 Text auf transparentem Hintergrund als Risiko.
• Outlook Desktop: Tabellenlayout, kein Flex/Grid, VML- oder mso-Padding-Fallback für Buttons, Breiten in width=-Attributen, kein margin auf Blockelementen für Abstände.
• Links: absolut https://, UTM wo das Projekt sie verwendet, kein localhost oder Vorschau-Hosts, und kein Tracking auf Abmeldelink.
• Kopie: richtiges Gebietsschema durchgehend (führe copy-check Regeln auf den Zeichenfolgen aus), Absendername und Reply-to (entspricht den Erwartungen des Projekts).
• CTA bei 375 ohne Scrollen sichtbar und nicht abgeschnitten. Die Gesamtgröße bleibt unter ~102 KB.

Exit-Kriterien

• Jede Vorlage wird in allen Varianten gerendert und die Blätter wurden gelesen.
• Keine Platzhalterlecks oder relativen Links, und das Viewport-Meta ist vorhanden.
• Jedes verbleibende Problem ist als Bug (behoben) oder Risiko (gemeldet) gekennzeichnet.
• Eine kurze Zusammenfassung an den Benutzer, plus das Shots-Verzeichnis.