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) |
최신 React, Tailwind CSS 및 shadcn/ui를 사용하여 프로덕션급 프런트엔드 인터페이스를 구축하세요. 5가지 모드: 스캐폴드 프로젝트, 구성요소 생성, 테마 및 디자인 토큰 구성, 스타일 리팩터링, 코드베이스 감사. React 19 서버 구성 요소(프레임워크 종속), TailwindCSS v4 CSS 우선 구성, Radix 기본 요소가 포함된 shadcn/ui, 최신 CSS(컨테이너 쿼리, :has(), 보기 전환, 스크롤 기반 애니메이션), Monaspace 타이포그래피 및 Vite 6에 대한 모범 사례를 인코딩합니다. 프런트엔드 디자인 기술을 대체합니다. 프런트엔드 프로젝트를 구축, 스타일링, 테마 지정 또는 개선할 때 사용하세요. 백엔드 API, 데이터베이스 디자인, DevOps, 테스트 프레임워크, 상태 관리 라이브러리, 라우팅 또는 전체 SSR 프레임워크 설정에는 적합하지 않습니다. 출처: wyattowalsh/agents.