frontend-designer

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.

| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |

Erstellen Sie Frontend-Schnittstellen in Produktionsqualität mit modernem React, Tailwind CSS und shadcn/ui. Fünf Modi: Gerüstprojekte, Komponenten erstellen, Themen konfigurieren und Token entwerfen, Stile umgestalten und Codebasen prüfen. Kodiert Best Practices für React 19-Serverkomponenten (Framework-abhängig), TailwindCSS v4 CSS-First-Konfiguration, Shadcn/UI mit Radix-Primitiven, modernes CSS (Containerabfragen, :has(), Ansichtsübergänge, scrollgesteuerte Animationen), Monaspace-Typografie und Vite 6. Ersetzt die Fähigkeit zum Frontend-Design. Verwenden Sie es beim Erstellen, Stylen, Thematisieren oder Verbessern eines Frontend-Projekts. NICHT für Backend-APIs, Datenbankdesign, DevOps, Test-Frameworks, Zustandsverwaltungsbibliotheken, Routing oder die vollständige Einrichtung des SSR-Frameworks. Quelle: wyattowalsh/agents.