Synthèse automatique
Met en place un environnement de développement local isolé pour les intégrations Customer.io, avec credentials par environnement, wrapper client en mode dry-run, mocks Vitest et scripts npm.
Points forts
- Le mode dry-run et le préfixage des événements par `dev_` évitent de polluer les données de production
- Fournit un helper de mock Vitest directement réutilisable pour `@customerio/track`
- Sépare explicitement `.env.development` et `.env.production` avec sélection de région US/EU
- Inclut des scripts npm prêts à l'emploi pour le dry-run, le dev live et les tests
Limites
- Ne couvre que le client Track v2 : ni App API, ni campagnes, ni webhooks
- Le tableau de gestion d'erreurs du SKILL.md est tronqué en pleine ligne
- Suppose Node/TypeScript avec dotenv ; aucune piste pour les SDK Python ou autres
À utiliser pour initialiser ou nettoyer un environnement de dev local d'une application Node/TypeScript qui envoie des événements à Customer.io.
À éviter si l'objectif est de valider de vraies campagnes, segments ou règles de livraison Customer.io, car le skill n'isole que les appels côté client.
Analyse de sécurité
SûrThe skill provides standard local-development setup guidance for Customer.io, including environment files, a dry-run client wrapper, mocks, and npm scripts. It uses placeholder API keys and recommends separate development workspaces and dry-run mode. There are no destructive commands, secret exfiltration, obfuscated payloads, or attempts to disable safety controls.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Set up a local development workflow for our Customer.io integration: separate dev/prod env vars, a dry-run client wrapper, and Vitest mocks so tests never hit the real API.Add a dry-run script that logs Customer.io identify and track calls instead of sending them, and wire it into package.json as dev:cio.Mock @customerio/track in our Vitest suite so we can assert that identify is called with the right attributes when a user signs up.name: customerio-local-dev-loop description: | Configure Customer.io local development workflow. Use when setting up local testing, development environment, or offline development for Customer.io integrations. Trigger with phrases like "customer.io local dev", "test customer.io locally", "customer.io development environment", "customer.io sandbox". allowed-tools: Read, Write, Edit, Bash(npm:), Bash(pip:), Grep version: 1.0.0 license: MIT author: Jeremy Longshore jeremy@intentsolutions.io
Customer.io Local Dev Loop
Overview
Set up an efficient local development workflow for Customer.io integrations with proper testing and isolation.
Prerequisites
- Customer.io SDK installed
- Separate development workspace in Customer.io (recommended)
- Environment variable management tool (dotenv)
Instructions
Step 1: Create Environment Configuration
# .env.development
CUSTOMERIO_SITE_ID=dev-site-id
CUSTOMERIO_API_KEY=dev-api-key
CUSTOMERIO_REGION=us
# .env.production
CUSTOMERIO_SITE_ID=prod-site-id
CUSTOMERIO_API_KEY=prod-api-key
CUSTOMERIO_REGION=us
Step 2: Create Dev Client Wrapper
// lib/customerio.ts
import { TrackClient, RegionUS, RegionEU } from '@customerio/track';
const getRegion = () => {
return process.env.CUSTOMERIO_REGION === 'eu' ? RegionEU : RegionUS;
};
const isDevelopment = process.env.NODE_ENV !== 'production';
class CustomerIOClient {
private client: TrackClient;
private dryRun: boolean;
constructor() {
this.client = new TrackClient(
process.env.CUSTOMERIO_SITE_ID!,
process.env.CUSTOMERIO_API_KEY!,
{ region: getRegion() }
);
this.dryRun = process.env.CUSTOMERIO_DRY_RUN === 'true';
}
async identify(userId: string, attributes: Record<string, any>) {
if (this.dryRun) {
console.log('[DRY RUN] Identify:', { userId, attributes });
return;
}
if (isDevelopment) {
attributes._dev = true;
attributes._dev_timestamp = new Date().toISOString();
}
return this.client.identify(userId, attributes);
}
async track(userId: string, eventName: string, data?: Record<string, any>) {
if (this.dryRun) {
console.log('[DRY RUN] Track:', { userId, eventName, data });
return;
}
const eventData = {
name: isDevelopment ? `dev_${eventName}` : eventName,
data: { ...data, _dev: isDevelopment }
};
return this.client.track(userId, eventData);
}
}
export const cio = new CustomerIOClient();
Step 3: Set Up Test Helpers
// test/helpers/customerio-mock.ts
import { vi } from 'vitest';
export const mockCustomerIO = () => {
const mocks = {
identify: vi.fn().mockResolvedValue(undefined),
track: vi.fn().mockResolvedValue(undefined),
trackAnonymous: vi.fn().mockResolvedValue(undefined),
};
vi.mock('@customerio/track', () => ({
TrackClient: vi.fn().mockImplementation(() => mocks),
RegionUS: 'us',
RegionEU: 'eu',
}));
return mocks;
};
// Usage in tests
import { mockCustomerIO } from './helpers/customerio-mock';
describe('User Registration', () => {
const cioMocks = mockCustomerIO();
it('identifies user on signup', async () => {
await registerUser({ email: 'test@example.com' });
expect(cioMocks.identify).toHaveBeenCalledWith(
expect.any(String),
expect.objectContaining({ email: 'test@example.com' })
);
});
});
Step 4: Create Dev Scripts
{
"scripts": {
"dev:cio": "CUSTOMERIO_DRY_RUN=true ts-node scripts/test-customerio.ts",
"dev:cio:live": "dotenv -e .env.development ts-node scripts/test-customerio.ts",
"test:cio": "vitest run --reporter=verbose tests/customerio/"
}
}
Output
- Environment-aware Customer.io client
- Dry-run mode for safe testing
- Test mocks for unit testing
- Prefixed events for development isolation
Error Handling
| Error | Cause | Solution | |-------|-------|----------| | Wrong environment | Env vars not loaded | Use dotenv or env-specific files | | Dev events in prod | Environment check failed | Verify NODE_ENV is set correctly | | Mock not working | Import order issue | Mock before importing client |
Resources
Next Steps
After setting up local dev, proceed to customerio-sdk-patterns for production-ready patterns.
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/customer-io-local-dev-loop-mryiqhkf' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/customer-io-local-dev-loop-mryiqhkf/download' --output '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md.part' && mv '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md.part' '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Outils déclarés par l’auteur (à vérifier dans votre agent) : Read, Write, Edit, Bash(npm:*), Bash(pip:*), Grep
Extrait original : Prerequisites
- Customer.io SDK installed
- Separate development workspace in Customer.io (recommended)
- Environment variable management tool (dotenv)
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && test -s '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/customerio-local-dev-loop' && cp -R '.skill-downloads/customer-io-local-dev-loop-mryiqhkf' '.claude/skills/customerio-local-dev-loop'Cursor
test -f '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && test -s '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/customerio-local-dev-loop' && cp -R '.skill-downloads/customer-io-local-dev-loop-mryiqhkf' '.cursor/skills/customerio-local-dev-loop'Codex
test -f '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && test -s '.skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/customerio-local-dev-loop' && cp -R '.skill-downloads/customer-io-local-dev-loop-mryiqhkf' '.agents/skills/customerio-local-dev-loop'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/customer-io-local-dev-loop-mryiqhkf'openskills read 'customer-io-local-dev-loop-mryiqhkf'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/customer-io-local-dev-loop-mryiqhkf/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.