CommunityImagegithub.com

email-qa

Analyse les emails transactionnels et digest d'un projet en rendant chaque template sans base de données ni réseau, en prenant des captures d'écran à 600 et 375 px en mode clair, sombre et sans images, et en vérifiant les fuites de placeholders (undefined, NaN, {{…}}), le pré-en-tête, le désabonnement, le texte alternatif, les liens absolus, les boutons compatibles Outlook, la balise viewport et la limite de 102 Ko de Gmail. À utiliser lorsque les modèles d'email changent, avant d'envoyer une campagne, ou lorsqu'on vous demande de vérifier l'apparence des emails.

Qu'est-ce que email-qa ?

Cette compétence QA (assurance qualité) les emails transactionnels et digest d'un projet en automatisant le rendu de chaque modèle d'email sans dépendre d'une base de données ou d'un réseau, en prenant des captures d'écran à des résolutions clés (600 px et 375 px) en modes clair, sombre et sans images, et en effectuant une série de vérifications statiques approfondies. Elle est utile pour les développeurs et les équipes marketing qui ont besoin de s'assurer que les emails s'affichent correctement avant l'envoi de campagnes, en détectant les problèmes courants comme les fuites de placeholders (undefined, NaN, {{…}}), les liens relatifs, l'absence de pré-en-tête, de désabonnement ou de texte alternatif, les problèmes de compatibilité Outlook, et les dépassements de la limite de taille de Gmail (102 Ko). La compétence fonctionne en générant d'abord le HTML final de chaque modèle d'email via un script de rendu (en utilisant un harnais de test dans `/tmp/email-qa/render.ts` si nécessaire), puis en exécutant un script d'audit qui produit des captures d'écran et un rapport JSON listant les problèmes statiques. Enfin, une checklist détaillée est parcourue pour repérer des problèmes plus subtils que le script ne peut pas détecter automatiquement.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iamk3nnyt/claude-skills/tree/HEAD/skills/email-qa

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait email-qa ?

Filtre : $ARGUMENTS Rendu : ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs

1. Obtenir le HTML final pour chaque modèle

  • Le script de galerie existe-t-il ? Recherchez dans package.json email-gallery, email:preview ou emails. Si l'un d'eux écrit chaque modèle avec des données de fixture, exécutez-le et utilisez son répertoire de sortie.
  • Sinon, écrivez un harnais dans /tmp/email-qa/render.ts (en dehors du dépôt, sauf si l'utilisateur souhaite le conserver) :
    • importez chaque moteur de rendu (React Email render(), fonctions template-literal, MJML) ;
    • appelez-le avec des fixtures réalistes, y compris des cas limites : un nom long, un champ facultatif manquant, 0, 1 et plusieurs éléments, et les deux locales ;
    • écrivez <template>-<case>.html ;
    • stub tout ce qui lit l'env, la base de données ou le réseau. Exécutez-le avec tsx du dépôt.
  • QA toujours le HTML final généré, jamais le JSX.

2. Rendu + vérifications statiques

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

Pour chaque fichier, cela produit des versions @600/@375 claire et sombre, plus une version @600-noimg, et un fichier render.json avec les problèmes statiques. Lisez les feuilles pour chaque modèle.

3. Checklist (au-delà de ce que le script signale)

  • Placeholders : aucun des undefined, NaN, null, [object Object], {{…}}, Invalid Date, kr vide, 0 st là où il devrait être masqué.
  • Pré-en-tête : présent, significatif et non une répétition de l'objet. Rembourré pour que le texte du corps ne fuite pas dans l'aperçu de la boîte de réception.
  • Désabonnement : obligatoire pour les digest et les e-mails marketing (plus les en-têtes List-Unsubscribe + List-Unsubscribe-Post dans le code d'envoi). Les e-mails transactionnels sont exemptés ; indiquez de quel type il s'agit pour chaque modèle.
  • Images désactivées : le message a toujours du sens, il y a un texte alternatif sur chaque image significative, alt="" sur les espaceurs, et le CTA est un texte en direct, pas une image.
  • Mode sombre : les logos ont une variante transparente ou adaptée au mode sombre, il n'y a pas de texte sombre sur un fond désormais sombre, et la couleur de marque passe toujours 3:1. L'inversion forcée de Gmail/Outlook ne peut pas être émulée, signalez donc le texte #000 codé en dur sur des fonds transparents comme un risque.
  • Outlook desktop : disposition en tableau, pas de flex/grid, VML ou mso de rembourrage pour les boutons, largeurs dans les attributs width=, pas de margin sur les éléments de bloc pour l'espacement.
  • Liens : https:// absolus, UTM si le projet les utilise, pas d'hôtes localhost ou de prévisualisation, et pas de suivi sur le désabonnement.
  • Copie : locale correcte partout (exécutez les règles copy-check sur les chaînes), nom de l'expéditeur, et reply-to (correspond à ce que le projet attend).
  • CTA visible sans défilement à 375 et non coupé. Le total reste inférieur à ~102 Ko.

Critères de sortie

  • Chaque modèle est rendu dans toutes ses variantes et les feuilles ont été lues.
  • Aucune fuite de placeholder ou lien relatif, et la balise viewport est présente.
  • Chaque problème restant est étiqueté bug (corrigé) ou risque (signalé).
  • Un bref résumé à l'utilisateur, plus le répertoire des captures.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

iamk3nnyt/claude-skills

Applies an agreed visual direction to a page or component by reusing existing components first, then verifies every width and dark mode with the headless-Chrome audit plus a before/after pixel diff, and reviews against Refactoring UI, Nielsen and WCAG 2.2. Use when asked to redesign, restyle, polish or "make it look like the reference", after design-ref or when the direction is already clear.

iamk3nnyt/claude-skills

Extracts the visual system from a reference site or pasted HTML (colour roles, type scale, spacing scale, radii, shadows, button/card/eyebrow anatomy, tone) and maps it onto the current project's existing tokens as a short token table. Use when the user shares a reference ("make it look like <site>", "in this style", a URL or HTML paste) before a redesign.

Skills associés

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Image skills