TypeScript Next.js Supabase .cursorrules prompt file

Author: kr3t3n

What you can build

AI-Powered Code Review Tool: A web application that integrates with GitHub and uses Vercel AI SDK to provide automated code reviews. It will analyze pull requests for adherence to TypeScript best practices, code structure, and performance optimization, providing suggestions for improvement.Next.js SEO Optimizer: A service that leverages Next.js 14's metadata API to analyze and suggest improvements for SEO on Next.js websites. It uses dynamic fetching of site metadata and provides real-time optimization strategies to enhance visibility and search rankings.Responsive UI Component Library: A curated library of pre-built, responsive components using React, Shadcn UI, Tailwind, and Radix UI, tailored specifically for TypeScript projects. This library will facilitate rapid development of aesthetically pleasing and performance-optimized UIs.Supabase Data Model Designer: An online tool that provides an intuitive interface to design and generate Supabase data models and schemas. It outputs TypeScript interfaces using Supabase SDK, enabling seamless integration with web applications for developers.Next.js Performance Monitoring Dashboard: A SaaS platform to analyze and track the performance metrics (LCP, CLS, FID) of Next.js applications. Using server-side capabilities of Next.js, it provides insights and suggestions for performance improvements in real-time.Functional Programming Learning Platform: An educational site focused on teaching functional and declarative programming patterns in TypeScript. It offers interactive courses and examples, utilizing React components and dynamic code snippets to help users learn by doing.Next.js Dynamic API Route Generator: A web application that generates API routes using Next.js App Router conventions. It provides developers with boilerplate code and efficient caching/revalidation strategies, facilitating quicker development cycles.Error & Loading State Management Library: A programmable library, built with React and Next.js, that includes ready-to-use templates for error boundaries and loading states. Its module-based system allows easy integration and customization in existing projects.Server Component Performance Enhancer: A tool that scans Next.js projects to recommend server-side rendering techniques and transition client-side components to server components where feasible, ensuring optimal usage and performance.AI-Powered Chat Interface Builder: A drag-and-drop builder that uses Vercel AI SDK to create and embed chat interfaces in websites. It supports creating structured conversations with interactive and responsive designs, optimized for TypeScript environments.

Benefits

Synopsis

Developers building modern, scalable web applications with a strong focus on performance, UI/UX, and server-side rendering would benefit, enabling them to implement best practices and optimize integration of TypeScript, Supabase, and Vercel AI SDK.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developing a project using TypeScript, Next.js, React, and associated libraries such as Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK. It emphasizes writing concise and modular TypeScript code using functional programming principles. The file outlines specific conventions for naming, syntax, UI styling, and performance optimization. It suggests the use of Supabase for database operations and details integration with Vercel AI SDK for AI-powered features. There are directives for efficient data fetching, error handling, SEO optimization, and adherence to Next.js docs for best practices in routing, rendering, and fetching data. The aim is to maintain high performance, readability, and maintainability within the project.

.cursorrules Content

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK.**Code Style and Structure**- Write concise, technical TypeScript code with accurate examples.- Use functional and declarative programming patterns; avoid classes.- Prefer iteration and modularization over code duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).- Structure files: exported component, subcomponents, helpers, static content, types.**Naming Conventions**- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for components.**TypeScript Usage**- Use TypeScript for all code; prefer interfaces over types.- Avoid enums; use const objects or as const assertions instead.- Use functional components with TypeScript interfaces.**Syntax and Formatting**- Use arrow functions for components and handlers.- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.- Use declarative JSX.**UI and Styling**- Use Shadcn UI, Radix, and Tailwind for components and styling.- Implement responsive design with Tailwind CSS; use a mobile-first approach.**Performance Optimization**- Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).- Wrap client components in Suspense with fallback.- Use dynamic loading for non-critical components.- Optimize images: use Next.js Image component, include size data, implement lazy loading.**Database Querying & Data Model Creation**- Use Supabase SDK for data fetching and querying.- For data model creation, use Supabase's schema builder.**Key Conventions**- Use 'nuqs' for URL search parameter state management.- Optimize Web Vitals (LCP, CLS, FID).- Limit 'use client': - Favor server components and Next.js SSR. - Use only for Web API access in small components. - Avoid for data fetching or state management.**Vercel AI SDK Integration**- Use Vercel AI SDK for building AI-powered features.- Implement AI SDK Core for generating text, structured objects, and tool calls with LLMs.- Utilize AI SDK UI hooks for building chat interfaces.- Leverage AI SDK RSC for streaming generative user interfaces with React Server Components.**Data Fetching and API Routes**- Use Next.js App Router conventions for data fetching and API routes.- Implement efficient caching and revalidation strategies using Next.js built-in features.- Use route handlers (route.ts) for API routes in the App Router.**Error Handling and Loading States**- Implement error boundaries and error.tsx files for error handling.- Use loading.tsx files for managing loading states.**SEO and Metadata**- Use Next.js 14's metadata API for SEO optimization.**Follow Next.js docs for Data Fetching, Rendering, and Routing.**