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.
.cursor/rules/typescript-react-nextui-supabase-cursorrules-promp.mdcWhat 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.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/typescript-react-nextui-supabase-cursorrules-promp.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/typescript-react-nextui-supabase-cursorrules-promp.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/typescript-react-nextui-supabase-cursorrules-promp.mdManually: put the files in place
.clinerules/typescript-react-nextui-supabase-cursorrules-promp.mdStep 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