Prototypes

ui-demo hilft dir, hochwertige Demo-Videos von Web-Apps mit Playwright, sichtbarer Mausbewegung und natürlichem Timing aufzunehmen. Nutze die ui-demo Skill für Walkthroughs, Onboarding-Clips, Feature-Touren und tutorialartige Aufnahmen. Folge dem Workflow aus discover, rehearse und record für zuverlässige Ergebnisse, besonders bei Prototypen und schnell veränderlichen UIs.

frontend-slides hilft dir, animationsreiche HTML-Präsentationen von Grund auf zu erstellen oder PowerPoint-Dateien zu konvertieren. Nutze die frontend-slides-Skill für Talks, Pitch-Decks, Workshops, interne Demos und frontend-slides for UI Design, wenn du visuelle Exploration, Browser-Ausgabe ohne Abhängigkeiten und Folien willst, die genau in einen Viewport passen.

algorithmic-art unterstützt bei originärer generativer Kunst in p5.js mit einem zweistufigen Workflow: erst eine algorithmische Gestaltungslogik formulieren, dann lauffähige .html- und .js-Ausgaben mit Seed-Zufall, Parametersteuerung und interaktivem Viewer erstellen.

ux-designer ist eine strukturierte UX-Design-Skill für Research, Accessibility, Informationsarchitektur, Interaktions-Flows, Wireframe-Leitlinien und UX Copy. Sie hilft Teams, aus groben Produktideen klarere, kriterienbasierte Designentscheidungen zu machen – mit `AGENTS.md` und fokussierten Regeldateien.

Das prototype-Skill hilft dir dabei, Wegwerfcode zu bauen, der eine konkrete Frage beantwortet, bevor du dich auf eine echte Implementierung festlegst. Nutze es, um Logik, Zustandsübergänge, Datenstruktur oder die UI-Richtung mit einem lauffähigen Prototypen zu testen, der den Konventionen des Host-Repos entspricht. Ideal ist es, wenn du einen schnellen Prototypen-Guide brauchst, nicht eine fertige Funktion.

Nutze figma, um Design-Kontext, Screenshots, Variablen und Assets vom Figma-MCP-Server abzurufen und Figma-Nodes in umsetzbare UI-Entscheidungen zu übersetzen. Diese figma skill ist ideal, wenn du eine Figma-URL oder eine Node-ID hast und präzise figma-Nutzung für Design-to-Code-Arbeiten, Setup oder Troubleshooting brauchst.

brandkit ist eine Premium-Skill zur Bildgenerierung für Branding-Arbeit – inklusive Logo-Systemen, Identity-Decks, visuellen Guideline-Boards und art-directed Markenpräsentationen. Der Skill ist auf kohärente, studioähnliche Ergebnisse ausgelegt, von Start-ups über Developer Tools, Security und Gaming bis hin zu Consumer Apps und Luxuskonzepten. Nutze brandkit, wenn du eine ausgearbeitete Markenwelt statt eines generischen KI-Moodboards willst.

shader-dev ist ein praxisnaher GLSL-Shader-Skill für Echtzeit-Visuals im ShaderToy-Stil. Nutze den shader-dev Skill, um Ray Marching, SDF-Szenen, Beleuchtung, Partikel, Flüssigkeitsbewegungen, Post-Processing und shader-dev für UI-Design mit weniger Rätselraten als bei einem generischen Prompt umzusetzen oder zu debuggen.

Nutze die remotion-Skill, um Stitch-Projektansichten in hochwertige Walkthrough-Videos mit Übergängen, Zooms und Texteinblendungen zu verwandeln. Enthalten sind Installationsschritte, Beispieldateien und ein wiederverwendbarer Remotion-Leitfaden für Videobearbeitung und renderbereite Compositions.

pol-probe-advisor hilft Produktmanagern, die passende Proof-of-Life-(PoL)-Probe für eine Hypothese, ein Risiko und das verfügbare Ressourcenlevel auszuwählen. Nutze den pol-probe-advisor Skill, um Überentwicklung zu vermeiden und die kostengünstigste sinnvolle Validierungsmethode mit dem tatsächlichen Lernziel abzugleichen. Ideal für pol-probe-advisor im Product Management, mit praxisnahem pol-probe-advisor Leitfaden und klarer Anwendungsempfehlung.

Die Storyboard-Skill verwandelt eine Produktidee in eine sechsteilige Erzählung, die vom Problem zur Lösung führt. Nutze sie für Stakeholder-Alignment, Konzeptreviews, Demos und Storyboards für Prototypen, wenn du schnell und nutzerzentriert prüfen willst, ob eine Idee Resonanz erzeugt.

pol-probe hilft dir, eine Proof-of-Life-Probe zu definieren, um eine riskante Hypothese günstig zu testen, bevor du ein echtes Produkt baust. Nutze die pol-probe-Skill, um Prototypen-Show zu vermeiden, strenge Erfolgskriterien festzulegen, den passenden Probentyp zu wählen und die Entsorgung nach dem Lernen zu planen.

hyperframes-registry hilft dir, wiederverwendbare HyperFrames-Registry-Einträge mit weniger Rätselraten zu installieren und zu verdrahten. Nutze es, um `hyperframes add` auszuführen, Blöcke von Komponenten zu unterscheiden, Snippets zusammenzuführen, Blöcke in `index.html` einzubinden und den Pfadzuordnungen in `hyperframes.json` für Design-Implementierung und Registry-Erkennung zu folgen.

gsap ist eine praxisnahe Animationsreferenz für HyperFrames-Kompositionen. Sie hilft dir dabei, zwischen `gsap.to()`, `from()`, `fromTo()` und `gsap.timeline()` zu wählen und anschließend die passenden `vars`, `easing`, `stagger`, `transforms` und Performance-Muster einzusetzen. Nutze diesen gsap-Leitfaden, wenn du umsetzungsreife Motion-Animationen für Entrance-Animationen, Übergänge und wiederverwendbare Design-Effekte brauchst.

excalidraw-diagram erstellt Excalidraw-JSON-Diagramme, die visuell argumentieren und nicht nur Kästen und Pfeile anzeigen. Nutzen Sie es für Workflows, Architekturen, Sequenzabläufe, Entscheidungswege und Konzeptdiagramme, bei denen Struktur, Lesbarkeit und echte Zusammenhänge zählen. Enthalten sind Installationshinweise, renderbewusste Prüfungen und ein praxisnaher Workflow für bessere Diagramme.

infocard hilft dir dabei, redaktionell wirkende Informationskarten in Markdown zu erstellen, indem HTML und CSS direkt in die Seite eingebettet werden. Das ist nützlich für Zusammenfassungen, Themen-Snippets, Highlight-Panels, Event-Karten, Vergleichsblöcke und andere UI-Design-taugliche Inhalte, die bewusst gestaltet wirken sollen. Es ist nicht für Diagramme oder Datenvisualisierungen gedacht; dafür solltest du stattdessen einen spezialisierten Diagramm- oder Chart-Skill verwenden.

canvas erstellt JSON-Canvas-Diagramme mit freier Positionierung und expliziten x/y-Koordinaten. Verwenden Sie es für Mindmaps, Wissensgraphen, Concept Maps, Planungsboards und andere Diagramm-Workflows, bei denen die räumliche Anordnung wichtiger ist als die Reihenfolge. Für Abläufe oder Datencharts ist es nicht die richtige Wahl. Nutzen Sie die canvas-Skill, wenn Sie editierbare Knoten, Verbindungen und eine strukturierte Layout-Logik benötigen.

imagegen-frontend-mobile ist ein Bild-Generierungs-Skill für hochwertige Mobile-App-Screens und mehrstufige Flows. Er hilft dabei, app-native Visuals für iOS-, Android- und plattformübergreifende Konzepte zu erstellen – mit klarer Hierarchie, gut lesbarem Text, kontrollierter Farbgebung und dezenten Smartphone-Mockups. Verwende ihn für Bildgenerierung, nicht für Code, Websites oder Desktop-UI.

gpt-taste ist eine designorientierte Skill-Lösung für ausgefeilte UI-Seiten mit redaktioneller Art Direction, disziplinierter Abstandslogik und GSAP-Motion. Verwende den gpt-taste Skill für Marketingseiten, Landingpages und Showcase-Websites, wenn du mehr Layout-Vielfalt, präzisere Typografie-Kontrolle und weniger generische Frontend-Muster willst. Der Guide enthält Installations- und Nutzungshinweise für die praktische Umsetzung.

Die hand-drawn-diagrams-Skill verwandelt natürlichsprachliche Prompts in handgezeichnete Excalidraw-Diagramme, Flows, Erklärgrafiken, Wireframes und Seiten-Mockups. Sie validiert die Ausgabe und kann eine Editier-URL plus exportierbare Bilder zurückgeben. Besonders geeignet für schnelles Diagramming, wenn du einen Skizzen-Look willst und keine polierte Vektorgrafik.

world-builder ist ein designorientierter Skill zum Erstellen und Verwalten generativer Spielzonen in Dorothys Pokémon-artiger Oberwelt. Verwende den world-builder Skill, um eine Idee, ein Thema oder einen Ort in eine spielbare Map mit Stimmung, Layout, Gelände, NPC-Platzierung und räumlicher Logik für Design-Implementierung zu verwandeln.

gif-sticker-maker verwandelt Fotos mit MiniMax Image Generation, MiniMax Video Generation und ffmpeg in 4 animierte GIF-Sticker im Stil von Funko Pop / Pop Mart. Diese gif-sticker-maker Skill deckt Installationsvoraussetzungen, Prompt-Vorlagen, Bildunterschriften und den kompletten Workflow von Bild zu GIF ab.

figma-create-new-file erstellt eine neue leere Figma- oder FigJam-Datei in den Entwürfen, mit Standardwerten für Editor-Typ und Dateiname. Diese figma-create-new-file Skill hilft bei Design-Umsetzungen, schnellem Prototyping und beim Start einer frischen Arbeitsfläche vor use_figma. Außerdem übernimmt sie bei Bedarf die planKey-Auflösung über whoami.

figma-use ist die erforderliche Skill für sichere `use_figma`-Aufrufe in Figma-Plugin-API-Workflows. Verwende die figma-use Skill, um sie vor dem Schreiben, Aktualisieren, Prüfen oder Strukturieren von Figma-Dateien mit JavaScript zu installieren und zu laden. Besonders nützlich ist sie für Design-Implementierung, Komponentenarbeit, Variablen, Auto-Layout und programmgesteuertes Auslesen von Dateien.