SendPulse Marketplace UI Skill

Principais recursos

Estilos da SendPulse. Carrega o pacote de estilos da CDN na ordem correta, configura as variáveis CSS e aplica os ajustes necessários para que painéis, campos e outros elementos sejam exibidos corretamente.

Componentes do design system. Usa classes disponíveis no pacote para criar formulários, botões, campos de seleção, opções de ativar e desativar, janelas modais, tabelas, menus suspensos, etiquetas e blocos de planos pagos. Inclui duas telas de exemplo: configurações da integração e lista de contas conectadas.

Ícones. Ajuda a escolher entre os 536 ícones de sp_icons pelo nome exato. Por exemplo, icon-plus é um sinal de mais dentro de um quadrado, enquanto icon-plus-add é um sinal de mais simples.

Layout dentro da SendPulse. Considera o tamanho do iframe, evita espaçamentos duplicados e usa a largura padrão de 364 px para os campos.

Temas claro e escuro. Oferece suporte ao tema informado pela SendPulse por meio de ?theme=dark e ajuda a preservá-lo após redirecionamentos ou autenticação via OAuth.

Problemas conhecidos do pacote. Documenta 16 casos em que uma classe exige configuração adicional, com o sintoma, a causa e a solução de cada um.

Validação. Os scripts identificam classes inexistentes, ordem incorreta de carregamento dos estilos e problemas do pacote ainda não corrigidos. Em um ambiente Node, também é possível conferir a página no Chrome nos dois temas.

Como instalar

1. Baixe a pasta sendpulse-marketplace-ui-cdn do repositório da SendPulse no GitHub.
2. Adicione a skill ao seu assistente de IA. No Claude Code, coloque a pasta em ~/.claude/skills/ ou em .claude/skills/ do seu projeto. No aplicativo Claude, envie um arquivo ZIP em Settings → Capabilities → Skills → Upload skill.
3. Descreva o que você quer criar. Por exemplo: “Crie uma página de configurações da integração com um campo para a chave de API, um seletor de funil e um botão Salvar.”

Você também pode usar a skill com ChatGPT, Cursor, Gemini e Copilot. As instruções para essas ferramentas estão na pasta adapters. Não é necessário ter um servidor MCP nem uma chave de API.

A skill foi criada para aplicativos que carregam o design system da SendPulse pela CDN. Se os estilos já fizerem parte da compilação do seu aplicativo, você ainda poderá usar as orientações sobre componentes, ícones e layout e pular as etapas de configuração da CDN.

Quando usar

Criar uma nova integração. Monte telas alinhadas ao design system da SendPulse nos temas claro e escuro.

Criar um aplicativo com IA. Descreva a interface desejada e deixe o assistente usar os componentes e as classes adequados da SendPulse.

Corrigir uma interface existente. Descubra por que um painel tem o fundo errado no tema escuro, as abas aparecem como uma lista ou uma janela modal não abre.

Conferir antes de publicar. Verifique como as telas são exibidas dentro do iframe e nos dois temas.

Atualizar uma tela específica. Adapte uma página ou um componente ao design system da SendPulse sem refazer o restante do aplicativo.