Klaviyo Reference Architecture
Overview
Production-ready architecture for Klaviyo integrations: a layered project structure, service patterns, event-driven sync, and the klaviyo-api SDK wired into a real application. SKILL.md gives you the four-layer contract and the skeleton you scaffold from; the deep material lives in references/ so you pull code only when you reach that layer.
- Layout & layering (full directory tree, layer contract, data flow): architecture.md
- Working code for every layer (config, profile sync, event tracker): implementation.md
Prerequisites
- TypeScript project with
klaviyo-api installed
- Understanding of layered architecture
- Redis (for caching/queuing) and database (for audit/sync state)
Instructions
Use Write to scaffold the directory tree, then fill each layer bottom-up. The four layers and their one-way call rule:
API / Webhook Layer → routes + webhook handlers (calls Service only)
Service Layer → profile-sync, event-tracker, campaigns (calls SDK + Infra)
Klaviyo SDK Layer → ApiKeySession, ProfilesApi, EventsApi (never calls upward)
Infrastructure Layer → Redis cache, BullMQ queue, Prisma DB, OTel monitoring
- Scaffold the tree. Create the
src/{klaviyo,services,webhooks,jobs,middleware,config,health} layout. Full annotated tree: architecture.md.
- Config layer first. A single
loadConfig() returns environment-specific keys, rate limits, and cache TTLs — every other layer reads from it. Code: implementation.md Step 1.
- Service layer. Build
ProfileSyncService (bidirectional upsert) and EventTracker (server-side Placed Order / custom events). Both route Klaviyo calls through withRateLimitRetry. Code: implementation.md Steps 2–3.
- Wire the data flow. Signup →
syncToKlaviyo(), purchase → trackPurchase(), inbound profile.updated webhook → WebhookRouter.routeEvent() → local DB. Diagram: architecture.md.
When reviewing an existing project, Read its src/ tree and Grep for cross-layer imports that break the one-way rule (SDK importing a service, a route importing the SDK directly).
Output
Applying this skill produces:
- A scaffolded
src/ tree matching the four-layer contract, with SDK, service, webhook, job, middleware, config, and health directories.
- A working
config/klaviyo.ts plus ProfileSyncService and EventTracker service classes ready to call from routes and jobs.
- For a review pass: a list of layering violations (upward SDK calls, direct SDK use from routes) and sync-safety gaps to fix.
Error Handling
| Issue |
Cause |
Solution |
| Circular deps |
Wrong layering |
Services call SDK, never the reverse |
| Sync conflicts |
Both sides update |
Last-write-wins with sync timestamp |
| Queue backlog |
Klaviyo slow/down |
Circuit breaker + dead letter queue |
| Type mismatches |
SDK version mismatch |
Pin SDK version, run tsc --noEmit in CI |
Examples
Scaffold a new integration — "Set up a Klaviyo integration for our Node app." Create the layered tree, drop in loadConfig(), then ProfileSyncService and EventTracker. Full code per step: implementation.md.
Track a purchase from your backend:
await new EventTracker().trackPurchase({
email: order.email,
orderId: order.id,
total: order.total,
items: order.lineItems,
});
Review project structure — "Is our Klaviyo code layered correctly?" Grep for imports that violate the one-way call rule and check webhook handlers verify HMAC signatures. Layer contract: architecture.md.
Resources
Next Steps
For multi-environment configuration and per-stage key management, see the klaviyo-multi-env-setup skill in this pack.
Source: jeremylongshore/claude-code-plugins-plus-skills → plugins/saas-packs/klaviyo-pack/skills/klaviyo-reference-architecture/SKILL.md
1---2name: klaviyo-reference-architecture3description: "'Implement Klaviyo reference architecture with best-practice project layout. Use when designing new Klaviyo integrations, reviewing project structure, or establishing architecture standards for email/SMS marketing applications. Trigger with phrases like \"klaviyo architecture\", \"klaviyo project structure\", \"klaviyo design\", \"how to organize klaviyo\", \"klaviyo layout\". '"4allowed-tools: "Read, Write, Edit, Grep"5category: engineering-core6source_repo: jeremylongshore/claude-code-plugins-plus-skills7source_path: "plugins/saas-packs/klaviyo-pack/skills/klaviyo-reference-architecture/SKILL.md"8source_url: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/HEAD/plugins/saas-packs/klaviyo-pack/skills/klaviyo-reference-architecture/SKILL.md9---1011# Klaviyo Reference Architecture1213## Overview1415Production-ready architecture for Klaviyo integrations: a layered project structure, service patterns, event-driven sync, and the `klaviyo-api` SDK wired into a real application. SKILL.md gives you the four-layer contract and the skeleton you scaffold from; the deep material lives in `references/` so you pull code only when you reach that layer.1617- **Layout & layering** (full directory tree, layer contract, data flow): [architecture.md](references/architecture.md)18- **Working code for every layer** (config, profile sync, event tracker): [implementation.md](references/implementation.md)1920## Prerequisites2122- TypeScript project with `klaviyo-api` installed23- Understanding of layered architecture24- Redis (for caching/queuing) and database (for audit/sync state)2526## Instructions2728Use **Write** to scaffold the directory tree, then fill each layer bottom-up. The four layers and their one-way call rule:2930```31API / Webhook Layer → routes + webhook handlers (calls Service only)32Service Layer → profile-sync, event-tracker, campaigns (calls SDK + Infra)33Klaviyo SDK Layer → ApiKeySession, ProfilesApi, EventsApi (never calls upward)34Infrastructure Layer → Redis cache, BullMQ queue, Prisma DB, OTel monitoring35```36371. **Scaffold the tree.** Create the `src/{klaviyo,services,webhooks,jobs,middleware,config,health}` layout. Full annotated tree: [architecture.md](references/architecture.md).382. **Config layer first.** A single `loadConfig()` returns environment-specific keys, rate limits, and cache TTLs — every other layer reads from it. Code: [implementation.md](references/implementation.md) Step 1.393. **Service layer.** Build `ProfileSyncService` (bidirectional upsert) and `EventTracker` (server-side `Placed Order` / custom events). Both route Klaviyo calls through `withRateLimitRetry`. Code: [implementation.md](references/implementation.md) Steps 2–3.404. **Wire the data flow.** Signup → `syncToKlaviyo()`, purchase → `trackPurchase()`, inbound `profile.updated` webhook → `WebhookRouter.routeEvent()` → local DB. Diagram: [architecture.md](references/architecture.md).4142When reviewing an existing project, **Read** its `src/` tree and **Grep** for cross-layer imports that break the one-way rule (SDK importing a service, a route importing the SDK directly).4344## Output4546Applying this skill produces:4748- A scaffolded `src/` tree matching the four-layer contract, with SDK, service, webhook, job, middleware, config, and health directories.49- A working `config/klaviyo.ts` plus `ProfileSyncService` and `EventTracker` service classes ready to call from routes and jobs.50- For a review pass: a list of layering violations (upward SDK calls, direct SDK use from routes) and sync-safety gaps to fix.5152## Error Handling5354| Issue | Cause | Solution |55|-------|-------|----------|56| Circular deps | Wrong layering | Services call SDK, never the reverse |57| Sync conflicts | Both sides update | Last-write-wins with sync timestamp |58| Queue backlog | Klaviyo slow/down | Circuit breaker + dead letter queue |59| Type mismatches | SDK version mismatch | Pin SDK version, run `tsc --noEmit` in CI |6061## Examples6263**Scaffold a new integration** — "Set up a Klaviyo integration for our Node app." Create the layered tree, drop in `loadConfig()`, then `ProfileSyncService` and `EventTracker`. Full code per step: [implementation.md](references/implementation.md).6465**Track a purchase from your backend:**6667```typescript68await new EventTracker().trackPurchase({69 email: order.email,70 orderId: order.id,71 total: order.total,72 items: order.lineItems,73});74```7576**Review project structure** — "Is our Klaviyo code layered correctly?" Grep for imports that violate the one-way call rule and check webhook handlers verify HMAC signatures. Layer contract: [architecture.md](references/architecture.md).7778## Resources7980- [Klaviyo API Reference](https://developers.klaviyo.com/en/reference/api_overview)81- [Custom Integration Guide](https://developers.klaviyo.com/en/docs/guide_to_integrating_a_platform_without_a_pre_built_klaviyo_integration)82- [Ecommerce Integration Guide](https://developers.klaviyo.com/en/docs/guide_to_integrating_a_platform_without_a_pre_built_klaviyo_integration)8384## Next Steps8586For multi-environment configuration and per-stage key management, see the `klaviyo-multi-env-setup` skill in this pack.8788---8990**Source:** [`jeremylongshore/claude-code-plugins-plus-skills`](https://github.com/jeremylongshore/claude-code-plugins-plus-skills) → `plugins/saas-packs/klaviyo-pack/skills/klaviyo-reference-architecture/SKILL.md`