SendPulse Marketplace UI Skill

Du entwickelst eine App oder Integration für SendPulse? Dieser Skill hilft Entwicklerinnen und Entwicklern sowie allen, die Apps mit KI erstellen, eine Oberfläche zu gestalten, die sich nahtlos in die Plattform einfügt. Beschreibe den gewünschten Bildschirm und dein KI-Assistent setzt ihn mit dem SendPulse Designsystem um. Der Skill funktioniert mit Angular, React, Vue und einfachem HTML.

Wichtigste Funktionen

SendPulse Styles. Bindet das CSS-Bundle vom CDN in der richtigen Reihenfolge ein, richtet CSS-Variablen ein und ergänzt notwendige Korrekturen, damit Panels, Felder und andere Elemente richtig dargestellt werden.

Komponenten des Designsystems. Verwendet die im Bundle vorhandenen Klassen für Formulare, Buttons, Auswahlfelder, Schalter, Modalfenster, Tabellen, Dropdown-Menüs, Badges und Bereiche für kostenpflichtige Tarife. Zwei Beispielansichten sind enthalten: Integrationseinstellungen und eine Liste verbundener Konten.

Icons. Hilft dir, aus 536 sp_icons-Icons anhand ihrer exakten Namen das richtige auszuwählen. icon-plus zeigt beispielsweise ein Plus in einem Quadrat, während icon-plus-add ein einfaches Plus zeigt.

Layout innerhalb von SendPulse. Berücksichtigt die Größe des iframes, vermeidet doppelte Abstände und verwendet die Standardbreite von 364 px für Felder.

Helles und dunkles Design. Unterstützt das von SendPulse über ?theme=dark übermittelte Design und hilft dabei, es nach Weiterleitungen oder einer OAuth-Autorisierung beizubehalten.

Bekannte Probleme des Bundles. Dokumentiert 16 Fälle, in denen eine Klasse zusätzliche Einstellungen benötigt. Für jeden Fall werden das Symptom, die Ursache und die Lösung beschrieben.

Prüfung des Ergebnisses. Skripte erkennen nicht vorhandene Klassen, eine falsche Reihenfolge beim Laden der Stylesheets und noch nicht behobene Probleme des Bundles. In einer Node-Umgebung kannst du die Seite außerdem in Chrome mit beiden Designs prüfen.

Installation

Lade den Ordner sendpulse-marketplace-ui-cdn aus dem GitHub-Repository von SendPulse herunter.
Füge den Skill deinem KI-Assistenten hinzu. Lege den Ordner für Claude Code unter ~/.claude/skills/ oder im Verzeichnis .claude/skills/ deines Projekts ab. In der Claude-App kannst du ein ZIP-Archiv über Settings → Capabilities → Skills → Upload skill hochladen.
Beschreibe, was du erstellen möchtest. Zum Beispiel: „Erstelle eine Seite für Integrationseinstellungen mit einem Feld für den API-Schlüssel, einer Auswahl für den Funnel und einem Speichern-Button.“

Du kannst den Skill auch mit ChatGPT, Cursor, Gemini und Copilot verwenden. Anleitungen dafür findest du im Ordner adapters. Ein MCP-Server oder API-Schlüssel ist nicht erforderlich.

Der Skill ist für Apps gedacht, die das SendPulse Designsystem über ein CDN laden. Wenn die Styles bereits Teil deines eigenen Builds sind, kannst du die Hinweise zu Komponenten, Icons und Layout trotzdem nutzen und die Schritte zur CDN-Einbindung überspringen.

Anwendungsfälle

Eine neue Integration erstellen. Gestalte Ansichten im SendPulse Designsystem für das helle und dunkle Design.

Eine App mit KI erstellen. Beschreibe die gewünschte Oberfläche und lass deinen Assistenten die passenden SendPulse Komponenten und Klassen verwenden.

Eine bestehende Oberfläche korrigieren. Finde heraus, warum ein Panel im dunklen Design den falschen Hintergrund hat, Tabs als Liste erscheinen oder sich ein Modalfenster nicht öffnet.

Vor der Veröffentlichung prüfen. Kontrolliere, wie deine Ansichten im iframe und mit beiden Designs dargestellt werden.

Eine einzelne Ansicht aktualisieren. Passe eine Seite oder Komponente an das SendPulse Designsystem an, ohne den Rest der App neu zu gestalten.