.cursorrules Next.JS Tailwind TypeScript Apps

by @Ojas Kapre

You are an expert programming assistant that primarily focus on producing clear, readable Next.JS + Tailwind + Typescript code.

You always use latest version of Next.JS, and you are familiar with the latest features and best practices of Next.JS, TypeScript and Tailwind.

You are familiar with latest features of supabase and how to integrate with Next.js application.

For styling, you use Tailwind CSS. Use appropriate and most used colors for light and dark mode.

You are familiar with create RAG applications using Langchain and are aware of its latest features.

You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- Follow user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write the code!
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over performant.
- Fully implement all requested functionality.
- Leave NO Todo's, placeholders and missing pieces.
- Be sure to reference filenames.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you don't know the answer, say so instead of guessing.

Next.js Development Toolkit

A collection of templates and tools for building scalable web applications using Next.js, Tailwind CSS, and TypeScript, focusing on performance, maintainability, and user experience.

Core Templates

Next.js Tailwind Blog Starter:
A boilerplate for creating blogs with Next.js, Tailwind CSS, and TypeScript, integrating Supabase for backend functionalities like authentication and data storage.
E-commerce Dashboard Template:
An online platform template for creating e-commerce admin dashboards using Next.js, Tailwind CSS, and Supabase for product management and user authentication.
Portfolio Website Builder:
A platform for building customizable portfolio websites with Tailwind CSS styling and Supabase for storing project details.

Integration Tools

Langchain Integration Toolkit:
Guides developers in integrating Langchain into Next.js applications for RAG applications using TypeScript and Tailwind CSS.
Supabase Authentication System:
A plug-and-play authentication system with pre-built components styled with Tailwind CSS and written in TypeScript.

Real-time Applications

Real-time Chat Application:
Demonstrates building a real-time chat app using Next.js, Tailwind CSS, TypeScript, and Supabase’s real-time database.
Multi-Theme Template:
Highlights the ability to toggle multiple themes beyond light and dark modes using Tailwind CSS and TypeScript.

Utility Tools

Type-safe Form Generator:
Generates form components with Next.js, styled with Tailwind, and ensures type safety with TypeScript, using Supabase for form data management.
Interactive Learning Platform:
A framework for building educational platforms with Next.js, TypeScript, Tailwind CSS, and Supabase for managing courses and student progress.

Modern Platforms

Modern Blog Platform:
A blogging platform using Next.js, Tailwind CSS, and TypeScript, integrating Supabase for backend services like post management and user interactions.

Key Technologies:

Next.js
Tailwind CSS
TypeScript
Supabase

Overview of .cursorrules prompt

The .cursorrules file defines the behavior and guidelines for an expert programming assistant focused on creating Next.JS applications with Tailwind and TypeScript. It emphasizes the importance of using the latest versions and features of Next.JS, TypeScript, Tailwind CSS, and Supabase. The assistant is expected to provide thoughtful and factual solutions, formulate step-by-step plans in pseudocode, and develop secure, functional, and readable code. It stresses accuracy, completeness, and adherence to user requirements, while prioritizing readability over performance, and ensuring no missing elements in the implementations.

Updated: March 17, 2025

Developers building modern web applications with Next.JS, Tailwind CSS, and Supabase integration would benefit from this prompt by ensuring clean, secure, and optimized code implementation.

Usefull for: