電子郵件 QA
過濾器: $ARGUMENTS
渲染器: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs
1. 取得每個模板的最終 HTML
- 是否有 Gallery 腳本？ 在 package.json 中尋找
email-gallery、email:preview或emails。如果有腳本會使用測試數據寫出每個模板，則執行它並使用其輸出目錄。 - 否則在
/tmp/email-qa/render.ts中編寫一個測試工具（除非使用者希望保留在儲存庫中，否則放在儲存庫外）：- 匯入每個渲染器（React Email
render()、範本字串函數、MJML）； - 使用實際的測試數據呼叫它，包括邊緣情況：長名稱、遺失的選填欄位、0 個、1 個和多個項目，以及兩種語系；
- 寫出
<模板>-<案例>.html； - 對任何讀取環境變數、資料庫或網路的操作進行模擬。使用儲存庫的
tsx執行。
- 匯入每個渲染器（React Email
- 始終 QA 最終生成的 HTML，而不是 JSX。
2. 渲染 + 靜態檢查
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs /tmp/email-qa/out/*.html --out /tmp/email-qa/shots
對於每個檔案，這會產生 @600/@375 的淺色和深色模式截圖，加上 @600-noimg，以及包含靜態問題的 render.json。閱讀每個模板的報告。
3. 檢查清單（腳本標記之外的項目）
- 佔位符： 不得出現
undefined、NaN、null、[object Object]、{{…}}、Invalid Date、空的kr、本應隱藏卻出現的0 st。 - 預覽文字： 存在、有意義，且不與主旨重複。需添加填充，以防止正文文字洩漏到收件匣預覽中。
- 取消訂閱： 摘要郵件和行銷郵件必須提供（在傳送程式碼中還需加上
List-Unsubscribe+List-Unsubscribe-Post標頭）。交易郵件可以免除此要求；請說明每個模板的類型。 - 關閉圖片時： 訊息仍然可理解，每個有意義的圖片都有替代文字，間隔圖片的
alt=""，且 CTA 是文字而非圖片。 - 深色模式： Logo 需有透明或深色安全的變體，無深色文字在現在變成深色的背景上，且品牌顏色仍能通過 3:1 對比度。Gmail/Outlook 的強制反色無法模擬，因此將透明背景上的硬編碼
#000文字標記為風險。 - Outlook 桌面版： 使用表格佈局、無 flex/grid、按鈕使用 VML 或
mso填充後備方案、寬度使用width=屬性、不使用margin在區塊元素之間產生間距。 - 連結： 使用絕對
https://、專案使用時需帶 UTM、無 localhost 或預覽主機、且取消訂閱連結不帶追蹤。 - 文案： 整個模板語言正確（對字串執行
copy-check規則）、寄件人名稱、回覆地址（符合專案預期）。 - CTA 在 375 寬度下無需滾動即可見 且未被裁剪。總大小保持在約 102 KB 以下。
退出條件
- 每個模板都以所有變體渲染，且報告已被閱讀。
- 無佔位符洩漏或相對連結，且視口 meta 存在。
- 每個遺留問題被標記為錯誤（已修正）或風險（已報告）。
- 向使用者提供簡短摘要，以及截圖目錄的路徑。