--- name: ui-development description: Generate production-ready Next.js projects with TypeScript, Tailwind CSS, shadcn/ui, and API integration. Use when the user asks to build, create, develop, or scaffold a Next.js application, web app, full-stack project, or frontend with backend integration. Prioritizes modern stack (Next.js 14+, TypeScript, shadcn/ui, axios, react-query) and best practices. Also triggers on requests to add features, integrate APIs, or extend existing Next.js projects. ---

UI Development

Generate production-ready Next.js projects from natural language, with shadcn/ui components, API integration, type safety, and modern tooling.

Quick Start (TL;DR)

Fast path for simple projects:

1. Create Next.js app → 2. Install shadcn/ui → 3. Build UI → 4. Start with PM2 → 5. Screenshot review → 6. Done

Live preview: Projects run on PM2 (port 3002), accessible at http://localhost:3002 or via nginx proxy if configured.

Default workflow: All projects use PM2 for dev server management (prevents port conflicts, ensures single instance).

Requirements & Optional Features

Required Dependencies

• Node.js 18+ and npm/yarn/pnpm
• Git (for project initialization)

Optional Features (user can decline)

1. Auto-Revision with Visual Review (requires Chromium)

• What it does: Takes screenshots during development to visually review designs and auto-fix issues
• Installation: sudo apt-get install chromium-browser (Debian/Ubuntu)
• Privileges: Read/write access to project files, execute chromium in headless mode
• If declined: Manual review only (you describe, user verifies)

2. Live Preview Server (requires Nginx)

• What it does: Serves project on external port for live preview during development (useful for mobile testing or remote access)
• Installation: sudo apt-get install nginx
• How it works: PM2 runs dev server on port 3002, nginx proxies it to chosen external port
• Nginx config template:

```nginx # /etc/nginx/sites-available/ server { listen ; # e.g., 3001, 8081, etc. server_name _;

location / { proxy_pass http://localhost:3002; # PM2 dev server proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ```

• Enable: sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/ && sudo systemctl reload nginx
• If declined: Access directly via http://localhost:3002 (PM2 port)

Before starting, ask user if they want to enable optional features.

Common Project Types

Quick reference for typical requests:

• Dashboard/Admin Panel → Use (dashboard) route group, shadcn data tables, charts
• Landing Page → Single app/page.tsx, hero section, features grid, testimonials
• Todo/Task App → shadcn checkbox, input, button; local state or API
• Blog/CMS → Dynamic routes app/blog/[slug]/page.tsx, markdown support
• E-commerce → Product catalog, cart state (Zustand), checkout flow
• SaaS App → Auth ((auth) group), protected routes, subscription logic
• Portfolio → Projects grid, contact form, image gallery
• Form-heavy App → React Hook Form + Zod validation, shadcn form components

Ask user: What type of project are you building? (helps determine structure and components)

Tech Stack

Core:

• Next.js 14+ (App Router)
• TypeScript
• Tailwind CSS v3
• shadcn/ui (recommended UI component library)
• ESLint + Prettier

API Integration (default):

• axios (HTTP client)
• @tanstack/react-query (data fetching, caching, state management)

Optional (based on needs):

• Zustand (client-side state management)
• Zod (runtime validation)
• next-auth (authentication)
• Prisma (database ORM)

Project Structure

Industry-standard Next.js 14+ App Router structure with feature-based organization:

...