Communitygithub.com

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

ランディングページ用SMTPベースの自動メール返信機能をセットアップ。ユーザーがフォーム(名前/電話番号/メールアドレス)を送信した後に自動的にメールを送信します。特定のプロバイダーに依存しません。

MKT.LANDINGPAGE.SKILLS とは?

このスキルは、ランディングページのフォーム送信をトリガーに、2通の自動メール(リード向けウェルカムメールとオーナー向け通知メール)を送信するSMTPベースのメール自動応答システムを構築します。Next.js、Vite、静的HTMLなど、さまざまなプロジェクトスタックに対応し、Gmail、Resend、SendGrid、Mailgun、Brevo、Zoho、カスタムSMTPなど7つのプロバイダーから選択可能で、ベンダーロックインを回避します。このスキルは、`offer.json`や`conversion-copy.md`などの既存のパイプライン成果物からコンテキストを収集するか、ランディングページのコードやデプロイ済みHTMLを直接解析して、オファー、望ましい成果、仕組み、特典を理解します。その後、オファーの種類に応じて最適なメールパターン(リードマグネット、予約確認、支払いリマインダー、ナーチャリング、購入後オンボーディング)を提案し、カスタマイズ可能なドラフトを生成します。重要なのは、実際のコードを生成する前にユーザーがドラフトを確認・編集できるようにすることで、ブランドボイスとメッセージングを完全に制御できることです。最終的に、`nodemailer`を使用してAPIルートを配線し、環境変数を設定し、プロバイダーのセットアップとテストのためのステップバイステップのガイドを提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lexuanthanhhy/MKT.LANDINGPAGE.SKILLS/tree/main/.claude/skills/biz-email-setup

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Biz SMTP Form Autoresponder — リードがフォームを送信した後の自動メール送信

このスキルは、ランディングページの登録フォーム(VNトラフィック標準の名前/電話番号/メールアドレス)を、ユーザーが送信した直後に2通の自動メールに変換します。(A) リードに送信するウェルカムメール、(B) オーナーに送信する通知メール。メールは、biz-* パイプラインの既存コンテキストに基づいて各オファーごとに個別にドラフトされます(「ご登録ありがとうございます。すぐにご連絡いたします」などの一般的なコピーではありません。それはリードを冷やすコピーです)。

哲学: 自動返信メールはゴールデンモーメントです。リードが送信ボタンを押した瞬間 = ピークインテントにあります。30秒以内に届くメールは、(1) 正しく送信されたことを確認し、(2) CTAで約束したもの(リードマグネット/予約/支払いリンク)を提供し、(3) 次のステップを明確に設定する必要があります。優れた自動返信メールは、20〜40%のコールドリードをホットリードに変えます。一般的なメールは、リードが送信者をブロックしたり、24時間以内にブランド名を忘れたりします。

なぜSMTPか(1つのプロバイダーにロックインされない): SMTPはオープンな標準です。ユーザーは予算、地域、コンプライアンスに合ったプロバイダーを選択できます。Gmail SMTPは1日500通まで無料(1日50リード未満のランディングページに十分)、Resend SMTPは月3000通、SendGridは永久無料で1日100通、Brevo(VNで人気)は無料で1日300通、VNホスティング(Mắt Bão/PA/Inet)は通常SMTPが付属しています。コードはnodemailerを使用します。プロバイダーの変更は4つの環境変数を変更するだけで、コードの修正は不要です。ベンダーロックインを回避します。

出力: コードパッチ + 2通のメールドラフト(HTMLレスポンシブ) + 環境変数リスト + テスト計画。スキルはテストメールを自動送信しません — ユーザーは事前にドラフトを確認する必要があります。リードマグネットリンク、ブランドボイス、緊急性を促す文言はすべてユーザーの資産だからです。


このスキルを使用するタイミング

  • ユーザーがランディングページをデプロイしたばかりで(/biz-deploy-vercel経由)、フォームが宙に浮いた状態で送信されている場合。
  • ユーザーが既存のランディングページ(Next.js、Vite、またはVercel上の静的HTML)を持っており、メール自動応答機能を組み込みたい場合。
  • ユーザーが新しいページを構築中で、デプロイ前に最初からメール統合を希望する場合。
  • ユーザーが既にGmail/Google Workspaceを持っており、新しいプロバイダーアカウントを作成する代わりに無料のSMTPを活用したい場合。
  • ユーザーがVNホスティング(Mắt Bão、PA、Inet)を持っており、既存のSMTPサーバーを使用したい場合。

このスキルを使用しない場合:

  • ユーザーがメールマーケティング配信(ニュースレター、7〜30日のドリップキャンペーン)を希望する場合 → Mailchimp/ConvertKit/MailerLiteの方が適しています。
  • ユーザーがSMS/Zalo OAの自動応答を希望する場合 → 別のユースケースです。
  • ユーザーがCRM統合(リードをHubspot/Pipedrive/Notion DBに入れる)を希望する場合 → 別のスキルです。
  • ユーザーが大量のコールドメールアウトリーチを必要とする場合 → Instantly/Smartlead。トランザクショナルメールではありません。

ワークフロー概要(7フェーズ)

フェーズ 0: プロジェクトスタックの検出 (Next.js App / Pages / Vite / 静的HTML)
       ↓
フェーズ 1: SMTPプロバイダーの選択 (Gmail / Resend SMTP / SendGrid / Mailgun / Brevo / Zoho / カスタム)
       ↓
フェーズ 2: コンテキストの収集 (offer.json + conversion-copy.md、またはNext.jsのapp/page.tsxを読む、またはデプロイ済みHTMLを読む)
       ↓
フェーズ 3: メールパターンの選択 (リードマグネット / 予約 / 支払い / ナーチャリング)
       ↓
フェーズ 4: 2通のメールドラフト(自動返信 + オーナー通知) — ユーザーに表示
       ↓
フェーズ 5: ユーザーレビュー & 編集 — ユーザーが承認するまで繰り返し
       ↓
フェーズ 6: コードの配線 (nodemailerのインストール + APIルート + フォームバインディング + 環境変数)
       ↓
フェーズ 7: プロバイダーセットアップ + テスト計画 — SMTP認証情報の取得、ドメイン確認(必要な場合)、ライブテストの手順

各フェーズではユーザーに確認を求めます — 特にフェーズ1(プロバイダー選択)、フェーズ4-5(メール内容)、フェーズ7(プロバイダーDNS)はユーザーのブランド資産であるため、重要です。フェーズ6のコード生成では、スキルがより積極的になります。


フェーズ 0 — プロジェクトスタックの検出

プロジェクトのルートファイルを読み取り、スタックを特定します。スタックによって、APIルートの配置場所、nodemailerのインポート構文、フォームバインディングの種類(fetchかform actionか)が決まります。

検出ファイルスタックAPIルートパスフォームバインディング
next.config.js/mjs/ts + app/ フォルダNext.js App Routerapp/api/submit/route.tsクライアントコンポーネント fetch('/api/submit')
next.config.js/mjs/ts + pages/ フォルダNext.js Pages Routerpages/api/submit.tsクライアントコンポーネント fetch('/api/submit')
vite.config.js/tsVite (React/Vue/Svelte)api/submit.js (Vercel関数)クライアントコンポーネント fetch('/api/submit')
package.json にフレームワークなし、index.html あり静的HTMLapi/submit.js (Vercel関数)インライン <script> と fetch('/api/submit')
ローカルプロジェクトなし、URLのみ既存のデプロイ済みページユーザーが事前にリポジトリをクローンするか、リポジトリパスを指定する必要あり—

フォームフィールドを特定するための追加読み取り:

  • コード内の <form> を検索 → 既存の <input name="..."> をリストアップ
  • デフォルトの期待値(プロジェクトメモリーによる): name、phone、email。一部のページでは company、message、budget、utm_source を追加。
  • フォームがまだ存在しない場合 → スキルはフェーズ6で最低3つのフィールド(名前/電話番号/メールアドレス)を持つ新しいフォームを作成します。

重要: ユーザーにローカルプロジェクトがない場合(デプロイ済みURLのみ)、処理を停止して質問します: 「コードを組み込むためのローカルリポジトリはありますか?ソースファイルを編集する必要があります。URLのみの場合、リポジトリをクローンしてパスを教えてください。」 URLだけではコードを組み込めません。


フェーズ 1 — SMTPプロバイダーの選択

ユーザーに7つのプロバイダーから1つを選択してもらいます。各プロバイダーはSMTP設定(ホスト/ポート/認証)が異なり、ユーザーが選択するとスキルが自動的に環境変数テンプレートを入力します。

#プロバイダー無料枠適しているケースSMTPホストポート備考
1Gmail / Google Workspace500通/日ユーザーが既にGmail/Workspaceを持っており、トラフィックが少ないsmtp.gmail.com587 (STARTTLS)アプリパスワード(2FA)必須。メインパスワードは使用不可。
2Resend SMTP3000通/月高い到達性と優れたログを求める場合、DNS設定に問題がない場合smtp.resend.com587ユーザー名 = resend、パスワード = APIキー。カスタム @brand.vn から送信するにはドメイン確認が必要。
3SendGrid SMTP100通/日(永久無料)スタックが既にSendGridに慣れており、webhookが必要な場合smtp.sendgrid.net587ユーザー名 = リテラル apikey、パスワード = APIキー
4Mailgun SMTP100通/日 × 3ヶ月EU/USリージョン、開発者フレンドリーsmtp.mailgun.org (US) または smtp.eu.mailgun.org (EU)587ユーザー名/パスワードはMailgunドメイン設定から
5Brevo (Sendinblue) SMTP300通/日(永久無料)VNで人気。最も広範な無料枠。 VNサポートありsmtp-relay.brevo.com587ユーザー名 = ログインメール、パスワード = SMTPキー(APIキーとは別)
6Zoho Mail SMTP5通/日(無料)、$1/ユーザー/月ユーザーが既にZoho Workspaceを使用している場合smtp.zoho.com5872FAが有効な場合はアプリパスワードが必要
7カスタムSMTPホスティングに依存VNホスティング(Mắt Bão/PA/Inet/Nhân Hòa)にSMTPが付属している場合、またはPostfixをセルフホストしている場合ユーザーが提供ユーザーが提供ユーザーが完全なホスト/ポート/ユーザー名/パスワードを入力

オファータイプに基づくデフォルトの推奨:

  • 1日50リード未満のランディングページで、ユーザーがGmailを持っている場合 → Gmail SMTP(ゼロコスト、5分でセットアップ)。
  • 1日50リード以上のランディングページ、またはプロフェッショナルな到達性が必要な場合 → Brevo(無料で1日300通、VNでの到達性が良好)または Resend SMTP(月3000通、ログが優れている)。
  • ユーザーが移行に強く、後でセルフホストできるようにしたい場合 → 最初からカスタムSMTP。

ユーザーへの質問形式:

自動メール送信にどのSMTPプロバイダーを使用しますか?

1. Gmail / Google Workspace(無料500通/日、Gmailを持っていれば最も簡単)
2. Resend SMTP(無料3000通/月、到達性が高い、ドメイン確認が必要)
3. SendGrid SMTP(無料100通/日永久、APIに慣れている場合)
4. Mailgun SMTP(無料100通/日 × 3ヶ月)
5. Brevo / Sendinblue SMTP(無料300通/日、VNで人気)
6. Zoho Mail SMTP(既にZoho Workspaceを使用している場合)
7. カスタムSMTP(お使いのVNホスティングに付属している、またはセルフホスト)

まだどのアカウントもお持ちでない場合、[トラフィックが少なければGmail / 高い到達性が必要ならBrevo]をお勧めします。番号を選んでください。

ユーザーが選択したら → フェーズ6で環境変数テンプレートに注入するために保存し、フェーズ7で正しいプロバイダーの認証情報を取得する手順を案内します。

⚠️ 重要 — セキュリティ: SMTP認証情報(特にGmailアプリパスワード)は、ユーザーのアカウントからメールを送信する権限を持っています。ソースコードにハードコードしないでください。 常に環境変数を使用してください。誤ってコミットした場合、すぐにローテーションするようにユーザーに警告してください。


フェーズ 2 — コンテキストの収集

目標: 一般的でないメールをドラフトするために、オファーを十分に深く理解すること。3つの入力モード:

モード A — パイプライン成果物あり(最もリッチ)

ユーザーが /biz-offer-alex-hormozi や ui-ux-pro-max を実行したばかり → 以下のファイルがあります:

  • output/<case-slug>/offer.json — セグメント、望ましい成果、仕組み、特典スタック、保証、価格(PRIMARYな真実のソース)
  • output/<case-slug>/conversion-copy.md — ヒーローブロックのペースト準備完了(見出し、サブ見出し、CTAの文言)
  • output/<case-slug>/landing-page/app/page.tsx — 現在構築されているNext.jsセールスページ(セクションと使用中のフォームフィールドを確認するために読む)

⚠️ 2026-05-14 更新: 古いパイプラインには layout.json + copy.json(biz-sales-page-layout から、こちらは非推奨)がありました。新しいプロセスではこれら2つのファイルをスキップします。offer.json + page.tsxを読めば十分なコンテキストが得られます。

上記3つのソースを読む。メール用に抽出:

  • セグメント + 望ましい成果 → 件名をパーソナライズ(「ようこそ」ではなく「[名前]、8週間のAIエージェントロードマップの準備ができました」)
  • 仕組み名 → 本文で補強(「あなたが学ぼうとしているPROMPTフレームワークシステム...」)
  • 特典スタック → メールにリスト(無料/低チケットのオファーで特典をすぐに提供できる場合)
  • 保証文 → メールにそのまま引用して不安を軽減
  • CTAの文言 → メールの最終CTAに反映

モード B — ランディングページはあるがJSONはない

ユーザーがデプロイ済みのHTMLを持っているが、biz-offer/biz-sales-pageを実行していない。スキルはHTMLを読み取る:

  • curl -s <URL> またはローカルの index.html ファイルを読む
  • ヒーローのh1、サブ見出し、CTAボタンテキスト、価格ブロック、保証ブロックを解析
  • そこからオファータイプとセグメントを推測

モードBは80%のケースで十分ですが、モードAよりもメールのパーソナライズ性は低くなります。ユーザーに提案: 「/biz-offer-alex-hormozi を実行してoffer.jsonを取得してから戻ってくると、メールの質が向上します。または、モードBを続行することもできます。」

モード C — 何もない

ユーザーはHTMLフォームしか持っておらず、コンテキストがありません。スキルは5つの簡単な質問をヒアリングする必要があります:

  1. 販売している製品/サービスは何ですか?(1文)
  2. ユーザーがフォームに記入した後、何を送信したいですか?(ダウンロード可能なPDF / 予約リンク / 支払いリンク / 確認のみで後で電話する)
  3. ブランド名 + 送信者名(「From:」に表示されます)
  4. 新しいリードの通知を受け取りたいメールアドレス
  5. SPF/DKIMを確認するために所有しているドメイン(Resend/SendGrid/Mailgun/Brevoを選択した場合 — Gmailの場合はスキップ)

フェーズ 3 — メールパターンの選択

2トリガーモデル(チェックアウトフローがあるオファー向け): オンライン決済がある低チケットコース/デジタル製品の場合、異なる時点で2つの異なるトリガーがあり、2つの異なるメールを送信します。1つのメールにまとめないでください。

リードがランディングページでフォームに記入
         ↓
   [トリガー A — /api/submit]
         ↓
   メール P3(支払い前リマインダー、簡潔)
         ↓
リードが支払いを完了 → 支払いプロバイダーのwebhook
         ↓
   [トリガー B — /api/payment-webhook]
         ↓
   メール P5(購入後オンボーディング、完全版)

内容のルール:

  • P3(支払い前): 支払いリンク + 短い保証 + 緊急性のみ。完全な納品物/特典スタックをリストしないでください — リードはまだ「獲得」していません。リストすると支払いの緊急性が低下します。
  • P5(支払い後): すべてを提供 — アクセスリンク、完全な納品物、特典スタック、グループリンク、オフィスアワースケジュール、パーソナライズのための1つのフォローアップ質問。これこそがゴールデンモーメントです。

(詳細な根拠については、feedback_email-autoresponder-2-stage-flow のメモリーを参照してください。)


フェーズ2のコンテキストから、適切なパターンを選択します。詳細なベトナム語テンプレートについては、references/email-formulas.md を参照してください。

パターントリガー使用するタイミング件名のヒント
P1 — リードマグネットの提供フォーム送信オファー = 無料のPDF/eBook/テンプレート/スワイプファイル/チェックリストのダウンロード「[名前]、[X]の資料が準備できました — 今すぐファイルを開く 👇」
P2 — 予約確認フォーム送信オファー = 通話/相談/デモ/無料ストラテジーセッションの予約「[名前]、コンサルテーションの登録を確認しました — 次のステップはこちら」
P3 — 支払い前リマインダーフォーム送信(未払い)オファー = 低チケット製品(199K〜3M VND)、メールでチェックアウトに誘導「[名前]、[コースX]の支払いリンク — 24時間限定割引価格 ⏰」
P4 — ナーチャリング(近日中のセールスコール)フォーム送信オファー = 高チケットコーチング/エージェンシー(5M〜50M + VND)、セールスチームが24時間以内に電話「[名前]、[発信者]が24時間以内に連絡します — 準備用チェックリストはこちら」
P5 — 購入後オンボーディング支払いwebhookリードが支払いを完了したばかり — 完全な価値を提供 + 1つのパーソナライズ質問「🎉 [名前]さん、[コースX]へようこそ — 今すぐロックを解除」

パターン選択のルール:

  • オファー = 無料ダウンロード/トレーニング → P1のみ(1トリガー、1メール)。
  • オファー = 無料の予約通話 → P2のみ(1トリガー、1メール)。
  • オファー = オンライン決済(Stripe/Momo/ZaloPay/Sepay)のある低チケット → P3 + P5(2トリガー、2メール)。
  • オファー = 高チケットセールスコール → P4のみ、フォローアップはセールスチームが担当(クロージング後のオンボーディングは別のプロセス)。

スキルは適切なパターンとその理由を提案し、ユーザーの確認を求めます。例: 「offer.jsonに基づくと、これは支払い統合がある1.99M VNDのコースです。2通のメールを設定することをお勧めします: P3(フォーム記入時の支払いリマインダー)+ P5(支払い完了後のオンボーディング + 1つのパーソナライズ質問)。よろしいですか、それとも最初にP3の1通だけにしますか?」


フェーズ 4 — 2通のメールをドラフト

純粋なベトナム語(「anh/chị」を使用)で、モバイルレスポンシブなHTMLの2通のメールを生成します。

メール A — リードに送信する自動返信

6つのブロック構造(パターンごとの具体的な文言については references/email-formulas.md を参照):

  1. 件名 — {{name}} でパーソナライズ、50文字未満、ブランドボイスに合えば最後に軽い絵文字(✉️ 👇 ✓)を1つ、スパムトリガー(「無料」、「$$$」、「保証」の大文字)を避ける。
  2. プレビューテキスト — 受信箱の件名の下に表示される1文、メールを開いたときの価値を説明。
  3. 挨拶 — 「Chào anh/chị {{name}}、」 — 「拝啓」や「お客様各位」は使用しない。
  4. 本文 — 選択したパターンに従う。ルール:
    • 短い(200語未満)。
    • 明確なプライマリCTAリンク/ボタンが1つ。
    • コンテキストから特定のオファー名/仕組みを参照(「弊社の製品」ではない)。
    • パターンP3/P4の場合 → 緊急性のリマインダー1つ + 安心感(保証)1つ。
  5. 署名 — 送信者名 + ブランド名 + 1つの連絡先リンク(Zalo/電話/ウェブサイト)。
  6. フッター — 住所(スパム対策法で義務付け) + 配信停止リンク(コンプライアンスのため必要。トランザクションメールでも含めることを推奨)。

メール B — オーナーに送信する通知

構造:

  1. 件名 — 「[ブランド] — 新しいリード: [名前] - [電話番号]」
  2. 本文 — すべてのフォームフィールドをテーブル形式でリスト:
    • 名前、電話番号、メールアドレス(必須)
    • company、message、budget、utm_source(利用可能な場合)
    • 送信日時 + タイムゾーン
  3. クイックアクション:
    • 電話をかける(tel: phone リンク)
    • Zaloでチャット(https://zalo.me/phone リンク、VNユーザー向け)
    • メールに返信(mailto: リンク)
  4. 著名 — 「対応が必要な場合、...」を含む

フェーズ 5 — ユーザーレビュー & 編集

ユーザーが実際のメールを承認するまでコードを生成しないでください。プロセス:

  1. スキルが2通のメールドラフトをテキスト形式で表示(HTMLはレンダリング)
  2. ユーザーが編集する(件名の変更、CTAの文言の調整、BNIの削除...)
  3. ループする: スキルが修正 > 再表示 > ユーザー承認
  4. 承認されたらフェーズ6に進む

編集についての質問例:

  • 「件名に[名前]の代わりに[ブランド名]を使いますか?」
  • 「特典を3から2つに減らして、メールをより短くしますか?」
  • 「緊急性を強調するためにCTAボタンの色を赤に変更しますか?」

フェーズ 6 — コードの配線

ステップ 6.1 — nodemailerのインストール

npm install nodemailer
# または pnpm / yarn
yarn add nodemailer

ステップ 6.2 — 環境変数ファイルの作成

プロジェクトのルートに .env.local を作成(または既存に追加)。Gmail SMTPの例:

# SMTP Configuration (Gmail example)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
[email protected]
SMTP_PASS=your-app-password-here

# Form submission
FROM_NAME=[Brand name]
[email protected]

# Owner notification
[email protected]

# Lead magnet (optional)
LEAD_MAGNET_URL=https://your-domain.com/download/guide.pdf

ステップ 6.3 — APIルートの作成

Next.js App Router (app/api/submit/route.ts):

import { NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { name, phone, email } = body;

    // Validate
    if (!name || !phone || !email) {
      return NextResponse.json({ error: '名前、電話番号、メールアドレスは必須です' }, { status: 400 });
    }

    // Create transporter
    const transporter = nodemailer.createTransport({
      host: process.env.SMTP_HOST,
      port: Number(process.env.SMTP_PORT),
      secure: false,
      auth: {
        user: process.env.SMTP_USER,
        pass: process.env.SMTP_PASS,
      },
    });

    // Email A: Auto-responder to lead
    const leadEmailHtml = `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2>Chào anh/chị ${name},</h2>
        <p>Cảm ơn anh/chị đã đăng ký!</p>
        <!-- Tại đây, sử dụng nội dung đã được phê duyệt từ Phase 4-5 -->
        <a href="${process.env.LEAD_MAGNET_URL}" style="display: inline-block; background: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;">Tải tài liệu ngay</a>
      </div>
    `;

    await transporter.sendMail({
      from: `"${process.env.FROM_NAME}" <${process.env.FROM_EMAIL}>`,
      to: email,
      subject: `[Tên], tài liệu đã sẵn sàng 👇`,
      html: leadEmailHtml,
    });

    // Email B: Notification to owner
    const ownerEmailHtml = `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2>🎉 New Lead!</h2>
        <table>
          <tr><td><strong>Name:</strong></td><td>${name}</td></tr>
          <tr><td><strong>Phone:</strong></td><td>${phone}</td></tr>
          <tr><td><strong>Email:</strong></td><td>${email}</td></tr>
        </table>
      </div>
    `;

    await transporter.sendMail({
      from: `"${process.env.FROM_NAME}" <${process.env.FROM_EMAIL}>`,
      to: process.env.OWNER_EMAIL,
      subject: `[Brand] - New Lead: ${name} - ${phone}`,
      html: ownerEmailHtml,
    });

    return NextResponse.json({ success: true });
  } catch (error) {
    console.error('Email error:', error);
    return NextResponse.json({ error: 'メール送信エラー' }, { status: 500 });
  }
}

ステップ 6.4 — フォームの配線

既存のフォームの送信ハンドラを見つけ、ローカル状態と置き換えます:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);

  try {
    const res = await fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, phone, email }),
    });

    const data = await res.json();
    if (res.ok) {
      alert('登録ありがとうございます!メールをご確認ください。');
    } else {
      alert('エラーが発生しました。もう一度お試しください。');
    }
  } catch (error) {
    alert('ネットワークエラー');
  } finally {
    setLoading(false);
  }
};

フェーズ 7 — プロバイダーセットアップ + テスト計画

プロバイダー別セットアップガイド(簡略版):

Gmail SMTP:

  1. Google アカウントで2FAを有効にする
  2. https://myaccount.google.com/apppasswords にアクセス
  3. アプリパスワードを生成 > 「メール」と「その他(カスタム)」を選択 > 「SMTP」という名前を付ける
  4. 生成された16桁のパスワードをコピーして .env.local の SMTP_PASS に入力

Brevo SMTP:

  1. https://app.brevo.com でアカウントを作成
  2. SMTP & API > SMTP キー に移動 > 新しいキーを生成
  3. SMTPキーをコピーして .env.local の SMTP_PASS に入力

テスト計画:

  1. 環境変数を確認: .env.local のすべての値が正しいことを確認
  2. ローカルテスト: npm run dev を実行し、フォームに記入
  3. メール受信箱を確認:
    • リードメール: 受信箱を確認、件名を確認、スパムフォルダを確認しない
    • オーナーメール: オーナーの受信箱で確認
  4. エラーログ: ターミナルを確認 (500エラーは通常、SMTP認証情報が間違っているか、ファイアウォールがポート587をブロックしている)
  5. 本番テスト: Vercelにデプロイ(vercel --prod)、フォームを再送信、すべてが機能することを確認

制限事項 & 注意事項

  1. このスキルはメールを自動送信しません。ユーザーが最初にドラフトを承認する必要があります。
  2. SMTP認証情報は機密情報です。.env.local 以外に置かないでください。ソースコードにコミットしないでください。
  3. このスキルはDDoS攻撃を防ぎません。大量送信が予想される場合は、レート制限(例: 同一IPから5分間に1回)を追加することをお勧めします。
  4. このスキルは検証メール(確認メール)を送信しません。メールが有効かどうかを確認するために確認リンクをクリックするようリードに要求する場合は、references/signup-confirmation.md を参照してください。
  5. このスキルはリードデータを保存しません(CRM/データベースに入れません)。バックエンドに保存する必要がある場合は、このスキルの後にCRM統合スキルを実行してください。
  6. このスキルはSPF/DKIM/DMARCを自動的に設定しません。フェーズ7でユーザーにこれらの設定を手動で行うよう案内します。

前提スキル(存在しない場合はスキップ)

  1. /biz-offer-alex-hormozi — offer.json + conversion-copy.md を生成します(オプションですが、よりパーソナライズされたメールのために強く推奨)
  2. ui-ux-pro-max — Next.jsプロジェクトを構築します(オプション)
  3. /biz-deploy-vercel — Vercelにデプロイします(コード配線後にテストするために必要)

リファレンス

  • references/email-formulas.md — 各パターンのベトナム語メールテンプレート
  • feedback_email-autoresponder-2-stage-flow — 2トリガーモデル(P3 + P5)の根拠
  • references/troubleshooting-smtp.md — 一般的なSMTPエラー(認証失敗、タイムアウト、ブロックされたポート)

Individual skills in this repo

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

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Best practices for Remotion - Video creation in React

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Scaffold trang `/admin` CRM-style trực quan vào Next.js project (Supabase backend) — KHÔNG còn variant Vercel KV. Layout 1CRM-inspired: sidebar 3 tab (Tổng quan / Khách hàng / Email marketing) + popup nhập mã đăng nhập. **Tab Tổng quan**: 4 KPI cards (Tổng leads / Đã thanh toán / Tỷ lệ chuyển đổi / Doanh thu) có delta arrow vs kỳ trước, line chart leads+paid+revenue theo ngày dùng `recharts`, donut trạng thái paid/pending/expired, period selector pill 7d/30d/90d, list 5 thanh toán gần nhất. **Tab Khách hàng**: bảng leads + search + filter trạng thái + filter ngày + CSV export. **Tab Email marketing**: form soạn chiến dịch (tên + tiêu đề + body chọn định dạng **văn bản thường HOẶC HTML** + placeholder `{{name}}` + audience 4 loại all/paid/pending/last_days + tên người gửi) — có nút **Xem trước** mở modal iframe render đúng email thật (text → auto convert + wrap khung; HTML fragment → wrap khung, HTML đầy đủ giữ nguyên) → gửi bulk qua SMTP (reuse `nodemailer` của `biz-email-setup` — KHÔN

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Deploy landing page / website (React, Next.js, Vite, static HTML) lên Vercel — tự kiểm tra Vercel CLI hoặc Vercel MCP đã cài chưa, nếu chưa thì cài qua npm/pnpm và hướng dẫn user authenticate (vercel login), tự detect framework (Next.js / Vite / CRA / static), auto-generate vercel.json khi cần, chạy `vercel --prod`, trả về live URL + inspect URL + hướng dẫn custom domain. USE WHEN user says 'deploy lên vercel', 'đẩy landing page lên vercel', 'publish website', 'go live', 'deploy nextjs', 'deploy react', 'deploy vite', 'tạo URL live', 'đưa lên production', 'biz-deploy-vercel', 'host landing page', 'vercel deploy', 'ship lên vercel', 'đẩy code lên vercel'. Skill này áp dụng cho cả case dùng Vercel CLI lẫn Vercel MCP server.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Cài chatbot AI dạng floating widget góc dưới phải vào project Next.js có sẵn (App Router hoặc Pages Router), responsive đầy đủ web + tablet + mobile, gọi LLM qua OpenRouter (mặc định google/gemini-3-flash-preview, có thể đổi sang anthropic/claude-sonnet-4.6), streaming response, RENDER MARKDOWN trong assistant bubble (bold / list / link / code) qua react-markdown + remark-gfm — KHÔNG hiện raw **bold** dạng text — có knowledge base từ FAQ + tài liệu sản phẩm/khóa học do user cung cấp để chatbot tự động trả lời khách hàng, và TỰ ĐỘNG EXTRACT + LƯU LEAD (tên + SĐT + email) vào Upstash Redis/Vercel KV dưới namespace `chat-lead:{phone}` khi user cung cấp đầy đủ thông tin trong chat — dedupe theo SĐT, TTL 90 ngày, fire-and-forget không block stream. Skill tự detect số lượng project Next.js — nếu có nhiều hơn 1 sẽ hỏi user chọn project nào để cài; tự detect TypeScript/JS, App Router/Pages Router, Tailwind/CSS module, KV/Upstash availability (skip auto-save nếu chưa có); tự install react-markd

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Đóng gói offer **không thể chối từ** (grand slam offer) theo phương pháp Alex Hormozi ($100M Offers) — nhận input pains/gains/customer jobs theo Value Proposition Design (Osterwalder 2014) + sản phẩm/dịch vụ, rồi sinh ra: (1) markdown report tiếng Việt đầy đủ Value Equation scoring + Core Offer + 3-4 Bonus stack + Guarantee + Urgency + Pricing, (2) offer.json structured cho pipeline downstream (`ui-ux-pro-max` build sales page production-ready), (3) conversion copy block (headline + subheadline + CTA) sẵn sàng paste landing page. 2 input mode: (B) user paste sẵn pains + gains + product, (C) user chỉ có sản phẩm — skill phỏng vấn theo VPD framework để surface pain/gain trước. Bonus stack mode hybrid: skill brainstorm 5-7 candidate có justification value rồi user pick/chỉnh 3-4 cái. Tiếng Việt thuần (xưng anh/chị), giá VND charm pricing (X99K), 3-tier decoy structure. USE WHEN user says 'đóng gói offer', 'tạo offer', 'thiết kế offer Hormozi', 'grand slam offer', 'value stack', 'offer sta

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Nâng cấp copy sales page tiếng Việt — biến copy có sẵn (từ `offer.json` + `conversion-copy.md` của `/biz-offer-alex-hormozi`, HOẶC từ Next.js project đã build qua `ui-ux-pro-max`, HOẶC user paste block copy bất kỳ) thành **copy chất lượng cao chốt đơn**: headline punchy hơn, pain agitation đau hơn, mechanism rõ hơn, benefit cụ thể hơn, FAQ xử lý đúng objection của thị trường VN, CTA mạnh hơn. Skill này có 3 INTENSITY LEVEL: (1) **Polish** — light edit + power word + sửa nhịp; (2) **Conversion-optimized** — rewrite 5 block critical + tạo A/B variants cho hero/CTA; (3) **Sales-letter** — long-form story-driven full rewrite kèm P.S.. Mỗi section áp dụng đúng formula thuyết phục (PAR cho pain, BAB cho solution, FEP cho benefit, PVEN cho final CTA, Star-Chain-Hook cho testimonial). Output gồm 4 file: `copy-upgraded.md`, `copy-variants.md` (A/B test bank — 3 hero + 3 CTA + 3 final-CTA), `copy-changes.md` (diff Trước/Sau + lý do), `copy.json` (structured downstream). Giọng văn tiếng Việt thuầ

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

⚠️ DEPRECATED (2026-05-14) — Skill này KHÔNG còn trong pipeline chuẩn. Quy trình mới đã bỏ bước wireframe markdown trung gian: sau `/biz-offer-alex-hormozi` đi THẲNG sang `ui-ux-pro-max` để build Next.js sales page production-ready (có design language nhất quán: style + palette + font pairing, không phải Tailwind defaults). Lý do deprecate: wireframe markdown làm thêm 1 bước trung gian không tạo giá trị — `ui-ux-pro-max` đọc trực tiếp `offer.json` đã đầy đủ anchor + core + bonus + guarantee + urgency + pricing rồi ra HTML production luôn. Chỉ dùng skill này KHI user EXPLICITLY yêu cầu wireframe markdown để review/in/share trước khi build code (rare case). KHÔNG trigger trên các keyword 'tạo sales page', 'tạo landing page bán hàng' nữa — những keyword đó giờ trigger `ui-ux-pro-max`.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end Sepay VietQR payment infrastructure cho landing page Next.js — guide user setup Sepay account + bank linking + scaffold đầy đủ payment flow trong project. Skill này xử lý 7 phase: (0) detect Next.js stack + **HỎI user chọn lead store backend** (Vercel KV hoặc Supabase Free Postgres — default recommend Supabase do free tier rộng hơn ~50× + có SQL + admin UI), (1) GUIDE user đăng ký Sepay account tại my.sepay.vn + link bank account VN (Vietcombank/Techcombank/MB/ACB/VPBank/BIDV/...) + lấy API key + setup webhook URL trên Sepay dashboard, (2A nếu chọn KV) setup Vercel KV (install `@vercel/kv` + KV namespace + 4 env vars KV_*), (2B nếu chọn Supabase) setup Supabase project (tạo project tại Singapore region + chạy migration SQL tạo 4 bảng leads/phone_index/order_counter/webhook_dedup với pg_cron TTL cleanup + RLS deny-all + lấy SUPABASE_URL + SUPABASE_SERVICE_ROLE_KEY + Vercel Cron ping `/api/health` mỗi 6 ngày chống auto-pause), (3) scaffold `lib/leads-store.ts` (thin re-export

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Setup Telegram bot notification cho thanh toán thành công từ Sepay webhook trong Next.js project. Skill này: (1) hướng dẫn user 3 bước tạo Telegram bot riêng qua @BotFather + lấy bot token + chat_id (qua @userinfobot cho chat 1-1, hoặc /getUpdates API cho group), (2) tạo helper function `sendTelegramNotification()` reusable trong `lib/telegram.ts`, (3) detect existing Sepay webhook route trong project (thường là `/api/sepay-webhook`, `/api/payment-success`, hoặc tương đương) và wire Telegram call CÙNG CHỖ với email auto-responder (Resend) — gửi parallel qua `Promise.allSettled` để Telegram fail KHÔNG block 200 response trả Sepay (Sepay sẽ retry webhook nếu nhận non-200, gây duplicate notification), (4) draft message format mặc định tiếng Việt: emoji + tên khách + SĐT + email + amount (charm pricing VND định dạng `499.000đ`) + tên sản phẩm + timestamp giờ VN dd/mm/yyyy HH:mm, (5) update `.env.local` với `TELEGRAM_BOT_TOKEN` + `TELEGRAM_CHAT_ID`, add vào `.gitignore`, nhắc user paste vào

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Convert a single MP3 voiceover file into a single HeyGen avatar lip-sync MP4 video. Single-purpose — no planning, no SRT, no chunking, no Remotion compositing. Hybrid path — REST upload (helper script) + HeyGen MCP for video creation, because the post-2026 MCP no longer exposes an asset-upload tool. Reads avatar look pool (`HEYGEN_AVATAR_LOOKS`) from `.env` and HeyGen API key (`HEYGEN_API_KEY`) for the upload step. USE WHEN user says "tạo video heygen từ mp3", "mp3 to heygen", "heygen mp4 từ audio", "convert mp3 sang heygen video", "tạo avatar video từ file mp3", "lip sync mp3 heygen", "biến mp3 thành video heygen", or any time the user has exactly one MP3 file and wants exactly one HeyGen avatar MP4 out.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Demand-side market research cho digital product / service ở Việt Nam — đo cầu thật + WTP + channel-market fit + defensibility qua keyword volume, marketplace sales (Shopee/Unica/Edumall/Gitiho/KyNa), community signal (FB groups, TikTok hashtag, Zalo OA), competitor pricing, unit economics — không phải macro PESTEL. Output: keyword portfolio + Niche Score 100 điểm 7-dimension có evidence + go/no-go decision + falsification protocol. Force triangulate ≥3 sources cho mỗi claim quan trọng. USE WHEN user says 'nghiên cứu thị trường', 'market research', 'validate niche', 'keyword research', 'demand validation', 'niche có nên làm không', 'có ai làm chưa', 'thị trường đủ lớn không', 'có lời không', 'chọn ngách', 'kiểm tra cầu'. Cũng trigger khi user mô tả 1 ý tưởng kinh doanh cụ thể và muốn check feasibility. Skill này KHÔNG fit: high-ticket transactional sale (BĐS, ô tô), B2B enterprise (sales cycle 6+ tháng), hyper-local geo micro-market (1 toà nhà, 1 phường). KHÔNG làm: macro PESTEL/Porter

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Transcribe an MP3 voiceover into an SRT subtitle file and a word-level segments JSON using local OpenAI Whisper. Input is a single MP3 path; output is `<stem>.srt` + `<stem>_segments.json` written next to the MP3 (or to a custom output dir). USE WHEN the user says 'extract srt from mp3', 'trích srt từ mp3', 'transcribe voiceover', 'tạo file srt và segments', 'whisper transcribe', 'bóc transcript có timestamp', 'extract voiceover segments', 'tách SRT từ audio', or any time a downstream skill (plan-short-video-edit, heygen-remotion-short-video-editor) needs an SRT + word-level segments JSON from a voiceover MP3 and one does not already exist.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Convert Vietnamese/English script text to MP3 voiceover using ElevenLabs TTS API. Calls POST /v1/text-to-speech/{voice_id}, streams audio bytes, writes MP3 directly. Locked to Hoang's brand voice ID by default. USE WHEN user says 'tạo mp3 elevenlabs', 'elevenlabs tts', 'eleven labs voice', 'text to speech elevenlabs', 'tạo voiceover elevenlabs', 'đọc text bằng elevenlabs', 'tts elevenlabs to mp3', 'eleven labs script to mp3', 'voiceover bằng elevenlabs', 'giọng elevenlabs'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end orchestrator: **script → final MP4 16:9 (1920×1080) podcast-keynote**.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end short-video pipeline — từ kịch bản (Việt/Anh) ra MP4 TikTok/Reels 9:16 hoàn chỉnh. Orchestrator 3 phase ghép skill có sẵn — (1) TTS provider chọn được giữa `mkt-elevenlabs-tts-to-mp3` (default, voice của Hoàng) hoặc `mkt-video-script-to-mp3` (MiniMax speech-2.8-hd), (2) checkpoint user duyệt MP3, (3) `heygen-mp3-to-mp4` lip-sync avatar HeyGen, (4) delegate Phase 3 packaging cho sub-agent `mkt-full-video-phase3-packager` (transcribe + scene outline + checkpoint + fan-out N scene writers parallel + scaffold + preview Studio). API key + voice ID cho cả 2 provider lưu ở `.env`. USE WHEN user nói "tạo full video từ script", "script to tiktok video", "pipeline full video heygen + hyperframe", "tạo video từ kịch bản đến mp4", "elevenlabs heygen hyperframe full pipeline", "minimax heygen pipeline", "kịch bản ra video tiktok", hoặc có sẵn 1 script + (optional) ảnh b-roll và muốn ra MP4 9:16 đóng gói có captions, SFX, b-roll.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Build a TikTok/Reels/YouTube **landscape 16:9 (1920×1080)** short video from a pre-recorded talking-head MP4 using HyperFrames — transcribe Vietnamese audio, scaffold a complete preview-ready 1920×1080 project with a slide pane (1200px) on the left and a floating avatar frame on the right, GSAP timeline có SPLIT↔PIP transitions (slide full-screen + avatar PIP corner thumbnail), breathing yoyo zoom + beat-driven punch-in trên avatar, 5 scene compositions kiểu "tier-row" pattern (post-stack hook / chats-stack problem / hero-orb solution / counter-row recap / terminal-row CTA), optional cream-paper editorial infographic image slots với `<img onerror>` fallback, 6 SFX wired tại scene boundaries, **NO captions** (giọng avatar là spine). USE WHEN user nói "edit video 16:9 từ HeyGen MP4", "scaffold project landscape", "podcast keynote editor", "talking head + slide editor", "build hyperframes 1920×1080", "tạo project 16:9 từ avatar mp4", "scaffold 16:9 hyperframes", "hyperframe landscape vide

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Pipeline đóng gói: từ MP4 quay sẵn (talking head 9:16) tới HyperFrames preview project hoàn chỉnh có captions, SFX, zoom hooks, b-roll toàn cảnh có hiệu ứng rich, và CTA finale.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Audit bài Facebook / Reels / YouTube để phát hiện 4 downward drivers (over-branding, over-production, stock imagery, standardized aesthetic) + frequency-over-quality. Mỗi anti-pattern bị drop ~75% performance nếu hiện diện. USE WHEN user says 'audit content', 'check anti pattern', 'content có lỗi gì không', 'kiểm tra over branding', 'vì sao video bị chết', 'vì sao post không ai xem', 'content audit', 'kiểm tra chất lượng content'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Tìm viral pattern ở ngành khác (bác sĩ, luật sư, tài chính, bất động sản, thủ công) có thể apply cho niche AI/automation của Hoang. Ngách AI educator VN còn ít format được khai thác — cross-industry adaptation là blue ocean. USE WHEN user says 'tìm format ngành khác', 'cross industry research', 'học format từ ngành khác', 'blue ocean format', 'tìm format chưa ai làm', 'adapt format từ niche khác', 'cross industry viral'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Rewrite CTA kiểu autocratic (Mua ngay! Follow ngay! Đăng ký liền!) sang 3 variants Democratic / Benevolent / Laissez-faire — reach 85% dân số thay vì chỉ 5% (action-based). Áp dụng cho landing page, caption FB, CTA video, email. USE WHEN user says 'rewrite cta', 'sửa cta', 'cta không autocratic', 'viết lại kêu gọi hành động', 'cta cho landing page', 'cta nhẹ nhàng hơn', 'inclusive cta', 'cta democratic benevolent'.

関連スキル