Skip to main content
rule

typescript-react-nextui-supabase-cursorrules-promp — Cursor rule

This rule gives an agent context for a TypeScript app built with React, NextUI, and Supabase. Use it when working on the UI, user dashboard, or authentication flows.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/typescript-react-nextui-supabase-cursorrules-promp.mdc
Open on GitHub

What typescript-react-nextui-supabase-cursorrules-promp does

The rule describes a web app with a landing page, sign-in and sign-up flows, and a dashboard for logged-in users. Its stack includes React, TypeScript, NextUI, and Supabase. Next.js is inferred from the navigation API and server utilities mentioned in the project overview.

It outlines email-and-password login, GitHub OAuth, sign-up, logout, and email confirmation, with file paths for the related logic. It also covers responsive navigation, a collapsible dashboard sidebar, and a generic error component. The rule matches **/*, but alwaysApply is set to false, so it does not automatically attach to every request.

What it helps with

  • give an agent context about the app's stack and structure
  • add sign-in with email and password or GitHub OAuth
  • locate the email confirmation and logout flows
  • build a dashboard with sidebar navigation

Example prompts for the agent

  • Show me where GitHub sign-in and email confirmation are handled in this project.
  • Add a sign-up screen using the project's React, TypeScript, and NextUI setup.
  • Explain how the logged-in user's dashboard and navigation are structured.

How to install typescript-react-nextui-supabase-cursorrules-promp

Manually: put the files in place

.cursor/rules/typescript-react-nextui-supabase-cursorrules-promp.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about typescript-react-nextui-supabase-cursorrules-promp

How do I install typescript-react-nextui-supabase-cursorrules-promp in Cursor?

Add the rule file at .cursor/rules/typescript-react-nextui-supabase-cursorrules-promp.mdc.

What does typescript-react-nextui-supabase-cursorrules-promp do?

It gives the agent an overview of the app's stack, UI, Supabase integration, authentication flows, and logged-in dashboard.

Does Cursor apply this rule to every request?

No. Its alwaysApply setting is false, even though its file pattern is **/*.

Source text

typescript-react-nextui-supabase-cursorrules-promp.mdc · CC0-1.0
---
description: "Cursor rules for TypeScript development with React, NextUI, and Supabase integration."
globs: **/*
alwaysApply: false
---
# Codebase Overview

This codebase appears to be part of a web application built using TypeScript, React, and various NextUI components. It is structured to support a landing page, authentication flows, and a dashboard for logged-in users. The application integrates with Supabase for backend services, including authentication and database interactions.

# Stack and Key Technologies

Frontend Framework: React
TypeScript: Used for type-safe code across the frontend.
NextUI: A React UI library used for building the UI components like buttons, modals, inputs, etc.
Supabase: An open-source Firebase alternative used for backend services like authentication, database, and storage.
Next.js: Likely used as the React framework, indicated by the usage of next/navigation and server utilities.
Iconify: For icons across the application.

Purpose and Functionality

## Authentication

The application includes a comprehensive authentication flow:
Login: Users can log in using email/password or GitHub OAuth. The login logic is handled in frontend/app/(landing-page)/login/action.ts.
Signup: New users can sign up with an email and password. The signup logic is also in frontend/app/(landing-page)/login/action.ts.
Logout: Users can log out, with the logic located in frontend/app/(landing-page)/logout/action.ts.
Email Confirmation: The application handles email confirmation through a callback route in frontend/app/auth/callback/confirm/route.ts.

## User Interface

Landing Page: Contains components like SubmitButton, LoginPage, and LogoutModal to facilitate user interactions.
Dashboard: For logged-in users, showing personalized content and a sidebar for navigation within the dashboard.
Error Handling: A generic error component is used to display errors and provide a retry mechanism.

## Navigation and Layout

Navbar: A responsive navbar for the landing page and possibly other public pages.
Sidebar: A collapsible sidebar for the dashboard, indicating a more complex, multi-page application structure for authenticated users.

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

unity-cursor-ai-c-cursorrules-prompt-file A Cursor rule that briefs the assistant on a Unity game project in C#: modular code, responsive mechanics, real-time performance. ★ 41,024repo stars typescript A Cursor rule that pins down how the agent writes TypeScript: types, naming, error handling. Useful when several people touch the same codebase. ★ 41,024repo stars typescript-vuejs-cursorrules-prompt-file A Cursor rule that tells the agent how to write TypeScript inside Vue.js projects. Useful when you want edits across components to follow the same conventions. ★ 41,024repo stars typescript-vite-tailwind-cursorrules-prompt-file A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind. Useful when you want the agent's output to stay predictable. ★ 41,024repo stars typescript-react-nextjs-cloudflare-cursorrules-pro A Cursor rule that points the agent at TypeScript, Next.js App Router, React and Cloudflare tooling. Useful when your project already runs on that stack. ★ 41,024repo stars typescript-nodejs-react-vite-cursorrules-prompt-fi This rule sets TypeScript conventions for Node.js, React, and Vite projects, with guidance for TanStack Query, TanStack Router, and Tailwind. Use it to keep agent edits aligned with your codebase’s existing style. ★ 41,024repo stars typescript-nodejs-nextjs-react-ui-css-cursorrules- A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,024repo stars typescript-nextjs-supabase-cursorrules-prompt-file A Cursor rule that keeps TypeScript work on Next.js App Router and Supabase consistent: server components first, Shadcn UI, Tailwind. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor