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) |

Crea interfacce frontend di livello produttivo con i moderni React, Tailwind CSS e shadcn/ui. Cinque modalità: progetti di scaffold, creazione di componenti, configurazione di temi e token di progettazione, stili di refactoring e basi di codici di controllo. Codifica le migliori pratiche per i componenti server React 19 (dipendenti dal framework), TailwindCSS v4 CSS-first config, shadcn/ui con primitive Radix, CSS moderni (query sui contenitori, :has(), transizioni di visualizzazione, animazioni guidate da scorrimento), tipografia Monaspace e Vite 6. Sostituisce le competenze di progettazione frontend. Da utilizzare durante la creazione, lo styling, la creazione di temi o il miglioramento di qualsiasi progetto frontend. NON per API backend, progettazione di database, DevOps, framework di test, librerie di gestione dello stato, routing o configurazione completa del framework SSR. Fonte: wyattowalsh/agents.