ui-demo

Überblick über den ui-demo Skill

Was ui-demo macht

Der ui-demo Skill hilft dir, ausgereifte Demo-Videos für Web-Apps mit Playwright aufzunehmen — inklusive sichtbarer Mausbewegung, sauber getakteter Interaktionen und einem natürlicheren Ablaufgefühl als bei einer einfachen Bildschirmaufnahme. Er eignet sich besonders für Produkt-Demos, Onboarding-Clips, Feature-Touren und Tutorial-Videos, wenn eine funktionierende UI klar und überzeugend gezeigt werden soll.

Wer ui-demo verwenden sollte

Nutze den ui-demo Skill, wenn du einen reproduzierbaren Weg brauchst, um einen groben Produktablauf in eine aufbereitete Aufnahme zu verwandeln. Er passt gut zu Entwicklern, Produktteams und Agenten, die einen Browser starten, Seiten prüfen und skriptgesteuerte Interaktionen ausführen können, ohne dafür einen kompletten Video-Editing-Workflow zu brauchen.

Warum ui-demo nützlich ist

Der größte Mehrwert liegt in der sauberen Vorgehensweise: Der Skill führt dich dazu, die echte UI zuerst zu erkunden, den Ablauf einzuüben und erst danach aufzunehmen. So sinkt das Risiko kaputter Demos durch falsche Selektoren, versteckte Bedienelemente oder unnatürliches Timing. Wenn du ui-demo for Prototypes suchst, ist das besonders hilfreich, weil sich Prototyp-Oberflächen schnell ändern und vor der Aufnahme schnell geprüft werden müssen.

So verwendest du den ui-demo Skill

Installieren und den Umfang festlegen

Für ui-demo install fügst du den Skill aus dem Repo hinzu und setzt ihn dann auf einen einzelnen Ablauf an, nicht auf die ganze App. Ein typischer Installationsbefehl ist:
npx skills add affaan-m/everything-claude-code --skill ui-demo

Bevor du startest, definiere das exakte Aufnahmeziel: welche Seite, welcher Nutzerweg, was der Zuschauer verstehen soll und ob der Clip für Doku, Sales oder ein internes Review gedacht ist.

Mit Erkundung beginnen, nicht mit Aufnahme

Der ui-demo usage Workflow hängt davon ab, dass du die Live-UI zuerst wirklich verstehst. Öffne die Zielseite, prüfe sichtbare Eingabefelder, Buttons, Menüs und Modals und notiere alle benutzerdefinierten Controls, die sich nicht wie normale HTML-Elemente verhalten. Die Anleitung im Repo ist eindeutig: erst erkunden, dann einüben, dann aufnehmen.

Gute Eingabe:

• „Record a 60-second walkthrough of creating a new project, adding one task, and sharing it.“
• „Show the settings flow on staging, focusing on theme switch and invite link.“

Schwache Eingabe:

• „Make a demo video of the app.“

Zuerst die richtigen Dateien lesen

Für den ui-demo guide solltest du mit SKILL.md beginnen und mit allen verlinkten Repo-Anweisungen, die das Browser-Setup oder Aufnahmegrenzen betreffen. In diesem Repo ist SKILL.md die primäre Quelle, und es gibt keine zusätzlichen Support-Ordner, auf die du dich verlassen kannst. Deshalb ist es wichtig, die Prozessabschnitte sorgfältig zu lesen und auf deine App zu übertragen.

Mit einem einstudierten Skript arbeiten

Entwirf die Demo als Abfolge von Nutzerzielen, nicht als bloße Klickliste. Halte den Startzustand, den Handlungspfad und den erwarteten Endzustand fest. Wenn der Ablauf riskante Stellen hat, etwa Datei-Uploads, asynchrone Speicherungen oder Modals, übe diese Schritte vor der Aufnahme, damit der finale Durchlauf sauber bleibt.

FAQ zum ui-demo Skill

Ist ui-demo besser als ein normaler Prompt?

Ja, wenn es darum geht, eine glaubwürdige Aufnahme zu erstellen und nicht nur eine Funktion zu erklären. Ein allgemeiner Prompt kann zwar eine grobe Checkliste erzeugen, aber der ui-demo skill gibt dir einen Workflow, der Selektorfehler, Timing-Probleme und unrealistische Interaktionen reduziert.

Ist ui-demo nur für fertige Produkte gedacht?

Nein. Der Skill funktioniert auch für Prototypen, Staging-Builds und interne Tools, weshalb ui-demo for Prototypes ein praktischer Anwendungsfall ist. Die wichtigste Voraussetzung ist, dass die UI interaktiv genug ist, um sie zuverlässig zu erkunden und aufzunehmen.

Was kann ein gutes Ergebnis verhindern?

Die größten Hindernisse sind instabile Oberflächen, unklare Zielabläufe und Annahmen über die Seitenstruktur. Wenn sich die App oft ändert, gib die aktuelle Route, stabile Testdaten und den genauen UI-Pfad an, damit die Aufnahme nicht vom Ziel abweicht.

Ist ui-demo anfängerfreundlich?

Ja, wenn du einen Nutzerweg klar beschreiben kannst. Du brauchst kein Wissen über Videoschnitt, aber genug Produktkontext, um zu sagen, was die Demo belegen soll und was weggelassen werden kann.

So verbesserst du den ui-demo Skill

Dem Skill ein schärferes Briefing geben

Die besten Eingaben für ui-demo usage nennen Zielgruppe, Dauer und Erfolgskriterium. Zum Beispiel: „Create a 45-second stakeholder demo showing how a manager reviews a report and exports CSV, with no error states or setup screens.“ Das ist stärker als eine generische Tour, weil Tempo und Umfang klar definiert sind.

Stabile UI-Kontexte bereitstellen

Wenn die Oberfläche dynamische Daten, Authentifizierung oder rollenbasierte Ansichten enthält, gib die genauen Startbedingungen an. Nenne Kontotyp, Route, Testdatensätze und jeden vorab geladenen Zustand. Das ist wichtig, weil der ui-demo skill dann am besten funktioniert, wenn der Browserzustand vorhersehbar ist.

Nach der ersten Aufnahme iterieren

Prüfe die erste Version auf Rhythmus, Klarheit des Cursors und darauf, ob der Zuschauer die Story auch ohne Sprechertext versteht. Danach verfeinerst du das Skript, indem du überflüssige Klicks entfernst, Leerlauf verkürzt und unklare Übergänge durch eindeutige UI-Schritte ersetzt. Damit sich ui-demo install wirklich auszahlt, solltest du den ersten Durchlauf als Probedaten und nicht als Endprodukt behandeln.

Auf typische Fehlerquellen achten

Die häufigsten Fehler sind zu lange Abläufe, unüberprüfte Selektoren und Demo-Skripte, die zu viele Funktionen auf einmal abdecken wollen. Wenn das Video unruhig wirkt, beschränke dich auf einen einzigen Endpunkt und stelle sicher, dass jeder Schritt dieses Ziel unterstützt.