00:00:00Das ist Superpowers, das Framework für Agenten-Skills mit mehr als 50.000 Sternen auf GitHub,
00:00:05das Ihren Coding-Agenten daran hindert, voreilig Fehler zu machen, indem es ihn durch einen
00:00:10strukturierten Workflow zwingt, der Brainstorming, Implementierung, Red-Green-TDD
00:00:15und sogar den Einsatz von Sub-Agenten für parallele Aufgaben und Code-Reviews umfasst.
00:00:19Aber was unterscheidet das von der Nutzung des Plan-Modus oder der spezifikationsgetriebenen Entwicklung?
00:00:24Abonnieren Sie den Kanal und lassen Sie uns direkt einsteigen.
00:00:27Das hier ist ein Projekt namens XDL, ein CLI-Tool zum Herunterladen von Videos von Twitter.
00:00:32Ich möchte dafür ein Web-UI erstellen, das nicht nur Videos per URL in den Browser lädt,
00:00:38sondern daraus auch einen Artikel erstellt. Ich habe Opus 4.6 im Plan-Modus in Claude Code genutzt,
00:00:46um dieses UI zu entwerfen. Und das ist das Ergebnis.
00:00:50Leider gab es beim ersten Ausführen des Codes einige Probleme.
00:00:53Also bin ich den Code noch einmal durchgegangen, um die Fehler zu beheben, was hoffentlich geklappt hat.
00:00:58Jetzt scheint alles wie gewünscht zu funktionieren.
00:01:00Ich gehe nun zu Twitter und kopiere den Link zu diesem Tweet.
00:01:03Sorry, Kevin. Ich füge ihn hier ein und schaue, ob das Video heruntergeladen wird.
00:01:06Es wird extrahiert und der Download war erfolgreich.
00:01:09Ein Klick hier öffnet es in einem neuen Tab – nicht ganz wie erwartet, aber es funktioniert.
00:01:15Jetzt versuche ich, aus dem Tweet einen Artikel zu erstellen. Ich füge ihn ein und starte die Generierung.
00:01:20Wir sehen die einzelnen Schritte: Zuerst wird das Video extrahiert,
00:01:24dann folgt das Audio. Jetzt ist es fertig und wir erhalten den Artikel in perfekt formatiertem Markdown.
00:01:29Das ist wirklich beeindruckend. Schauen wir uns dieselbe Aufgabe mit Opus 4.6 an,
00:01:35aber diesmal unter Verwendung von Superpowers. Man sieht sofort, dass das Design viel besser ist,
00:01:39mit Optionen zum Download und zur Artikel-Erstellung. Gleiche URL, Klick auf Download, und wieder
00:01:45extrahiert es das Video. Diesmal lädt es direkt in meinen Browser und ich kann es sofort ansehen.
00:01:51Wenn wir nun denselben Tweet zur Artikel-Generierung nutzen, sehen wir hier die
00:01:56einzelnen Arbeitsschritte. Nachdem alle abgeschlossen sind, wird der Artikel in den Browser gestreamt.
00:02:01Ich kann ihn einfach kopieren und überall einfügen. Schon jetzt zeigt sich,
00:02:06dass die Superpowers-Version der Standard-Variante überlegen ist. Später schauen wir in den
00:02:10Code, aber zuerst erkläre ich das Vorgehen. Nach der Installation des Superpowers-Plugins
00:02:15haben wir neue Slash-Befehle wie „brainstorm“,
00:02:20„execute plan“ und „write the plan“, der den Plan aus dem Brainstorming erstellt. Eigentlich
00:02:25brauchen wir nur diesen einen Befehl, da Superpowers uns automatisch durch die Phasen leitet.
00:02:31Führen wir das aus und geben einen Prompt ein. Nach dem Bestätigen
00:02:35lädt der Brainstorming-Skill und analysiert das aktuelle Projekt. Hier stellt er mir
00:02:39Gegenfragen zur Optimierung. Ich antworte „React plus Vite“ und wünsche mir ein
00:02:44schrittweises Vorgehen für die Artikel-Erstellung. Nun soll ich die Architektur-Struktur bestätigen,
00:02:49die für mich gut aussieht. Es folgen Fragen zum Layout sowie zur Endpunkt- und Serverlogik.
00:02:54Nachdem alle Fragen beantwortet sind, wird ein Plan erstellt und
00:02:58in diesem Verzeichnis gespeichert. Der Plan ist extrem detailliert und bietet
00:03:03einen Überblick über den Stack, die Struktur, das Design, Layout, API-Endpunkte und vieles mehr.
00:03:09Das ähnelt sehr dem, was Claude Code selbst als Plan erstellen würde.
00:03:15Interessant wird es im nächsten Schritt. Nachdem ich den Plan bestätigt habe und
00:03:19bereit für die Umsetzung bin, wird ein spezieller Implementierungsplan erstellt. Dazu wird
00:03:25zuerst der ursprüngliche Design-Plan analysiert und
00:03:31in kleinere, handliche Aufgabenblöcke zerlegt, die von parallelen Sub-Agenten erledigt werden können.
00:03:36Dieser neue Plan landet wieder im Verzeichnis „plans“. Schauen wir dort hinein,
00:03:41sehen wir statt der Architektur-Übersicht eine Aufteilung in konkrete Tasks.
00:03:46Hier ist ein Task für das Projekt-Gerüst mit den entsprechenden Unterschritten.
00:03:52Ein weiterer Task erstellt das Vite- und React-Client-Skelett, ebenfalls mit detaillierten Schritten.
00:03:57So geht es weiter für alle Aufgaben, die zur Fertigstellung nötig sind. Danach
00:04:03lässt mich Superpowers die Methode wählen: Sub-Agenten-basiert oder parallele Sessions?
00:04:08Beim ersten Ansatz übernimmt ein Sub-Agent pro Task die Arbeit ohne menschliche Bestätigung.
00:04:14Der zweite Ansatz erstellt eine neue Session aus der Planungsphase, arbeitet Tasks in Batches ab
00:04:18und bittet mich als Mensch um Freigabe, bevor es weitergeht.
00:04:24Aus Zeitgründen wähle ich den Sub-Agenten-Ansatz. Jetzt werden die
00:04:28erforderlichen Projektaufgaben erstellt. Leider
00:04:32sehen diese Tasks anders aus als zuvor, da ich beim ersten Mal vergessen habe, den Bildschirm aufzunehmen.
00:04:36Ich habe also neu gestartet, aber mit exakt demselben Prompt. Aktuell
00:04:41erstellt jeder Sub-Agent zuerst einen Test – also einen fehlschlagenden Test. Dann
00:04:47schreibt er den minimal nötigen Code, um den Test zu bestehen. Ist das Feature fertig,
00:04:52wird geprüft, ob es die Anforderungen aus dem Plan erfüllt. Danach folgt
00:04:57ein Qualitätscheck des Codes auf Sauberkeit, Struktur und Wartbarkeit. Jetzt sind
00:05:02die meisten Aufgaben durch, und es folgt der Gesamttest. Und da haben wir es: Alle
00:05:06Tasks sind erledigt, und es wurde sogar ein Bug gefunden und direkt behoben. Betrachten
00:05:11wir den Code: Er ist unterteilt in Server und Source (vermutlich Frontend/Client).
00:05:16Wir sehen Komponenten wie „ArticleTab“ oder „DownloadTab“. In der
00:05:21„pipeline progress“ finden wir Phasen in einem Objekt, ein TypeScript-Interface. Scheinbar
00:05:27wurde CSS-in-JS für das Styling genutzt. Rückblickend hätte ich Tailwind vorgeben sollen,
00:05:32aber das ist okay. Und sehen Sie sich das an – das würde der Claude-Plan-Modus nie von selbst tun:
00:05:37Superpowers hat nach jedem Schritt einen Git-Commit erstellt, angefangen beim
00:05:43Scaffolding über den CLI-Wrapper bis hin zu Hono und allem dazwischen. Ein Blick auf
00:05:48den Git-Status zeigt: Alles ist sauber committet, was mir eine Menge Arbeit erspart.
00:05:53Sie fragen sich vielleicht, wo die Testdateien sind? Dazu kommen wir später.
00:05:57Ehrlich gesagt finde ich Superpowers beeindruckend. Mir gefällt die
00:06:02Konzentration auf Skills. Es gibt wohl 14 davon, die alles abdecken – von Brainstorming
00:06:08über Planung und Implementierung bis hin zum Review. Toll ist der Fokus auf TDD,
00:06:12besonders Red-Green-TDD, wo erst fehlschlagende Tests (rot) geschrieben werden,
00:06:18bevor der Code sie erfüllt. Manchmal klappt das jedoch nicht, weil der Agent
00:06:24sich dagegen entscheidet. Sehen Sie hier: Der Plan-Skill sah explizit TDD vor,
00:06:31aber Claude hat es ignoriert. Auf meine Nachfrage gab es zu: „Ja, mein Fehler.“
00:06:36Obwohl TDD im Skill steht, wurde es nicht gemacht. Warum? Laut Agent
00:06:42stand schnelles Ausliefern über dem Prozess. Warum das bei so einem modernen Modell passiert,
00:06:47weiß ich nicht, aber es zeigt: Man darf Ergebnissen nicht blind vertrauen.
00:06:53Man muss den Plan lesen und sicherstellen, dass alles wie gewünscht läuft.
00:06:57Daher werde ich Superpowers wohl nicht für jedes kleine Projekt nutzen,
00:07:03da manche Anforderungen einfach zu winzig sind. Bei kleinen Features
00:07:08plane ich lieber direkt mit Claude, schreibe ein Dokument und setze es in einer frischen Session um.
00:07:13Wenn ich aber in der Situation bin, mehrere Features gleichzeitig zu implementieren,
00:07:19was durchaus vorkommt, dann ist Superpowers ein großartiges Werkzeug.
00:07:24Es bricht komplexe Anforderungen hervorragend in Häppchen herunter,
00:07:31die von Sub-Agenten abgearbeitet werden. Die Task-Funktion von Claude Code kann das zwar auch,
00:07:37aber ich liebe es, dass Superpowers erst einen Plan erstellt, statt sofort loszucoden.
00:07:43Wie schlägt sich Superpowers im Vergleich zu Beads, SpecKit oder Spec-Driven Development?
00:07:48Für mich wirkt es wie eine zugänglichere Version des „Planung-vor-Ausführung“-Prinzips.
00:07:53Nicht so simpel wie Ralph, sondern eher ein Mittelding zwischen Ralph und Beads.
00:07:58Es kommen immer mehr Tools auf den Markt, die Entwicklern dabei helfen,
00:08:02mit KI-Agenten besseren Code zu schreiben. Das ist eine gute Entwicklung.
00:08:06Aber jeder arbeitet anders. Es ist sinnvoll, sich überall die besten Ansätze herauszupicken,
00:08:10um den für sich perfekten Workflow zu finden. Genau das werde ich vielleicht
00:08:16in Zukunft tun – und wenn Sie Glück haben, zeige ich Ihnen in einem Video, wie.