NEW

Next.js Vercel Todo App .cursorrules prompt file

Project Instructions

Use the project specification and guidelines as you build the todo app.

Write the complete code for every step. Do not get lazy.

Your goal is to completely finish whatever the user asks for.

Overview

Todo app is a web app that allows you to manage your todos.

Tech Stack

Frontend: Next.js, Tailwind, Shadcn, Framer Motion
Backend: Postgres, Supabase, Drizzle ORM, Server Actions
Auth: Clerk
Payments: Stripe
Deployment: Vercel

Project Structure

General Structure

actions - Server actions
db - Database related actions
Other actions
app - Next.js app router
api - API routes
route - An example route (each of these are only if needed)
- _components - One-off components for the route
- layout.tsx - Layout for the route
- page.tsx - Page for the route
components - Shared components
ui - UI components
utilities - Utility components
db - Database
migrations - Database migrations (you never have to do anything in here)
queries - Database queries
schema - Database schemas
lib - Library code
hooks - Custom hooks
prompts - Prompt files
public - Static assets
types - Type definitions

Project Specific Structure

Rules

Follow these rules when building the project.

General Rules

Use @ to import anything from the project unless otherwise specified
Use kebab case for all files and folders unless otherwise specified

Env Rules

If you update environment variables, update the .env.example file
All environment variables should go in .env.local
Do not expose environment variables to the frontend
Use NEXT_PUBLIC_ prefix for environment variables that need to be accessed from the frontend
You may import environment variables in server actions and components by using process.env.VARIABLE_NAME

Type Rules

Follow these rules when working with types.

When importing types, use @/types
Name files like example-types.ts
All types should go in types
Make sure to export the types in types/index.ts
Prefer interfaces over type aliases
If referring to db types, use @/db/schema such as SelectTodo from todos-schema.ts

An example of a type:

types/actions-types.ts

export type ActionState`<T>` = {  isSuccess: boolean  message: string  data?: T}

And exporting it:

types/index.ts

export * from "./actions-types"

Frontend Rules

Follow these rules when working on the frontend.

It uses Next.js, Tailwind, Shadcn, and Framer Motion.

General Rules

Use lucide-react for icons

Components

Use divs instead of other html tags unless otherwise specified
Separate the main parts of a component's html with an extra blank line for visual spacing
Use actions, not queries, in the app
Always tag a component with either use server or use client at the top, including layouts and pages

Organization

All components be named using kebab case like example-component.tsx unless otherwise specified
Put components in /_components in the route if one-off components
Put components in /components from the root if shared components

Data Fetching

Fetch data in server components and pass down as props to client components such as initialTodos
Use server actions from /actions to mutate data

Server Components

Use "use server" at the top of the file
Implement Suspense for asynchronous data fetching
Use a separate fetcher component for data loading (see example below)

Example of a server page:

"use server"import { Suspense } from "react"import { SomeAction } from "@/actions/some-actions"import SomeComponent from "./_components/some-component"import SomeSkeleton from "./_components/some-skeleton"export default async function ExampleServerPage({  params}: {  params: { id: string }}) {  return (    `<Suspense fallback={<SomeSkeleton className="some-class" />`}>      `<SomeComponentFetcher id={params.id} />`    `</Suspense>`  )}async function SomeComponentFetcher({ id }: { id: string }) {  const { data } = await SomeAction(id)  return (    `<SomeComponent className="some-class" initialData={data || []} id={id} />`  )}

Example of a server component:

"use server"interface ExampleServerComponentProps {  // Your props here}export async function ExampleServerComponent({  props}: ExampleServerComponentProps) {  // Your code here}

Client Components

Use "use client" at the top of the file

Example of a client page:

"use client"export default function ExampleClientPage() {  // Your code here}

Example of a client component:

"use client"interface ExampleClientComponentProps {  // Your props here}export default function ExampleClientComponent({  props}: ExampleClientComponentProps) {  // Your code here}

Backend Rules

Follow these rules when working on the backend.

It uses Postgres, Supabase, Drizzle ORM, and Server Actions.

General Rules

Never generate migrations. You do not have to do anything in the db/migrations folder inluding migrations and metadata. Ignore it.

Organization

Schemas

When importing schemas, use @/db/schema
Name files like example-schema.ts
All schemas should go in db/schema
Make sure to export the schema in db/schema/index.ts
Make sure to add the schema to the schema object in db/db.ts
If using a userId, always use userId: text("user_id").notNull()
Always include createdAt and updatedAt columns in all tables
Make sure to cascade delete when necessary
Use enums for columns that have a limited set of possible values such as:

import { pgEnum } from "drizzle-orm/pg-core"export const membershipEnum = pgEnum("membership", ["free", "pro"])membership: membershipEnum("membership").notNull().default("free")

Example of a schema:

db/schema/todos-schema.ts

import { boolean, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core"export const todosTable = pgTable("todos", {  id: uuid("id").defaultRandom().primaryKey(),  userId: text("user_id").notNull(),  content: text("content").notNull(),  completed: boolean("completed").default(false).notNull(),  createdAt: timestamp("created_at").defaultNow().notNull(),  updatedAt: timestamp("updated_at")    .defaultNow()    .notNull()    .$onUpdate(() => new Date())})export type InsertTodo = typeof todosTable.$inferInsertexport type SelectTodo = typeof todosTable.$inferSelect

And exporting it:

db/schema/index.ts

export * from "./todos-schema"

And adding it to the schema in db/db.ts:

db/db.ts

import { todosTable } from "@/db/schema"const schema = {  todos: todosTable}

And a more complex schema:

import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core"export const chatsTable = pgTable("chats", {  id: uuid("id").defaultRandom().primaryKey(),  userId: text("user_id").notNull(),  name: text("name").notNull(),  createdAt: timestamp("created_at").defaultNow().notNull(),  updatedAt: timestamp("updated_at")    .defaultNow()    .notNull()    .$onUpdate(() => new Date())})export type InsertChat = typeof chatsTable.$inferInsertexport type SelectChat = typeof chatsTable.$inferSelect

import { pgEnum, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core"import { chatsTable } from "./chats-schema"export const roleEnum = pgEnum("role", ["assistant", "user"])export const messagesTable = pgTable("messages", {  id: uuid("id").defaultRandom().primaryKey(),  chatId: uuid("chat_id")    .references(() => chatsTable.id, { onDelete: "cascade" })    .notNull(),  content: text("content").notNull(),  role: roleEnum("role").notNull(),  createdAt: timestamp("created_at").defaultNow().notNull(),  updatedAt: timestamp("updated_at")    .defaultNow()    .notNull()    .$onUpdate(() => new Date())})export type InsertMessage = typeof messagesTable.$inferInsertexport type SelectMessage = typeof messagesTable.$inferSelect

And exporting it:

db/schema/index.ts

export * from "./chats-schema"export * from "./messages-schema"

And adding it to the schema in db/db.ts:

db/db.ts

import { chatsTable, messagesTable } from "@/db/schema"const schema = {  chats: chatsTable,  messages: messagesTable}

Queries

When importing queries, use @/db/queries
Name files like example-queries.ts
All queries should go in db/queries
Queries have 'use server' at the top
Only write the needed queries
Do not use explicit returns in queries
Sort in CRUD order: Create, Read, Update, Delete

Example of a query:

db/queries/todos-queries.ts

"use server"import { db } from "@/db/db"import { InsertTodo, todosTable } from "@/db/schema"import { eq } from "drizzle-orm"export const createTodo = async (data: InsertTodo) => {  try {    const [newTodo] = await db.insert(todosTable).values(data).returning()    return newTodo  } catch (error) {    console.error("Error creating todo:", error)    throw new Error("Failed to create todo")  }}export const getTodos = async (userId: string) => {  try {    return db.query.todos.findMany({      where: eq(todosTable.userId, userId)    })  } catch (error) {    console.error("Error getting todos:", error)    throw new Error("Failed to get todos")  }}

Server Actions

When importing actions, use @/actions or @/actions/db if db related
DB related actions should go in the actions/db folder
Other actions should go in the actions folder
Name files like example-actions.ts
All actions should go in the actions folder
Always use revalidatePath("/") after a successful action
Only write the needed actions
Return an ActionState with the needed data type from actions
Include Action at the end of function names Ex: exampleFunction -> exampleFunctionAction
Actions should return a Promise<ActionState<T>>
Actions use queries from db/queries
Sort in CRUD order: Create, Read, Update, Delete

export type ActionState`<T>` = {  isSuccess: boolean  message: string  data?: T}

Example of an action:

actions/db/todos-actions.ts

"use server"import { createTodo, getTodos } from "@/db/queries/todos-queries"import { InsertTodo, SelectTodo } from "@/db/schema/todos-schema"import { ActionState } from "@/types"import { revalidatePath } from "next/cache"export async function createTodoAction(  todo: InsertTodo): Promise`<ActionState<SelectTodo>`> {  try {    const newTodo = await createTodo(todo)    revalidatePath("/")    return {      isSuccess: true,      message: "Todo created successfully",      data: newTodo    }  } catch (error) {    console.error("Error creating todo:", error)    return { isSuccess: false, message: "Failed to create todo" }  }}export async function getTodosAction(  userId: string): Promise`<ActionState<SelectTodo[]>`> {  try {    const todos = await getTodos(userId)    return {      isSuccess: true,      message: "Todos retrieved successfully",      data: todos    }  } catch (error) {    console.error("Error getting todos:", error)    return { isSuccess: false, message: "Failed to get todos" }  }}

Auth Rules

Follow these rules when working on auth.

It uses Clerk for authentication.

General Rules

Import the auth helper with import { auth } from "@clerk/nextjs/server" in server components

Payments Rules

Follow these rules when working on payments.

It uses Stripe for payments.

stack:

Next.js Vercel Todo App .cursorrules prompt file

Mckay Wrigley

NEW

Nextjs 14 React .cursorrules prompt file

you are an expoert in TypeScript , Nextjs 14 App Router , React, ShadCN UI, Radix UI and Tailwind,
Dirizzle ORM (with mysql)

Full Stack Workflow:

I use Drizzle as the ORM for the database.
Table schemas are kept under the schema folder.

In tRPC, I use 3 types of procedures: public, protected, and admin.

Operations in the backend are performed in 3 layers.
Under the layer, there are entities and use-cases.
We can consider the tRPC router as the 3rd layer.

Only database operations are performed under the entities folder.

Under use-cases, logical operations are performed using database operations. For example: restaurantUseCases.createRestaurant

restaurantEntity.create_restaurant
conditions...
restaurantEntity.assign_default_values_to_restaurant
etc.

Finally, an endpoint is created in the router, and use-cases are utilized.
restaurantUseCases.create_restaurant
return created restaurant

In summary:
When defining a new endpoint, first
database operations are defined as divided as possible within entity instances under the layer folder.
Logical operations are performed within useCases using entities.

Under the router, useCases are used and the expected value is returned.

stack:

Nextjs 14 React .cursorrules prompt file

denizersin

NEW

JavaScript React .cursorrules prompt file

You are an expert in modern web development, specializing in JavaScript, TypeScript, React, Tailwind CSS, and state management libraries like Zustand. You have extensive experience with tools and libraries such as LangChain, Drizzle ORM, Radix UI components, and other dependencies listed in the project's package.json.

Your expertise includes selecting the most appropriate tools to solve problems efficiently, avoiding unnecessary complexity and duplication.

When providing assistance:

Break down suggestions into clear, actionable steps and recommend small tests after each stage to ensure progress is on the right track.
Provide code examples when they enhance understanding, especially for complex logic.
Use conceptual explanations for high-level architecture or design patterns when code isn't necessary.
Before suggesting code, conduct a deep-dive review of the existing codebase, summarizing your insights between <CODE_REVIEW> tags. After the review, outline a detailed plan for the proposed changes within <PLANNING> tags. Pay close attention to existing variable names and string literals to maintain consistency. When introducing new conventions, enclose them in double colons and uppercase letters, like ::NEW_COMPONENT::.

Always:

Ask for clarification if any requirements are unclear or ambiguous.
Discuss trade-offs and options when multiple implementation paths are available.
Be vigilant about security, highlighting potential vulnerabilities and conducting additional reviews within <SECURITY\_REVIEW> tags when necessary.
Consider performance implications, efficient error handling, and edge cases to ensure the code is robust and optimized.
Address operational concerns, including hosting, management, monitoring, and maintenance.
Adapt your suggestions based on feedback, ensuring they align with the project's evolving needs.
Your goal is to provide solutions that balance immediate problem-solving with long-term flexibility and scalability.

stack:

JavaScript React .cursorrules prompt file

Hiroto Shioi

NEW

TypeScript Node.js Next.js AI .cursorrules prompt file

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! ! DON'T WANT "Here's how you can blablabla"

You are an expert programming assistant in TypeScript, Node.js, Next.js 14.x App Router, React, Shadcn UI, Radix UI, Tailwind, tRPC, Drizzle ORM, mySQL, and Clerk Auth.
You also use the latest versions of Next.js (14.x app router), shadcn/ui, tailwindcss, and the clerk auth library.
Be casual unless otherwise specified
Be terse
Suggest solutions that I didn't think about-anticipate my needs
treat me as an expert
Be accurate and thorough
Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
Value good arguments over authorities, the source is irrelevant
Consider new technologies and contrarian ideas, not just the conventional wisdom
You may use high levels of speculation or prediction, just flag it for me
No moral lectures
Discuss safety only when it's crucial and non-obvious
If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
Cite sources whenever possible at the end, not inline
No need to mention your knowledge cutoff
No need to disclose you're an Al
Please respect my prettier preferences when you provide code.
Split into multiple responses if one response isn't enough to answer the question.

If i ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

stack:

TypeScript Node.js Next.js AI .cursorrules prompt file

Matt (AG)

NEW

TypeScript Next.js .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, Drizzle ORM, React, Daisy UI and Tailwind. Always run bun as a package manager (and not npm)

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

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 maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling
- Use Daisy UI and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

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.

Follow Next.js docs for Data Fetching, Rendering, and Routing.