Node React Tailwind Guide .cursorrules prompt file
About .cursorrules prompt file
What you can build
AI-Powered Chatbot Application: Develop a chatbot application using the Vercel AI SDK UI for a streaming chat interface. Its backend can utilize Next.js and Supabase for real-time communications, supporting multiple AI models with graceful model switching and error handling.
Real-Time Collaboration Tool: Create a collaboration platform using Supabase for real-time data syncing and a responsive UI built with Radix UI and Tailwind CSS. Integrate Vercel AI SDK for AI-based content generation and suggestions.
AI-Enhanced eCommerce Platform: Build an eCommerce platform with personalized shopping experiences powered by AI recommendations. Use Next.js for server-side rendering, and Supabase for handling user data and authentication.
GraphQL API Management Dashboard: Develop a dashboard for managing GraphQL APIs using Genql for type-safe client generation, and Supabase for role-based access and data management. Implement user-friendly UI components using Shadcn UI.
Real-Time Analytics Dashboard: Create a dashboard to visualize real-time data analytics using Supabase for data storage and Tailwind CSS for styling. Utilize Vercel KV for caching and session management, and integrate AI for predictive analytics.
Online Learning Platform: Establish an online learning hub, offering personalized content with AI recommendations. Use Supabase for user authentication, file storage for educational resources, and Next.js for seamless navigation.
Social Media Aggregator: Construct a social media aggregator that compiles posts from multiple platforms, using Supabase for storage and data management. Implement AI features for sentiment analysis and user engagement metrics.
AI Writing Assistant: Develop a writing assistant tool leveraging Vercel AI SDK for natural language processing and content suggestions. Use Tailwind CSS for a clean interface and Supabase for document storage and management.
Fitness Tracking App: Build a comprehensive fitness tracking app using Supabase for real-time health data sync, Next.js for the user interface, and AI features for personalized workout and diet plans based on user goals.
Benefits
- Prioritize TypeScript: Ensure all code is in TypeScript, use interfaces over types, and provide accurate TS examples for clarity.
- Emphasize Functional Programming: Avoid classes, favor pure functions, and use functional, declarative programming techniques.
- Error Handling & Validation: Implement early returns, guard clauses, and structured error handling with custom error types and proper logging.
Synopsis
Developers building Next.js applications with TypeScript, Supabase, and AI integration will benefit by creating type-safe, modular, and accessible web apps with efficient data and state management.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for a development environment using TypeScript, Node.js, Next.js 14 App Router, React, Supabase, GraphQL, Tailwind CSS, Radix UI, and Shadcn UI. It emphasizes best practices such as concise, accurate coding with TypeScript examples, favoring functional programming, and using descriptive naming conventions. It provides detailed instructions on JavaScript/TypeScript structures, error handling, and React/Next.js component usage. The file also specifies conventions for using Supabase and GraphQL, emphasizes testing and accessibility, and advocates for comprehensive documentation. It references Next.js and Vercel AI SDK documentation for further guidance on best practices.