Frontend

Die 26 Frontend-Agenten decken den Weg von der ersten Komponente bis zum Deploy ab. Der Komponenten-Architekt zerlegt UI-Anforderungen in Bausteine mit getypten Props und dokumentierter Verantwortungsgrenze, der Design-System-Builder überführt Styleguides in Design-Tokens als Single Source of Truth, und der Daten-Layer-Agent modelliert jede Netzwerk-Anfrage als Zustandsautomat mit Lade-, Fehler- und Leer-Zustand. Jeder Agent liefert einen festen Output-Vertrag — du bekommst Dateien und Tabellen, keine vagen Hinweise.

Qualität hat eigene Zuständige: Der Accessibility-Audit prüft Markup entlang der vier WCAG-Prinzipien und liefert eine priorisierte Befund-Liste mit korrigiertem ARIA-Markup. Der Performance-Audit bindet jede Optimierungs-Maßnahme an eine gemessene Core-Web-Vitals-Metrik. E2E-, Komponenten- und visuelle Regressions-Tests haben je einen Spezialisten — inklusive der Regel, flakey Tests ohne feste Timeouts zu stabilisieren. Die Agenten grenzen sich gegenseitig ab und verweisen aufeinander, statt sich zu überlappen.

Typische Aufgaben

• Ein interaktives div ohne Rolle und tabindex blockiert Tastatur-Nutzer — kv-frontend-accessibility-audit liefert die WCAG-Befund-Liste mit korrigiertem Markup.
• Deine Produktliste lädt per fetch() ohne Lade- und Fehlerzustand und feuert doppelte Calls — kv-frontend-data-fetching baut den Zustandsautomaten mit Cache-Strategie.
• Lighthouse meldet schlechte Core Web Vitals — kv-frontend-performance-audit ordnet jeden Engpass einer gemessenen Metrik zu und priorisiert die Optimierungen nach Wirkung und Aufwand.
• Dein E2E-Login-Test scheitert unregelmäßig — kv-frontend-e2e-testing ersetzt feste Timeouts durch zustandsbasierte Erwartungen und isoliert die Tests.

Alle 26 Agenten in kv-frontend

Jede Zeile ist eine Datei im ausgelieferten Paket — Name identisch mit dem Ordner im Download.

• kv-frontend-accessibility-audit Prüft Markup gegen WCAG und liefert eine Befund-Liste mit Verstößen, Selektoren und korrigiertem ARIA-Markup.
• kv-frontend-animation-motion Implementiert GPU-freundliche Animationen mit definierten Easing-Kurven und reduced-motion-Fallback.
• kv-frontend-api-contract Erstellt eine getypte API-Client-Schicht mit Schema-Validierung an der Netzwerkgrenze.
• kv-frontend-build-tooling Richtet Vite- oder Webpack-Builds ein: Alias-Pfade, Umgebungsmodi, stabiler Dev- und Prod-Output.
• kv-frontend-bundle-optimization Reduziert Bundle-Größen durch Code-Splitting-Grenzen, Lazy-Imports und Tree-Shaking.
• kv-frontend-component-architect Entwirft React- oder Vue-Komponenten mit getypten Props, Slots und dokumentierter Verantwortungsgrenze.
• kv-frontend-component-testing Schreibt Komponenten-Tests mit Testing-Library, die Verhalten statt Implementierung prüfen.
• kv-frontend-cross-browser-compat Behebt Browser-Unterschiede mit Feature-Detection, gezielten Fallbacks und dokumentierter Support-Matrix.
• kv-frontend-css-architecture Legt eine Styling-Strategie fest und refaktoriert Stylesheets in eine klar geschichtete Struktur.
• kv-frontend-data-fetching Baut einen Daten-Layer mit Cache-Strategie und expliziten Lade-, Fehler- und Leer-Zuständen.
• kv-frontend-deployment-static Konfiguriert Static-Deploys mit Asset-Hashing, Cache-Control-Strategie und SPA-Fallback-Routing.
• kv-frontend-design-system-builder Überführt Styleguides in Design-Tokens und ein Basis-Komponenten-Set als Single Source of Truth.
• kv-frontend-e2e-testing Erstellt E2E-Tests mit Playwright oder Cypress und stabilisiert flakey Tests ohne feste Timeouts.
• kv-frontend-env-config Trennt dev/prod-Konfigurationen mit validierten Variablen und sicherer Client-Server-Grenze.
• kv-frontend-form-builder Baut Formulare mit Client-Validierung, zugänglichen Fehlermeldungen und definiertem Submit-Verhalten.
• kv-frontend-image-media Optimiert Bilder mit responsiven Formaten, Lazy-Loading und reservierten Abmessungen gegen Layout-Shift.
• kv-frontend-legacy-migration Plant inkrementelle Frontend-Migrationen mit klarer Grenze zwischen Alt- und Neu-Code.
• kv-frontend-performance-audit Wertet Core-Web-Vitals-Messdaten aus, ordnet Engpässe Metriken zu und priorisiert nach Wirkung und Aufwand.
• kv-frontend-responsive-layout Repariert brechende Layouts mit definierten Breakpoints und getesteten Viewport-Zuständen.
• kv-frontend-routing-architect Strukturiert Client-Routing mit verschachtelten Layouts, Guard-Logik und korrekten Deep-Links.
• kv-frontend-semantic-html Refaktoriert div-Suppe zu semantischem Markup mit Überschriften-Hierarchie und Landmark-Struktur.
• kv-frontend-seo-technical Erstellt die technische SEO-Schicht: Meta-Tags, OpenGraph, JSON-LD, Sitemap und Crawl-Direktiven.
• kv-frontend-ssr-rendering Begründet die Wahl zwischen SSG und SSR und implementiert Rendering mit fehlerfreier Hydration.
• kv-frontend-state-management Löst Prop-Drilling auf und trennt lokalen, geteilten und Server-Zustand in einer State-Architektur.
• kv-frontend-typescript-strict Entfernt any-Typen, aktiviert den strict-Modus und liefert typsichere Änderungen mit engeren Generics.
• kv-frontend-visual-regression Richtet visuelle Regressions-Pipelines ein: Baseline-Snapshots, Diff-Schwellen und Review-Workflow.