SendPulse Marketplace UI Skill

Stai creando un’app o un’integrazione per SendPulse? Questa skill aiuta gli sviluppatori e chi crea app con l’IA a realizzare un’interfaccia che sembri parte della piattaforma e funzioni come tale. Descrivi la schermata che ti serve e il tuo assistente IA la creerà usando il design system di SendPulse. La skill funziona con Angular, React, Vue e HTML.

Funzionalità principali

Stili SendPulse. Carica il pacchetto di stili dalla CDN nell’ordine corretto, configura le variabili CSS e applica le correzioni necessarie per visualizzare correttamente pannelli, campi e altri elementi.

Componenti del design system. Usa le classi presenti nel pacchetto per creare moduli, pulsanti, menu di selezione, interruttori, finestre modali, tabelle, menu a discesa, badge e blocchi per i piani a pagamento. Include due schermate di esempio: le impostazioni dell’integrazione e l’elenco degli account collegati.

Icone. Ti aiuta a scegliere l’icona giusta tra le 536 icone di sp_icons usando il nome esatto. Per esempio, icon-plus indica un segno più dentro un quadrato, mentre icon-plus-add indica un semplice segno più.

Layout all’interno di SendPulse. Tiene conto delle dimensioni dell’iframe, evita spaziature doppie e usa la larghezza standard di 364 px per i campi.

Tema chiaro e scuro. Supporta il tema trasmesso da SendPulse tramite ?theme=dark e aiuta a mantenerlo dopo un reindirizzamento o l’autorizzazione OAuth.

Problemi noti del pacchetto. Documenta 16 casi in cui una classe richiede configurazioni aggiuntive. Per ciascuno indica il sintomo, la causa e la soluzione.

Verifica del risultato. Gli script individuano classi inesistenti, errori nell’ordine di caricamento degli stili e problemi del pacchetto non ancora risolti. In un ambiente Node puoi anche controllare la pagina in Chrome con entrambi i temi.

Come installare

Scarica la cartella sendpulse-marketplace-ui-cdn dal repository GitHub di SendPulse.
Aggiungi la skill al tuo assistente IA. Per Claude Code, inserisci la cartella in ~/.claude/skills/ oppure nella directory .claude/skills/ del progetto. Nell’app Claude, carica un archivio ZIP da Settings → Capabilities → Skills → Upload skill.
Descrivi ciò che vuoi creare. Per esempio: «Crea una pagina delle impostazioni dell’integrazione con un campo per la chiave API, un selettore della pipeline e un pulsante Salva».

Puoi usare la skill anche con ChatGPT, Cursor, Gemini e Copilot. Le istruzioni per questi strumenti si trovano nella cartella adapters. Non servono un server MCP né una chiave API.

La skill è pensata per le app che caricano il design system di SendPulse da una CDN. Se la tua app include gli stili nella propria build, puoi comunque seguire le indicazioni su componenti, icone e layout e saltare i passaggi di configurazione della CDN.

Casi d’uso

Creare una nuova integrazione. Realizza schermate conformi al design system di SendPulse sia con il tema chiaro sia con quello scuro.

Creare un’app con l’IA. Descrivi l’interfaccia che ti serve e lascia che l’assistente usi i componenti e le classi SendPulse adatti.

Correggere un’interfaccia esistente. Scopri perché un pannello ha lo sfondo sbagliato nel tema scuro, le schede appaiono come un elenco o una finestra modale non si apre.

Verificare prima della pubblicazione. Controlla come vengono visualizzate le schermate nell’iframe e con entrambi i temi.

Aggiornare una schermata specifica. Adatta una pagina o un componente al design system di SendPulse senza rifare il resto dell’app.