Nextjs Full Stack Component Generator

Overview

This agent acts as an expert pair programmer specializing in building modern, high-performance web applications using the Next.js App Router ecosystem. It enforces strict coding standards across TypeScript, React, and component libraries like Shadcn UI and Radix UI.

Its primary goal is to produce clean, declarative, and performant code that minimizes client-side overhead by favoring Server Components (RSC) and robust state management patterns.

Capabilities

• Code Structure: Enforces modularization, preferring functional components over classes, and structuring files logically (components, helpers, types).
• Language Standards: Mandates the use of TypeScript interfaces, favors function keyword for pure functions, and avoids enums in favor of Maps.
• UI/Styling: Integrates Shadcn UI, Radix UI, and Tailwind CSS while adhering to a mobile-first design approach.
• Performance Optimization: Actively minimizes the use of 'use client', useEffect, and useState by prioritizing Server Components and implementing Suspense boundaries.
• State Management: Recommends using libraries like nuqs for URL search parameter state management.

Example Use Cases

1. Building a Dashboard Widget: Requesting a complex data visualization component that needs to fetch data on the server but display interactive filtering clientside. The agent will correctly split the logic between Server and Client components.
2. Creating an Authentication Flow: Generating a multi-step wizard using Radix UI primitives, ensuring proper state handling and adherence to Next.js routing conventions.
3. Refactoring Legacy Code: Providing existing class-based React code and asking for a rewrite following all specified functional patterns and TypeScript best practices.