SendPulse Marketplace UI Skill

Fonctionnalités principales

Styles SendPulse. Charge le bundle depuis le CDN dans le bon ordre, configure les variables CSS et applique les correctifs nécessaires pour afficher correctement les panneaux, les champs et les autres éléments.

Composants du design system. Utilise les classes présentes dans le bundle pour créer des formulaires, des boutons, des listes de sélection, des interrupteurs, des fenêtres modales, des tableaux, des menus déroulants, des badges et des blocs réservés aux offres payantes. Deux exemples d’écrans sont inclus : les paramètres d’une intégration et la liste des comptes connectés.

Icônes. Aide à choisir la bonne icône parmi les 536 icônes de sp_icons grâce à leur nom exact. Par exemple, icon-plus représente un signe plus dans un carré, tandis que icon-plus-add représente un simple signe plus.

Mise en page dans SendPulse. Tient compte des dimensions de l’iframe, évite les espacements en double et utilise la largeur standard de 364 px pour les champs.

Thèmes clair et sombre. Prend en charge le thème transmis par SendPulse via ?theme=dark et aide à le conserver après une redirection ou une autorisation OAuth.

Problèmes connus du bundle. Documente 16 cas où une classe nécessite une configuration supplémentaire. Pour chacun, le skill indique le symptôme, la cause et la solution.

Vérification du résultat. Des scripts détectent les classes inexistantes, un ordre de chargement incorrect des styles et les problèmes du bundle qui n’ont pas été corrigés. Dans un environnement Node, vous pouvez aussi vérifier la page dans Chrome avec les deux thèmes.

Installation

1. Téléchargez le dossier sendpulse-marketplace-ui-cdn depuis le dépôt GitHub de SendPulse.
2. Ajoutez le skill à votre assistant IA. Dans Claude Code, placez le dossier dans ~/.claude/skills/ ou dans le répertoire .claude/skills/ de votre projet. Dans l’application Claude, importez une archive ZIP via Settings → Capabilities → Skills → Upload skill.
3. Décrivez ce que vous souhaitez créer. Par exemple : « Crée une page de paramètres d’intégration avec un champ pour la clé API, un sélecteur d’entonnoir de vente et un bouton Enregistrer. »

Vous pouvez également utiliser ce skill avec ChatGPT, Cursor, Gemini et Copilot. Les instructions correspondantes se trouvent dans le dossier adapters. Aucun serveur MCP ni aucune clé API ne sont nécessaires.

Le skill est conçu pour les applications qui chargent le design system SendPulse depuis un CDN. Si votre application intègre les styles dans sa propre compilation, vous pouvez utiliser les recommandations sur les composants, les icônes et la mise en page sans suivre les étapes de configuration du CDN.

Cas d’utilisation

Créer une nouvelle intégration. Réalisez des écrans conformes au design system SendPulse en thème clair et sombre.

Créer une application avec l’IA. Décrivez l’interface souhaitée et laissez votre assistant utiliser les composants et les classes SendPulse adaptés.

Corriger une interface existante. Identifiez la cause d’un fond incorrect en thème sombre, d’onglets affichés comme une liste ou d’une fenêtre modale qui ne s’ouvre pas.

Vérifier avant la publication. Contrôlez l’affichage de vos écrans dans l’iframe et avec les deux thèmes.

Mettre à jour un écran précis. Adaptez une page ou un composant au design system SendPulse sans refaire le reste de l’application.