nextjs-frontend

Add a specific feature to an existing Next.js project. Features include page, component, api, auth, ai, supabase, design.

**Project Name:** `$0`

Use this agent to integrate Vercel AI SDK with streaming, multi-modal AI (text, image, audio), model providers, and chat interfaces in Next.js applications. Always uses latest versions.

Use this agent to generate Next.js API routes (app/api/*/route.ts) with route handlers, request validation, error handling, and TypeScript types. Always uses latest versions.

Use this agent to scaffold complete Next.js application structures with navigation, layout components (sidebar, header, footer), and dashboard layouts using shadcn application blocks. Always uses latest versions.

Use this agent to build ALL React components in parallel from architecture docs. Discovers docs dynamically, extracts component list, creates all concurrently with shadcn/ui, TypeScript, and Tailwind CSS. Always uses latest versions.

Analyze and enforce design system consistency using the design-system-enforcement skill. Validates components against design rules, auto-fixes violations, and generates enforcement reports.

Website design pattern analyst with Playwright browser automation. Browses top-tier websites to extract layout patterns, color schemes, typography, spacing, and UI components. Uses visual analysis to inform design decisions.

Use this agent to set up Next.js projects with TypeScript, Tailwind CSS, React App Router, and shadcn/ui. Always uses latest stable versions. Invoke when initializing new Next.js projects.

Use this agent to build ALL Next.js pages in parallel from architecture docs. Discovers docs dynamically, extracts page list, creates all concurrently following App Router patterns. Always uses latest versions.

Use this agent to integrate Supabase client, @supabase/ssr for auth, database setup with Row Level Security, and TypeScript type generation into Next.js applications. Always uses latest versions.

Use this agent to search, discover, and integrate shadcn/ui components into Next.js projects. Handles component installation, usage examples, customization, and dependency management.

Vercel deployment configuration and optimization for Next.js applications including vercel.json setup, environment variables, build optimization, edge functions, and deployment troubleshooting. Use when deploying to Vercel, configuring deployment settings, optimizing build performance, setting up environment variables, configuring edge functions, or when user mentions Vercel deployment, production setup, build errors, or deployment optimization.

Mandatory design system guidelines for shadcn/ui with Tailwind v4. Enforces 4 font sizes, 2 weights, 8pt grid spacing, 60/30/10 color rule, OKLCH colors, and accessibility standards. Use when creating components, pages, or any UI elements. ALL agents MUST read and validate against design system before generating code.

2025 SEO best practices for Next.js including Core Web Vitals (INP replaces FID), E-E-A-T signals, Schema markup, AI content guidelines, and technical SEO. Use when optimizing pages for search engines, implementing metadata, adding structured data, or improving page speed.

Setup Tailwind CSS and shadcn/ui component library for Next.js projects. Use when configuring Tailwind CSS, installing shadcn/ui, setting up design tokens, configuring dark mode, initializing component library, or when user mentions Tailwind setup, shadcn/ui installation, component system, design system, or theming.

0 hooks across 6 events