About .cursorrules prompt file
What you can build
Advanced Code Editor Plugin: Develop a Next.js and React-based plugin for code editors like Visual Studio Code, focusing on enforcing coding conventions mentioned, such as concise JavaScript syntax and idiomatic patterns. It would integrate tools from Shadcn UI, Radix, and Tailwind for component styling and provide real-time feedback and optimization suggestions.
React Component Library: Create a library of React components using Shadcn UI, Radix UI, and Tailwind, following the outlined code style and structure. The library would include utility-first CSS integrations and examples of reusable, declarative JSX components optimized for performance.
Online JavaScript Code Checker: Design a web app that analyzes JavaScript code for adherence to best practices and conventions listed, such as avoiding unnecessary curly braces and using TanStack Query for data fetching. It would provide a detailed report with suggestions for improving code readability and performance.
Next.js Boilerplate Generator: Build a tool that generates a full-stack web application boilerplate using Next.js with pre-configured support for server-side rendering, Radix UI components, Tailwind styles, and TanStack Query integration for data caching.
Interactive Coding Tutorial Platform: Develop an education platform that teaches modern full-stack web development practices focusing on functional JavaScript, React patterns, and the integration of libraries like Tailwind and Radix UI. It would include interactive coding exercises with real-time error handling advice.
Error Handling Library: Create a JavaScript library focused on implementing consistent error handling patterns promoting readability, such as early returns and avoiding deeply nested conditions. Include best practices in error handling and validation learned from different case studies.
Tailwind Styled Components Visualizer: Craft a visual tool for composing and previewing styled components using Tailwind CSS within the outlined conventions. The tool would facilitate the implementation of design system components, offering CVA management for component variants.
Performance Audit Toolkit: Offer a browser-based toolset that audits web applications for performance optimization based on the best practices outlined, such as the minimization of client components and efficient use of React Server Components and Next.js SSR features.
Declarative JSX Design System: Build a framework for declaring UI components with JSX that conform to the preferred code style and naming conventions, emphasizing the use of Radix and Shadcn UI for highly functional and accessible interfaces.
Code Conversion Tool: Develop a tool that helps convert existing JavaScript codebases to match the latest version features and conventions, focusing on the transition from imperative to declarative patterns and incorporating functional programming principles.
Benefits
- Prioritize modern JavaScript, Node.js, and Next.js App Router with a focus on functional programming and clear code structuring.
- Adhere to specific naming conventions and minimalistic syntax, particularly in conditional statements and component usage.
- Emphasize performance through React Server Components, optimal error handling with early returns, and efficient data management with TanStack Query.
Synopsis
Developers looking to build performant, maintainable full-stack web applications using modern JavaScript and frameworks like React, Next.js, and Tailwind can benefit from this prompt.
Overview of .cursorrules prompt
The .cursorrules file outlines a set of guidelines and best practices for an expert full-stack web developer focused on producing clear, well-structured code using modern JavaScript technologies such as Node.js, Next.js, React, and associated UI libraries and frameworks. It emphasizes code readability, maintainability, and performance optimization through concise coding styles, naming conventions, and error handling strategies. The file advises using functional programming patterns, modular code, descriptive naming, and avoiding unnecessary syntax. Additionally, it focuses on performance by leveraging server-side rendering and optimized data fetching techniques. The rules also stress the importance of thorough implementation, well-documented code, and clear communication when uncertain about solutions.
