Structured React Tailwind Clerk .cursorrules prompt file
About .cursorrules prompt file
What you can build
Budgeting and Personal Finance App: A tool that helps users manage their finances by tracking income, taxes, and expenses. It utilizes Supabase for backend management and Clerk for user authentication, providing a seamless and secure experience.
SaaS Dashboard Generator: A platform that allows users to create personalized dashboards for tracking various metrics such as income, taxes, and budgeting. The app uses reusable components and custom hooks for a consistent and efficient user interface.
Authentication Service Platform: A service that offers customizable sign-in and sign-up pages, using Clerk authentication. It simplifies the integration of authentication into web apps with easy-to-use API routes.
Landing Page Builder: A tool for creating dynamic landing pages with customization options for call-to-action buttons, feature highlights, and testimonials, leveraging Tailwind CSS for design and Shadcn UI components for consistency.
Custom Hook Library: An application that provides a collection of reusable React hooks for developers, helping manage logic and improve the structure of their React applications, particularly in handling data fetching, user sessions, and component state.
Income and Tax Management Web App: A specialized web application for professionals needing to manage their income and taxes efficiently, utilizing a dashboard created with Tailwind CSS and Shadcn UI for an elegant and responsive design.
Developer's Tailwind CSS Checker: A service that analyzes your CSS code to ensure compliance with Tailwind CSS best practices and discourages the use of inline styles in React components, simplifying the design process.
Supabase Admin Panel: A web interface for managing Supabase databases, allowing users to perform CRUD operations, configure Restful APIs, and monitor database queries with ease while ensuring a secure connection via Clerk authentication.
Responsive Component Library: A collection of responsive, reusable components built with Tailwind CSS and Shadcn UI, ready to be integrated into any React application, ensuring a consistent and modern design.
Secure API Route Generator: A utility that helps developers create API routes quickly, adhering to naming conventions and structure requirements, while ensuring the use of Clerk authentication for secure user interactions and data handling.
Benefits
- Hierarchical folder structure with specified depth ensures organized application architecture.
- Enforced styling and component usage rules drive consistent UI development using Tailwind and Shadcn.
- Mandatory utilization of Supabase and Clerk for backend logic and authentication standardizes integration practices.
Synopsis
Developers building a React project with authentication, user dashboards, and enhanced design need these standards for structured component reuse and consistent styling with Tailwind and Shadcn.
Overview of .cursorrules prompt
The .cursorrules file defines a structured framework for organizing and managing a web application project. It specifies necessary directories such as "src/app" for the main application, "src/components" for reusable components, and "src/lib" for utility functions. Each directory has a description, whether it's required, and its depth level. It also outlines necessary project files, like routes for user authentication and dashboard pages. Furthermore, the file enforces specific coding rules, such as using Tailwind CSS, naming conventions for API routes, banning inline styles, and employing Supabase and Clerk for backend logic and authentication, respectively.