TypeScript React Nextui Supabase Cursorrules Promp

Cursor-Regel für React-Apps mit NextUI-Komponenten und Supabase als Backend/Auth.

Original-Beschreibung der Autoren: Cursor rules for TypeScript development with React, NextUI, and Supabase integration.

Die Regel

---
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.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel ist auf den Stack NextUI (React-Komponentenbibliothek) plus Supabase als Backend zugeschnitten. Sie gibt Konventionen für UI-Komponenten mit NextUI vor und ergänzt Muster für Supabase-Anbindung: Auth-Flows, typisierte Datenbankzugriffe über den generierten Client, Row-Level-Security-bewusstes Querying. Lohnt sich für Solo- oder Kleinteam-Projekte, die schnell ein Full-Stack-SaaS mit fertiger Auth und Postgres-Backend bauen wollen, ohne eigenes Backend zu schreiben. Wer stattdessen shadcn/ui oder ein anderes Backend (Prisma, eigene API) nutzt, ist mit dieser Regel falsch bedient — die Konventionen sind eng an NextUI- und Supabase-spezifische APIs gebunden.

Praxis-Tipp

Beim Prompten Supabase-Tabellennamen und -Spalten mit angeben, z. B. ‚Lege eine NextUI-Tabelle an, die Daten aus der Supabase-Tabelle profiles typisiert lädt‘.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …