About .cursorrules prompt file
What you can build
Responsive UI Component Library: Develop a component library using Radix UI, Shadcn UI, and Tailwind CSS. This library will offer pre-built, mobile-first components optimized for performance with responsive design in mind. Components can be dynamically loaded and will include features like lazy-loading images and server-side API calls.
Code Optimization Tool: Create a tool that scans TypeScript codebases for adherence to best practices outlined in the prompt, such as using functional programming patterns, server-side API calls, and optimizing with Web Vitals in mind. It would provide actionable feedback and suggestions for improvement.
Server-side Data Fetching Service: Build a service that simplifies server-side data fetching with the built-in fetch function. It could handle token management and caching while abstracting complex API requests, aligning with the requirement to avoid exposing tokens in client-side calls.
TypeScript Boilerplate Creator: Develop a boilerplate generator for Next.js projects that automatically structures projects according to recommended file and component organization. It includes setup for TypeScript interfaces, tailwind configuration, and environment-ready for optimal server-side rendering.
Dynamic Image Optimization Platform: Provide a platform that processes images and delivers them in optimized formats like WebP and implements lazy loading. This service would be ideal for e-commerce or content-heavy sites looking to improve page load speeds and Web Vitals scores.
Declarative JSX Editor Plugin: Create an editor plugin that assists developers in writing declarative JSX by automatically transforming imperative code blocks into declarative patterns and ensuring adherence to concise syntax standards.
Next.js Routing and API Tutor: An interactive web-based tool that guides developers in using the Next.js App Router effectively, showcasing best practices in routing, server components usage, and server-side data fetching.
Radix and Shadcn Component Marketplace: An online marketplace for purchasing and selling custom components crafted using Radix UI and Shadcn UI. Components are vetted for performance and adherence to best practices, providing high-quality design options for developers.
Tailwind CSS Responsive Design Workshop: An online course or series of workshops that focus on teaching developers how to create responsive designs using Tailwind CSS, emphasizing mobile-first design principles and performance optimizations.
Nuqs-based URL State Management Library: Develop a state management library utilizing 'nuqs' for handling URL search parameters, providing seamless integration into Next.js projects to manage complex state scenarios efficiently.
Web Vitals Monitoring Dashboard: Provide a service that monitors the Web Vitals of a site and provides insights and recommendations for optimization, leveraging data gathered from a user's project structure and codebase.
TypeScript Interface Designer: An online tool that helps developers design and visualize TypeScript interfaces, encouraging the use of interfaces over types and simplifying the process of mapping complex data structures.
Benefits
- Emphasizes modern tools and libraries such as TypeScript, Next.js App Router, Radix UI, and Tailwind for superior development practices.
- Advocates for performance optimization with server-side API calls, React Server Components, Suspense, and dynamic loading for non-critical elements.
- Integrates comprehensive coding standards focusing on structure, naming conventions, TypeScript management, UI styling, and performance, ensuring code clarity and maintainability.
Synopsis
Developers familiar with modern web technologies can use this prompt to create a high-performance, type-safe, and modular Next.js application with optimized design and rendering practices.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for developing applications using TypeScript, Node.js, and Next.js with a focus on current best practices in modern web development. It emphasizes using built-in technologies like fetch for API requests instead of Axios, and it advises structuring code to be modular, concise, and free of duplication. Developers are encouraged to use functional and declarative programming styles, employing TypeScript with a preference for interfaces and avoiding enums. The file includes instructions on UI design using Shadcn, Radix UI, Tailwind, and Framer Motion, stressing responsive design and performance optimization through techniques like lazy loading and use of React Server Components. Naming conventions, syntax preferences, and strategies for severe components and data management via Next.js are outlined for consistency and maintainability. Lastly, there's a focus on optimizing web vitals and adhering to specific conventions for state management and API calls.
