CommunityImagengithub.com

pruebas-email-qa

Realiza QA de correos transaccionales y de resumen renderizando cada plantilla sin BD ni red, capturando pantallas a 600 y 375 px en modo claro, oscuro y sin imágenes, y detectando fugas de marcadores de posición (undefined, NaN, {{…}}), preheader, unsubscribe, texto alternativo, enlaces absolutos, botones seguros para Outlook, meta viewport y el límite de 102 KB de Gmail.

¿Qué es pruebas-email-qa?

Esta habilidad automatiza el aseguramiento de calidad de correos electrónicos transaccionales y de resumen (digest). Extrae el HTML final de cada plantilla—usando herramientas existentes como `email-gallery` o creando un harness personalizado—y luego ejecuta un script de renderizado que produce capturas de pantalla a 600 y 375 píxeles en modo claro, oscuro y sin imágenes, además de un archivo `render.json` con problemas estáticos. La revisión manual complementaria verifica que no haya fugas de marcadores de posición (como `undefined`, `NaN`, `{{…}}`), que el preheader esté presente y sea significativo, que el enlace de cancelación de suscripción (unsubscribe) sea correcto, que el texto alternativo (alt text) esté completo para imágenes significativas, que los enlaces sean absolutos con HTTPS, que los botones sean seguros para Outlook (usando VML o `mso`), que haya meta viewport, y que el tamaño total no supere los 102 KB de Gmail. Es especialmente útil justo después de modificar las plantillas, antes de enviar una campaña o cuando se pide revisar cómo se ven los correos. La habilidad termina con una lista de verificación y criterios de salida claros, generando un resumen para el usuario y un directorio con las capturas.

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

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

Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

email-qa

Filtro: $ARGUMENTS Renderizador: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs

1. Obtén el HTML final para cada plantilla

  • ¿Existe un script de galería? Busca en package.json email-gallery, email:preview o emails. Si genera cada plantilla con datos de prueba, ejecútalo y usa su directorio de salida.
  • De lo contrario, crea un harness en /tmp/email-qa/render.ts (fuera del repositorio a menos que el usuario quiera conservarlo):
    • importa cada renderizador (render() de React Email, funciones basadas en literales de plantilla, MJML);
    • llámalo con datos de prueba realistas, incluidos casos extremos: un nombre largo, un campo opcional faltante, 0 y 1 y muchos elementos, y ambas configuraciones regionales;
    • escribe <plantilla>-<caso>.html;
    • simula todo lo que lea env, BD o red. Ejecútalo con tsx del repositorio.
  • Siempre revisa el HTML final generado, nunca el JSX.

2. Renderizado + comprobaciones estáticas

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

Para cada archivo, esto produce @600/@375 en modo claro y oscuro, además de @600-noimg, y render.json con problemas estáticos. Lee las hojas de cada plantilla.

3. Lista de verificación (más allá de lo que marca el script)

  • Marcadores de posición: ninguno de undefined, NaN, null, [object Object], {{…}}, Invalid Date, kr vacío, 0 st donde debería estar oculto.
  • Preheader: presente, significativo y que no repita el asunto. Con relleno para que el texto del cuerpo no se filtre en la vista previa de la bandeja de entrada.
  • Cancelación de suscripción: requerida para resúmenes y correos de marketing (además de las cabeceras List-Unsubscribe + List-Unsubscribe-Post en el código de envío). Los correos transaccionales están exentos; indica de qué tipo es cada plantilla.
  • Imágenes desactivadas: el mensaje aún se entiende, hay texto alternativo en cada imagen importante, alt="" en espaciadores, y la CTA es texto vivo, no una imagen.
  • Modo oscuro: los logotipos tienen una variante transparente o segura para modo oscuro, no hay texto oscuro sobre un fondo que ahora es oscuro, y el color de marca sigue pasando 3:1. La inversión forzada de Gmail/Outlook no se puede emular, así que marca el texto #000 duro sobre fondos transparentes como un riesgo.
  • Outlook de escritorio: diseño en tabla, sin flex/grid, VML o mso con relleno de respaldo para botones, anchos en atributos width=, sin margin en elementos de bloque para espaciado.
  • Enlaces: absolutos https://, con UTM si el proyecto los usa, sin localhost ni hosts de vista previa, y sin seguimiento en el enlace de cancelación.
  • Copia: configuración regional correcta en todo el texto (ejecuta las reglas de copy-check en las cadenas), nombre del remitente y reply-to (que coincidan con lo que espera el proyecto).
  • CTA visible sin desplazamiento a 375 y no recortada. El total se mantiene por debajo de ~102 KB.

Criterios de salida

  • Cada plantilla está renderizada en todas las variantes y se han leído las hojas.
  • No hay fugas de marcadores de posición ni enlaces relativos, y la meta viewport está presente.
  • Cada problema restante está etiquetado como error (corregido) o riesgo (reportado).
  • Un breve resumen para el usuario, más el directorio de capturas.

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 relacionados

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 Imagen skills