email-template-builder

Zautomatyzuj tworzenie systemów transakcyjnych e-maili gotowych do wdrożenia. Skill generuje szablony React Email i MJML, integruje się z Resend, Postmark, SendGrid i AWS SES, oferuje podgląd na żywo z hot reload, wsparcie dla wielu języków, tryb ciemny i optymalizację spamu. Otrzymujesz kompletną strukturę projektu z komponentami layoutu, szablonami (powitanie, weryfikacja, reset hasła, faktury, powiadomienia, digest), ujednoliconym interfejsem wysyłania oraz śledzeniem otwartości i kliknięć z parametrami UTM.

1. Zainstaluj skill w swoim projekcie Claude/Copilot i wskaż katalog docelowy dla struktury e-maili. Skill utworzy folder emails/ z podfoldersami components/, templates/, lib/, i18n/ oraz preview/.

2. Zdefiniuj swoje szablony e-maili, edytując pliki w templates/ (welcome.tsx, verify-email.tsx, password-reset.tsx, invoice.tsx, notification.tsx, weekly-digest.tsx). Każdy szablon powinien importować komponenty z components/layout/ i partials/.

3. Skonfiguruj dostawcę poczty, wybierając jeden z obsługiwanych (Resend, Postmark, SendGrid, AWS SES) i uzupełniając plik providers/ odpowiednimi kluczami API. Ujednolicony interfejs w lib/send.ts obsługuje wysyłanie niezależnie od wybranego dostawcy.

4. Dodaj obsługę wielu języków, tworząc pliki tłumaczeń w i18n/ (en.ts, de.ts itp.) z typowanymi kluczami. Szablony będą automatycznie renderować treść w wybranym języku.

5. Uruchom serwer podglądu za pomocą preview/server.ts, aby zobaczyć szablony w przeglądarce z hot reload. Serwer wyświetla każdy szablon w trybie jasnym i ciemnym.

6. Włącz śledzenie konwersji, importując funkcje z lib/tracking.ts do swoich szablonów. Skill automatycznie dodaje parametry UTM do linków i przygotowuje strukturę do śledzenia otwartości i kliknięć. Przed wysyłką przejrzyj listę kontrolną optymalizacji spamu w dokumentacji, aby upewnić się, że szablony przejdą filtry dostawcy.