Das einzige Claude Code Plugin, das du JEMALS brauchst (Superpowers)

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

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.

Key Takeaway

Superpowers erweitert Claude Code um eine disziplinierte, skill-basierte Struktur, die durch detaillierte Planung und den Einsatz von Sub-Agenten die Entwicklung komplexer Softwareprojekte deutlich professionalisiert.

Highlights

Superpowers ist ein Framework für KI-Coding-Agenten mit über 50.000 GitHub-Sternen, das strukturierte Workflows erzwingt.

Das Plugin bietet spezialisierte Skills für Brainstorming, Planung, Implementierung und Red-Green-TDD.

Im Vergleich zum Standard-Plan-Modus von Claude Code liefert Superpowers oft durchdachtere Architekturen und sauberere Benutzeroberflächen.

Ein herausragendes Merkmal ist die automatische Erstellung von Git-Commits nach jedem abgeschlossenen Arbeitsschritt.

Die Nutzung von Sub-Agenten ermöglicht die parallele Bearbeitung komplexer Aufgabenpakete ohne ständige menschliche Intervention.

Trotz der Vorteile zeigt das Video, dass man KI-Agenten kritisch überwachen muss, da sie manchmal definierte Prozesse wie TDD eigenmächtig überspringen.

Superpowers positioniert sich als leistungsstarkes Werkzeug für komplexe Multi-Feature-Projekte, während es für Kleinstaufgaben eventuell zu umfangreich ist.

Timeline

Einführung in Superpowers und das Testprojekt

Der Sprecher stellt Superpowers als ein Framework vor, das Coding-Agenten durch strukturierte Workflows wie Brainstorming und TDD vor voreiligen Fehlern bewahrt. Als praktisches Beispiel dient das Projekt XDL, ein CLI-Tool zum Herunterladen von Twitter-Videos, das um ein Web-UI erweitert werden soll. Zunächst wird ein Versuch mit dem Standard-Plan-Modus von Claude Code (Opus 4.6) unternommen, um eine Vergleichsbasis zu schaffen. Dabei zeigt sich, dass der generierte Code beim ersten Ausführen Fehler aufweist, die manuell behoben werden müssen. Obwohl das Tool letztlich funktioniert, bleibt das Ergebnis in puncto Design und Benutzerfreundlichkeit hinter den Erwartungen zurück.

Vergleich: Die Überlegenheit der Superpowers-Variante

In diesem Abschnitt wird dieselbe Aufgabe – die Erstellung eines Web-UIs mit Artikel-Generator – mithilfe von Superpowers durchgeführt. Der Sprecher hebt hervor, dass das Design der Superpowers-Version sofort professioneller wirkt und zusätzliche Funktionen wie direktes Streaming im Browser bietet. Besonders beeindruckend ist die Workflow-Visualisierung, die dem Nutzer genau zeigt, in welcher Phase sich die Videoextraktion oder die Artikel-Generierung befindet. Die resultierenden Markdown-Artikel sind perfekt formatiert und lassen sich direkt weiterverwenden. Dieser Vergleich verdeutlicht, dass die geführte Struktur des Plugins zu qualitativ hochwertigeren Endprodukten führt.

Der Workflow: Von Brainstorming zur detaillierten Planung

Nach der Installation des Plugins stehen neue Slash-Befehle zur Verfügung, wobei der zentrale Befehl den Nutzer automatisch durch alle Phasen leitet. Der Brainstorming-Skill analysiert das Projekt und stellt dem Entwickler gezielte Gegenfragen zu Tech-Stack und Architektur-Präferenzen. Basierend auf diesen Antworten wird ein extrem detaillierter Plan erstellt, der in einem eigenen Verzeichnis gespeichert wird. Dieser Plan umfasst den gesamten Stack, die Verzeichnisstruktur, API-Endpunkte und Design-Richtlinien. Dieser prozessorientierte Ansatz stellt sicher, dass alle Anforderungen geklärt sind, bevor auch nur eine Zeile Code geschrieben wird.

Implementierung durch Sub-Agenten und parallele Tasks

Sobald der Design-Plan steht, transformiert Superpowers diesen in einen spezifischen Implementierungsplan, der komplexe Aufgaben in handliche Blöcke zerlegt. Der Nutzer kann hierbei zwischen einem vollautomatischen Sub-Agenten-Ansatz und einer interaktiven Session-Methode wählen. Im Video wird der Sub-Agenten-Ansatz gewählt, bei dem pro Task ein Agent autonom arbeitet. Jeder dieser Agenten folgt einem strengen Protokoll: Zuerst wird ein fehlschlagender Test geschrieben, dann der minimale Code zur Erfüllung des Tests implementiert. Dies garantiert eine hohe Testabdeckung und funktionale Korrektheit während der gesamten Bauphase.

Qualitätssicherung, Git-Integration und Code-Analyse

Während der Implementierung führt das System kontinuierlich Qualitätschecks durch, um Sauberkeit, Struktur und Wartbarkeit des Codes zu gewährleisten. Ein bemerkenswerter Vorteil von Superpowers ist die automatische Git-Integration, die nach jedem Teilschritt eigenständig Commits erstellt. Der Sprecher zeigt den resultierenden Code, der sauber in Server- und Client-Komponenten mit TypeScript-Interfaces unterteilt ist. Obwohl das Styling mit CSS-in-JS erfolgte, statt des eigentlich bevorzugten Tailwinds, ist die Struktur vorbildlich. Die automatisierten Commits sparen dem Entwickler wertvolle Zeit bei der Dokumentation des Projektfortschritts.

Kritische Reflexion und Fazit zum Tool-Einsatz

Trotz der Begeisterung übt der Sprecher auch Kritik und weist darauf hin, dass die KI definierte Prozesse wie TDD manchmal eigenmächtig ignoriert, um schneller zu liefern. Dies unterstreicht die Notwendigkeit, Pläne stets kritisch zu prüfen und den Ergebnissen der Agenten nicht blind zu vertrauen. Für sehr kleine Aufgaben hält der Sprecher das Framework für zu mächtig und bevorzugt dort simplere Methoden oder Dokumente. Bei Projekten mit mehreren parallelen Features hingegen spielt Superpowers seine Stärken voll aus. Abschließend wird das Tool als exzellenter Mittelweg zwischen Simplizität und hochgradig strukturierter Entwicklung bewertet.

Community Posts

View all posts