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

Cree interfaces frontend de nivel de producción con React moderno, Tailwind CSS y shadcn/ui. Cinco modos: desarrollar proyectos, crear componentes, configurar temas y diseñar tokens, refactorizar estilos y auditar bases de código. Codifica las mejores prácticas para los componentes del servidor React 19 (dependientes del marco), TailwindCSS v4 CSS-first config, shadcn/ui con primitivas Radix, CSS moderno (consultas de contenedor, :has(), transiciones de vista, animaciones basadas en desplazamiento), tipografía Monaspace y Vite 6. Reemplaza la habilidad de diseño frontend. Úselo al crear, diseñar, tematizar o mejorar cualquier proyecto frontend. NO para API de backend, diseño de bases de datos, DevOps, marcos de prueba, bibliotecas de administración de estado, enrutamiento o configuración completa del marco SSR. Fuente: wyattowalsh/agents.