email-qa
フィルター: $ARGUMENTS
レンダラー: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs
1. すべてのテンプレートの最終HTMLを取得する
- ギャラリースクリプトは存在するか？
package.jsonでemail-gallery、email:preview、またはemailsを探します。これらのスクリプトがフィクスチャデータを使ってすべてのテンプレートを書き出す場合は、それを実行し、その出力ディレクトリを使用します。 - それ以外の場合はハーネスを作成する （ユーザーが保持を希望しない限り、リポジトリ外の
/tmp/email-qa/render.tsに作成）:- 各レンダラー（React Email の
render()、テンプレートリテラル関数、MJML）をインポートします。 - 現実的なフィクスチャを使って呼び出します。エッジケースとして、長い名前、欠落したオプションフィールド、0 / 1 / 多数のアイテム、両方のロケールを含めます。
<テンプレート>-<ケース>.htmlを書き出します。- env、DB、ネットワークを読み取るものはすべてスタブにします。リポジトリの
tsxを使って実行します。
- 各レンダラー（React Email の
- 常に 最終生成HTML をQAし、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テキストがあること、スペーサーには
alt=""、CTAは画像ではなく生テキストであること。 - ダークモード: ロゴは透明またはダークモード対応のバリアントがあること、暗い背景に暗いテキストがないこと、ブランドカラーがまだ3:1のコントラスト比を満たしていること。Gmail/Outlookの強制反転はエミュレートできないため、透明背景上のハードコードされた
#000テキストはリスクとしてフラグすること。 - Outlook デスクトップ: テーブルレイアウト、フレックス/グリッドなし、VMLまたは
msoパディングフォールバックを使用したボタン、width=属性での幅指定、ブロック要素のマージンによるスペーシング禁止。 - リンク: 絶対
https://、プロジェクトで使用している場合はUTM、localhostやプレビューホストなし、配信停止リンクにトラッキングなし。 - コピー: 全体で正しいロケールであること（文字列に対して
copy-checkルールを実行）、送信者名、返信先（プロジェクトの期待と一致すること）。 - CTAが375pxでスクロールせずに表示され、クリップされていないこと。 合計サイズが約102KB以内であること。
終了条件
- すべてのテンプレートが全バリアントでレンダリングされ、シートがすべて読み込まれている。
- プレースホルダーの漏れや相対リンクがなく、ビューポートメタタグが存在する。
- 残った各問題は、バグ（修正済み）またはリスク（報告済み）としてラベル付けされる。
- ユーザーへの短いサマリーと、スクリーンショットディレクトリが提供される。