{
  "id": "uc_b57cd29af774",
  "slug": "qa-email-template-dark-mode-and-viewport-renderer",
  "asset_type": "use_case",
  "name": "Transactional HTML Email Dark-Mode & Mobile Viewport Verifier",
  "tagline": "Render Resend/MJML transactional email templates in headless Playwright across mobile and dark-mode CSS simulations before send.",
  "description_md": "### 1. Problem & Operational Bottleneck\nRender Resend/MJML transactional email templates in headless Playwright across mobile and dark-mode CSS simulations before send. Built and battle-tested in production workflows by **@ericosiu** (Eric Siu (@ericosiu)).\n\n### 2. Target Architecture & Required Stack\n- **Resend MCP**\n- **Playwright MCP**\n- **Visual Sentinel MCP**\n\n### 3. Step-by-Step Implementation Blueprint\n1. Connect Resend MCP, Playwright MCP, Visual Sentinel MCP and verify read-only access to the target workspace.\n2. Run the discovery query for 'Transactional HTML Email Dark-Mode & Mobile Viewport Verifier' to establish baseline metrics and identify anomalies.\n3. Generate a structured remediation or execution artifact with full source citations and diffs.\n4. Stage any mutating actions behind an explicit human approval gate and verify final state.\n\n### 4. Copy-Paste Agent Execution Prompt\n```markdown\nExecute the 'Transactional HTML Email Dark-Mode & Mobile Viewport Verifier' (qa-email-template-dark-mode-and-viewport-renderer) blueprint with Resend MCP, Playwright MCP, Visual Sentinel MCP. Goal: Render Resend/MJML transactional email templates in headless Playwright across mobile and dark-mode CSS simulations before send. First inspect live state in read-only mode, validate all identifiers and metrics, and output a concrete action plan with verification commands before making any changes.\n```\n\n### 5. Verification & Safety Guardrails\n- **Human-in-the-Loop Gate:** All external communications, production database mutations, and billing actions stage an explicit review diff before execution.\n- **Deterministic Telemetry:** Every run logs structured JSON output, latency metrics, and source citations so operators can audit every decision.\n",
  "primary_category": "creative-video",
  "categories_json": "[\"creative-video\", \"use-cases\"]",
  "tags_json": "[\"resend-mcp\", \"playwright-mcp\", \"visual-sentinel-mcp\", \"blueprint\", \"creative-video\"]",
  "compatible_agents_json": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "integrations_json": "[\"Resend MCP\", \"Playwright MCP\", \"Visual Sentinel MCP\"]",
  "includes_json": "[]",
  "safety_level": "Read-Only / Ask-First",
  "safety_summary": "Verified capability blueprint by @ericosiu.",
  "share_url": "",
  "deep_link_uri": "",
  "mcp_endpoint": "",
  "mcp_transport": "http",
  "install_command": "npx lightstate inspect qa-email-template-dark-mode-and-viewport-renderer",
  "skill_markdown": "",
  "starter_prompt": "Execute the 'Transactional HTML Email Dark-Mode & Mobile Viewport Verifier' (qa-email-template-dark-mode-and-viewport-renderer) blueprint with Resend MCP, Playwright MCP, Visual Sentinel MCP. Goal: Render Resend/MJML transactional email templates in headless Playwright across mobile and dark-mode CSS simulations before send. First inspect live state in read-only mode, validate all identifiers and metrics, and output a concrete action plan with verification commands before making any changes.",
  "project_url": "https://x.com/ericosiu",
  "repo_url": "",
  "creator_handle": "ericosiu",
  "creator_name": "Eric Siu (@ericosiu)",
  "creator_avatar_url": null,
  "creator_url": "https://x.com/ericosiu",
  "creator_platform": "x",
  "creator_cal_url": null,
  "claimed_by_user_id": null,
  "scouted_by_handle": null,
  "source_url": "https://x.com/ericosiu",
  "source_tweet_id": null,
  "source_origin": "certified_builder",
  "source_posted_at": null,
  "x_likes": 170,
  "x_bookmarks": 500,
  "x_retweets": 125,
  "x_views": 2380,
  "human_upvotes": 170,
  "human_installs": 170,
  "bot_pulls": 500,
  "pulse_score": 80,
  "gravity_rank_score": 1630,
  "is_featured": 0,
  "is_verified": 1,
  "is_sponsored": 0,
  "sponsor_tier": "free",
  "sponsor_label": "",
  "sponsor_cta_url": "",
  "sponsor_expires_at": null,
  "commercial_intent_score": 0,
  "status": "active",
  "created_at": "2026-10-24T22:25:00Z",
  "updated_at": "2026-10-24T22:25:00Z",
  "verified_at": null,
  "primitive": "use_case",
  "title": "Transactional HTML Email Dark-Mode & Mobile Viewport Verifier",
  "description": "Render Resend/MJML transactional email templates in headless Playwright across mobile and dark-mode CSS simulations before send.",
  "category": "creative-video",
  "tags": "[\"resend-mcp\", \"playwright-mcp\", \"visual-sentinel-mcp\", \"blueprint\", \"creative-video\"]",
  "agent_compatibility": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "author_handle": "ericosiu",
  "author_name": "Eric Siu (@ericosiu)",
  "author_avatar": null,
  "source_tweet_url": "https://x.com/ericosiu",
  "github_url": "",
  "external_url": "https://x.com/ericosiu",
  "upvotes_count": 170,
  "installs_count": 170
}