SendPulse Marketplace UI Skill

Funciones principales

Estilos de SendPulse. Carga el paquete de estilos desde la CDN en el orden correcto, configura las variables CSS y aplica los ajustes necesarios para que paneles, campos y otros elementos se muestren bien.

Componentes del sistema de diseño. Usa clases disponibles en el paquete para crear formularios, botones, selectores, interruptores, ventanas modales, tablas, menús desplegables, etiquetas y bloques para planes de pago. Incluye dos pantallas de ejemplo: configuración de la integración y cuentas conectadas.

Íconos. Te ayuda a encontrar el nombre exacto entre los 536 íconos de sp_icons. Por ejemplo, icon-plus es un signo de más dentro de un cuadro, mientras que icon-plus-add es un signo de más sencillo.

Diseño dentro de SendPulse. Toma en cuenta el tamaño del iframe, evita espacios duplicados y usa el ancho estándar de 364 px para los campos.

Temas claro y oscuro. Admite el tema que SendPulse envía mediante ?theme=dark y ayuda a conservarlo después de redirecciones o de la autorización con OAuth.

Problemas conocidos del paquete. Documenta 16 casos en los que una clase necesita configuración adicional. Para cada uno explica qué ocurre, por qué y cómo solucionarlo.

Validación. Los scripts detectan clases inexistentes, errores en el orden de carga de los estilos y problemas del paquete que siguen sin resolverse. En un entorno Node, también puedes revisar la página en Chrome con ambos temas.

Cómo instalar

1. Descarga la carpeta sendpulse-marketplace-ui-cdn del repositorio de SendPulse en GitHub.
2. Agrega la skill a tu asistente de IA. En Claude Code, coloca la carpeta en ~/.claude/skills/ o en .claude/skills/ de tu proyecto. En la app de Claude, sube un archivo ZIP desde Settings → Capabilities → Skills → Upload skill.
3. Describe lo que quieres crear. Por ejemplo: «Crea una página de configuración de la integración con un campo para la clave de API, un selector de embudo y un botón Guardar».

También puedes usar la skill con ChatGPT, Cursor, Gemini y Copilot. Las instrucciones para estas herramientas están en la carpeta adapters. No necesitas un servidor MCP ni una clave de API.

La skill está pensada para apps que cargan el sistema de diseño de SendPulse desde una CDN. Si tu app incluye los estilos en su propia compilación, puedes seguir usando las recomendaciones sobre componentes, íconos y diseño, y omitir los pasos de configuración de la CDN.

Casos de uso

Crear una nueva integración. Diseña pantallas acordes con el sistema de diseño de SendPulse para los temas claro y oscuro.

Crear una app con IA. Describe la interfaz que necesitas y deja que tu asistente use los componentes y las clases de SendPulse adecuados.

Corregir una interfaz existente. Averigua por qué un panel tiene un fondo incorrecto en el tema oscuro, las pestañas aparecen como una lista o una ventana modal no se abre.

Revisar antes de publicar. Comprueba cómo se ven las pantallas dentro del iframe y en ambos temas.

Actualizar una pantalla específica. Adapta una página o un componente al sistema de diseño de SendPulse sin rehacer el resto de la app.