Der GitHub-Nutzer nomanjack hat Ende Oktober den Skill interface-bts für KI-Agenten veröffentlicht. Er zeichnet aus einer Animation im eigenen Projekt ein Spezifikationsposter im Format A4 und liest alle Werte aus der laufenden Komponente.[1]
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 5 Abschnitte
Der Skill steht unter MIT-Lizenz und läuft bislang nur mit React und CSS-Modulen. Das Repository hatte am 5. November sieben Sterne.[1]
Das Wichtigste in Kürze
- interface-bts kostet nichts und lässt sich mit
npx skills add nomanjack/interface-btsinstallieren, nötig ist Node 22. - Dauern, Kurven und Maße stammen aus der laufenden Komponente, Unlesbares gilt als Schätzung.
- Die Chrome DevTools zeigen Animationen live, ein Dokument für andere entsteht dort nicht.
- Unabhängige Erfahrungsberichte fehlen, das Projekt ist erst eine Woche alt.
Was zeichnet der Skill aufs Poster?
Das Poster zeigt die echte Komponente mitten in der Bewegung, dazu Maße, eine Easing-Kurve, drei Momente und eine Tabelle mit Auslöser, Eigenschaften, Dauer und Reduced Motion.
Der Skill friert die echte Komponente ein: Er pausiert deren Animationen über die Browser-Schnittstelle getAnimations() und setzt die Zeit. Nachgebaut wird nichts. Dauern, Kurven und Schwellen liest er aus den berechneten Stilen und der Zeitleiste, was sich nicht lesen lässt, markiert er als Schätzung.[2]
Vor dem Bau stimmt der Agent mit dem Nutzer im Chat die Überschrift, den Hauptmoment, drei Momente und zwei bis vier nummerierte Anmerkungen ab. Gestartet wird er nur auf ausdrücklichen Aufruf, etwa mit /interface-bts the dropdown in components/menu.tsx.[2]
Alle Poster eines Projekts erscheinen nebeneinander auf einer Seite namens /specs. Ein Skript speichert sie als PNG und WebP, dafür braucht es Playwright mit Chromium.[1]
Was lehrt der Skill über das Schreiben von Skills?
Der Autor behandelt Skills wie Apps: Ein Mensch installiert sie, ein Agent führt sie aus, und beide Seiten brauchen Gestaltung.
In seinem Beitrag „Designing a skill“ nennt er Skills die Apps der agentischen Ära, nur eben in Markdown statt in Code geschrieben. Begriffe wie „clean“ oder „minimal“ helfen einem Agenten kaum, genaue Anweisungen wirken besser.[3]
Die erste Fassung war ein Live-Overlay über einer Seite, später wechselte er zu eingefrorenen Animationen im Posterlayout. Schrift, Abstände und Farben stammen aus einem kleinen Satz Tokens. Getestet hat er den Skill in mehreren Projekten.[3]
Eckdaten, Stand 5. November 2026
Zwei Werkzeuge im Vergleich
Eine Animation, deren Dauer jemand gemessen statt geschätzt hat, lässt sich im Review nicht mehr wegdiskutieren.
Markus Seyfferth, Chefredakteur Dr. Web
Was können die Chrome DevTools schon?
Das Animations-Panel steckt kostenlos in Chrome und zeigt Animationen live. Ein Blatt für Kollegen oder Kunden erzeugt es nicht.
Das Panel erfasst CSS-Animationen, Transitions, Web Animations und View Transitions, pausiert und verlangsamt sie und ändert Dauer und Verzögerung per Ziehen. Animationen über requestAnimationFrame unterstützt es noch nicht.[4] Der Skill ersetzt das Panel also nicht, er liefert die Dokumentation dazu.
Für Agenturen erspart ein Poster pro Interaktion die Rückfrage, wie lange ein Menü einblendet. Das Thema Skills beschäftigt auch den Stageshow-Skill für Produktdemos und den Anatomy-Skill für Erklärgrafiken.
Was sollten Agenturen vor dem Einsatz prüfen?
Der Skill ist eine Woche alt und läuft nur mit React. Vor dem Einsatz im Kundenprojekt gehört er in einen Testzweig.
Ein Skill besteht aus Anweisungen, die ein Agent ausführt, deshalb gehört die Datei SKILL.md vor der Installation gelesen. Der Installationsweg läuft über das Werkzeug skills, das Vercel Labs unter MIT-Lizenz pflegt. Es unterstützt laut Projektseite Claude Code, Codex und Cursor sowie 75 weitere Agenten.[5]
Rechenzeit und Tokens fallen im Tarif des eigenen Agenten an. In anderen Frameworks kann der Agent laut README Layout und Konventionen übertragen, ein fertiges Kit gibt es nicht.[1] Wie Agenten Oberflächen sehen, zeigt Pure UI im Zeitalter der KI-Agenten.
Quellen
5 Quellen anzeigenQuellen ausblenden
- GitHubnomanjack/interface-bts (README, Lizenz, Sterne, Abruf)
- GitHubSKILL.md von interface-bts
- iamnoman.comDesigning a skill
- Chrome for DevelopersAnimationen in den DevTools untersuchen
- GitHubvercel-labs/skills (README)
Mehr Newshunger?
- Stageshow: Skill lässt KI-Agenten Produktoberflächen für Landingpages nachbauen
- Anatomy: Ein Skill für Claude Code zeichnet Ideen als bewegliche Maschinen
- Mean: Kostenlose Mac-App markiert Screenshots für KI-Agenten
- Pure UI im Zeitalter der KI-Agenten: Warum der Agent nur einen von 16 Zuständen sah
- Craftwork: UI-Kits, Vorlagen und Schriften von Designern direkt im KI-Agenten
- Desigma: Kostenlose Figma-Alternative in Rust läuft offline und ohne Konto
