Claude · Foto: Lachlan Hardy, CC BY 2.0

SubagentClaude SubagentenLizenz: MITfrei kopierbar

frontend-developer

Zuletzt aktualisiert: 13. September 2026

⬇ Als Datei laden

⧉ –× kopiert⬇ –× heruntergeladenBewertung:

Typ

Subagent

Lizenz

MIT

Quelle

wshobson/agents ↗

Anwendungsfeld

Claude Subagenten

Frontend-Entwickler (React-Ökosystem).

Voraussetzungen

Projekt basiert auf dem aktuellen React-19-/Next.js-15-Stack
Design-Spezifikation oder Mockup, sonst rät der Agent bei visuellen Details
Claude Code mit Subagent-Unterstützung

Einordnung

Der Einsatz ist unkompliziert, setzt aber einen aktuellen React/Next.js-Stack und eigene Design-Vorgaben voraus.

Baut React-19-/Next.js-15-Komponenten, responsive Layouts, State-Management; achtet auf Performance und Barrierefreiheit.

Für wen: Frontend-Entwickler (React-Ökosystem).

Im Detail

Dieser Subagent implementiert React-Komponenten und Frontend-Architektur auf aktuellem Stand: React 19 mit Actions und Server Components, Next.js 15, responsive Layouts und clientseitiges State-Management. Er berücksichtigt sowohl serverseitiges als auch clientseitiges Rendering und legt Wert auf Performance-Optimierung und Barrierefreiheit statt nur auf funktionierenden Code. Das Modell wird von der übergeordneten Konfiguration übernommen (inherit), läuft also mit dem jeweils eingestellten Standardmodell. Sinnvoll ist er für konkrete UI-Umsetzung und das Beheben von Frontend-Bugs in modernen React-/Next.js-Projekten. Für serverseitige APIs, Datenmodelle oder Infrastruktur ist er nicht zuständig, dafür sind backend-architect beziehungsweise api-designer die richtige Anlaufstelle.

Schritt für Schritt

Für konkrete UI-Komponenten oder Layout-Aufgaben im React/Next.js-Stack einsetzen
Vorab eine Spezifikation oder ein Mockup bereitstellen, damit visuelle Details nicht geraten werden
Generierten Code auf aktuelle Patterns wie Server Components und moderne Hooks prüfen
Ergebnis auf Responsivität, Performance und Barrierefreiheit testen
Bei Bedarf State-Management oder Layout-Details iterativ nachschärfen

Beispiel aus der Praxis

Sie geben ein Mockup für ein Dashboard-Widget mit Filterleiste vor; der Agent baut die Komponente samt responsivem Layout und State-Management für die Filterauswahl im aktuellen Next.js-Stack.

Praxis-Tipp

Setzen Sie ihn proaktiv bei jeder neuen UI-Komponente ein, zum Beispiel mit ‘Baue eine barrierefreie, responsive Filterleiste als React-Server-Component für die Produktliste’.

Stolperfallen

Ohne Design-Vorgabe oder Mockup rät der Agent bei visuellen Details wie Abständen oder Farben, was zu Nacharbeit führt. Auf einem älteren React- oder Next.js-Stand passen die vorgeschlagenen modernen Patterns möglicherweise nicht zum Projekt.

Siehe auch

Lizenz & Quelle

Lizenz: MIT
Quelle: wshobson/agents

Häufige Fragen.

Funktioniert der Agent auch mit älteren React-Versionen?

Laut Beschreibung ist er auf React 19 und Next.js 15 ausgelegt, ältere Versionen sind nicht der Fokus.

Muss ich das Design selbst liefern?

Ja, ohne mitgelieferte Spezifikation oder Mockup rät der Agent bei visuellen Details.

Für wen lohnt sich der Einsatz?

Vor allem für Teams, die bereits auf React und Next.js setzen und idiomatischen, wartbaren Code erwarten.

Inhalt ansehen (frontend-developer.md)

Lade …

Erfahrungen & Kommentare.

Funktioniert der Subagent bei Ihnen? Tipps, Stolperfallen, Varianten — teilen Sie es mit der Community.

Lade Kommentare …