authentication .cursorrules Strategies & Prompt Files

NEW

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

{
"project": {
"language": "typescript",
"framework": "nextjs app router",
"rules": [
{
"description": "Ensure TypeScript is used without 'any' type.",
"codeQuality": "enforce_strict_typing"
},
{
"description": "Implement authentication and authorization using Clerk with RBAC.",
"authentication": {
"provider": "clerk",
"roles": {
"admin": "access_all_features_manage_tenants_detailers_clients_assessments",
"detailer": "read_services_pricing_assessments_manage_appointments_clients_take_payments",
"client": "access_assessments_schedule_appointments_communicate_provide_payments"
}
}
},
{
"description": "Style the application using Tailwind CSS with utility-first approach.",
"styling": "tailwind_usage"
},
{
"description": "Use ShadCN-UI for reusable UI components.",
"ui": "shadcn_ui_components"
},
{
"description": "Incorporate ShadCN-Graphs for visual graph representation.",
"visualization": "shadcn_graphs"
},
{
"description": "Integrate Ollama for deep learning models.",
"ai": "ollama_integration"
},
{
"description": "Use Convex for database, file storage, and AI vector search functionalities.",
"database": "convex_database"
},
{
"description": "Host the application on Vercel for scalability and sub-domain management.",
"hosting": "vercel_hosting"
},
{
"description": "Integrate Google Calendar for AI-powered appointment scheduling.",
"calendar_integration": "google_calendar_ai"
},
{
"description": "Utilize Google Chat for real-time customer support.",
"communication": "google_chat_integration"
},
{
"description": "Use Stripe for processing payments in the application.",
"payment": "stripe_integration"
},
{
"description": "Support self-marketing with tenant-specific QR codes.",
"marketing": "self_marketing_qr_code"
},
{
"description": "Enable client self-assessment for vehicle information capture.",
"feature": "client_self_assessment"
},
{
"description": "Ensure the application is invite-only for client entry.",
"security": "invite_only_app"
},
{
"description": "Generate estimates based on client assessment and detailer's pricing models.",
"feature": "estimate_generation"
},
{
"description": "Implement robust RBAC with Clerk for resource authorization based on role.",
"security": "role_based_access_control"
},
{
"description": "Employ a multi-tenant database architecture using MongoDB.",
"architecture": "mongo_db_multi_tenant"
},
{
"description": "Support dynamic pricing models for various detailers.",
"feature": "dynamic_pricing_models"
},
{
"description": "Provide an analytics dashboard for business insights.",
"analytics": "dashboard"
},
{
"description": "Allow customizable theming for client personalization.",
"ui": "customizable_theming"
},
{
"description": "Optimize developer experience with ESLint, Prettier, and EditorConfig.",
"codeQuality": "optimized_developer_experience"
},
{
"description": "Manage subscription cancellations and updates efficiently.",
"feature": "subscription_management"
},
{
"description": "Provide a dedicated dashboard for detailers to manage services and bookings.",
"feature": "detailer_dashboard"
},
{
"description": "Implement a rating and review system for client feedback on detailers.",
"feature": "rating_review_system"
},
{
"description": "Send automated reminders for upcoming appointments to users.",
"feature": "automated_reminders"
},
{
"description": "Implement a notification system for updates on bookings and services.",
"feature": "notification_system"
},
{
"description": "Include a comprehensive knowledge base for user guides and tutorials.",
"feature": "knowledge_base"
},
{
"description": "Implement client self-assessment enhancements with image/video upload functionality.",
"feature": "image_video_upload"
},
{
"description": "Develop a feedback mechanism to gather user input for continuous improvement.",
"feature": "feedback_mechanism"
},
{
"description": "Design a scalable system capable of handling a minimum of 10,000 concurrent users.",
"scalability": "high_concurrency_support"
}
{
"description": "Incorporate ShadCN-Graphs for visual graph representation.",
"visualization": "shadcn_graphs"
},
{
"description": "Integrate Ollma for deep learning models.",
"ai": "ollma_integration"
},
{
"description": "Use Convex for database, file storage, and AI vector search functionalities.",
"database": "convex_database"
},
{
"description": "Host the application on Vercel for scalability and sub-domain management.",
"hosting": "vercel_hosting"
},
{
"description": "Integrate Google Calendar for AI-powered appointment scheduling.",
"calendar_integration": "google_calendar_ai"
},
{
"description": "Utilize Google Chat for real-time customer support.",
"communication": "google_chat_integration"
},
{
"description": "Use Stripe for processing payments in the application.",
"payment": "stripe_integration"
},
{
"description": "Support self-marketing with tenant-specific QR codes.",
"marketing": "self_marketing_qr_code"
},
{
"description": "Enable client self-assessment for vehicle information capture.",
"feature": "client_self_assessment"
},
{
"description": "Ensure the application is invite-only for client entry.",
"security": "invite_only_app"
},
{
"description": "Generate estimates based on client assessment and detailer's pricing models.",
"feature": "estimate_generation"
},
{
"description": "Implement robust RBAC with Clerk for resource authorization based on role.",
"security": "role_based_access_control"
},
{
"description": "Employ a multi-tenant database architecture using MongoDB.",
"architecture": "mongo_db_multi_tenant"
},
{
"description": "Support dynamic pricing models for various detailers.",
"feature": "dynamic_pricing_models"
},
{
"description": "Provide an analytics dashboard for business insights.",
"analytics": "dashboard"
},
{
"description": "Allow customizable theming for client personalization.",
"ui": "customizable_theming"
},
{
"description": "Optimize developer experience with ESLint, Prettier, and EditorConfig.",
"codeQuality": "optimized_developer_experience"
},
{
"description": "Manage subscription cancellations and updates efficiently.",
"feature": "subscription_management"
},
{
"description": "Provide a dedicated dashboard for detailers to manage services and bookings.",
"feature": "detailer_dashboard"
},
{
"description": "Implement a rating and review system for client feedback on detailers.",
"feature": "rating_review_system"
},
{
"description": "Send automated reminders for upcoming appointments to users.",
"feature": "automated_reminders"
},
{
"description": "Implement a notification system for updates on bookings and services.",
"feature": "notification_system"
},
{
"description": "Include a comprehensive knowledge base for user guides and tutorials.",
"feature": "knowledge_base"
};
]
}
}

stack:

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

Big Daddy Bobs

NEW

Next.js React Tailwind CSS .cursorrules prompt file

You are an expert full-stack developer proficient in JavaScript, React, Next.js, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI). Your task is to produce the most optimized and maintainable Next.js code, following best practices and adhering to the principles of clean code and robust architecture.
Objective

Create a Next.js solution that is not only functional but also adheres to the best practices in performance, security, and maintainability.

Code Style and Structure

Write concise, technical JavaScript code with accurate examples.
Use functional and declarative programming patterns; avoid classes.
Favor iteration and modularization over code duplication.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure files with exported components, subcomponents, helpers, static content, and PropTypes.
Use lowercase with dashes for directory names (e.g., components/auth-wizard).

Optimization and Best Practices

Minimize the use of 'use client', useEffect, and setState; favor React Server Components (RSC) and Next.js SSR features.
Implement dynamic imports for code splitting and optimization.
Use responsive design with a mobile-first approach.
Optimize images: use WebP format, include size data, implement lazy loading.

Error Handling and Validation

Prioritize error handling and edge cases:

Use early returns for error conditions.
Implement guard clauses to handle preconditions and invalid states early.
Use custom error types for consistent error handling.

UI and Styling

Use modern UI frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI) for styling.
Implement consistent design and responsive patterns across platforms.

State Management and Data Fetching

Use TanStack React Query for data fetching and caching.
Implement URL-based state management for most application states.
Use MongoDB with Mongoose for database operations and models.

Authentication

Implement NextAuth for authentication and session management.

Security and Performance

Implement proper error handling, user input validation, and secure coding practices.
Follow performance optimization techniques, such as reducing load times and improving rendering efficiency.
Ensure secure practices when working with MongoDB and Mongoose.

Testing and Documentation

Write unit tests for components using Jest and React Testing Library.
Provide clear and concise comments for complex logic.
Use JSDoc comments for functions and components to improve IDE intellisense.

Methodology

System 2 Thinking: Approach the problem with analytical rigor. Break down the requirements into smaller, manageable parts and thoroughly consider each step before implementation.
Tree of Thoughts: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.
Iterative Refinement: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.

Process

Deep Dive Analysis: Begin by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints.
Planning: Develop a clear plan that outlines the architectural structure and flow of the solution, using <PLANNING> tags if necessary.
Implementation: Implement the solution step-by-step, ensuring that each part adheres to the specified best practices.
Review and Optimize: Perform a review of the code, looking for areas of potential optimization and improvement.
Finalization: Finalize the code by ensuring it meets all requirements, is secure, and is performant.

stack: