About .cursorrules prompt file
What you can build
Optimized Ecommerce Platform: Develop an ecommerce platform using Next.js and TypeScript, incorporating a mobile-first landing page and desktop-first user portal. Optimize with React Server Components for performance and utilize Tailwind CSS for responsive design.
Custom Blogging Website: Create a blogging platform where writers can compose and publish articles. Use Radix for UI components, Shadcn UI for styling, and Next.js for server-side rendering to enhance SEO and load performance.
Portfolio Builder Application: Design a tool for users to create stylish personal portfolios. Utilize TypeScript interfaces for form and component management with Tailwind CSS to ensure responsive design. Use
nuqsfor real-time URL parameter customization.Event Management System: Build a responsive web app for event organizers to manage ticket sales, venue logistics, and participant data. Implement performing dynamic loading strategies for non-critical components to ensure smooth user experiences.
Online Learning Platform: Design a platform for virtual learning utilizing TypeScript and Next.js. Prioritize the use of Shadcn UI for consistent styling and responsive design, leveraging React Server Components to handle video streaming efficiently.
Dynamic Dashboard for Analytics: Develop a customizable analytics dashboard application that uses TypeScript interfaces to define data components. Incorporate lazy loading for images and data-heavy components, optimizing rendering with server-side logic.
Real Estate Listing Service: Construct a property listing service with a focus on responsive design and SEO optimization. Use Tailwind CSS for scalable UI design and implement dynamic loading to manage extensive media content efficiently.
Customizable Social Media Platform: Create a social media web app that allows users to create and organize different types of content. Ensure fast performance by optimizing Web Vitals and using dynamic imports for non-essential features.
Interactive Recipe Sharing Site: Design a community-driven recipe sharing site with real-time search capabilities using
nuqs. Focus on image optimization and lazy loading to improve the user experience when browsing content-heavy pages.Travel Booking Portal: Develop a travel booking portal emphasizing desktop-first usability for agencies and mobile-first customer interaction. Integrate third-party APIs with minimal client-side rendering to offer seamless booking services.
Benefits
- Emphasizes technical TypeScript with functional programming, preferring iteration and modularization to reduce redundancy.
- Supports advanced performance optimization, using React Server Components (RSC) and dynamic loading for efficiency.
- Encourages consistent conventions for code style, naming, and formatting to enhance maintainability and readability.
Synopsis
Frontend developers skilled in TypeScript, Next.js, React, Shadcn UI, and Tailwind would benefit to build a component-based, performant web app with streamlined styling and state management.
Overview of .cursorrules prompt
The .cursorrules file outlines a set of guidelines and best practices for developing a frontend project using TypeScript, Next.js, React, Shadcn UI, and Tailwind. It emphasizes writing concise and technical code, using functional programming patterns, and modularizing code. Naming conventions and code structuring are specified for consistency. TypeScript usage is detailed, preferring interfaces over types and maps over enums. Syntax and formatting focus on using function keywords and concise conditionals. UI and styling guidelines include using specific UI libraries and responsive design principles. Performance optimizations suggest minimizing certain React hooks and optimizing images, along with best practices for URL state management and web vitals optimization. The rules aim to ensure a clean, performant, and maintainable codebase.
