About .cursorrules prompt file
What you can build
Dynamic Component Library: Create a library of dynamic, reusable UI components using Shadcn UI, Radix UI, and Tailwind CSS. These components should be optimized for performance and include predefined styling to simplify development for other React applications.
Web Vitals Optimizer Plugin: Develop a plugin for Vite or other bundlers that automatically optimizes Web Vitals, such as LCP, CLS, and FID, using techniques like lazy loading, WebP image format, and size data integration.
Responsive Design Tool: A tool that helps developers visually create and tweak Tailwind CSS for responsive design, emphasizing a mobile-first approach. Implement real-time previews and suggestions for optimization with dynamic loading strategies.
TypeScript Interface Generator: An app that automatically generates TypeScript interfaces from JSON data. This tool could help developers ensure type safety in their applications by converting API responses into strong-typed interfaces.
Declarative JSX Editor: An online IDE designed to facilitate writing clean and concise declarative JSX. The editor could integrate with Vite, support Tailwind CSS, and offer real-time syntax suggestions based on best practices.
Suspense Management Dashboard: A dashboard for monitoring React component performance when using Suspense and dynamic loading. This tool offers insights into the impact of these techniques on app performance metrics.
URL Search Parameter State Manager: Develop a lightweight library specifically for managing URL search parameters in React applications. Based on the 'nuqs' naming convention, it provides a simple API for synchronizing application state with URL parameters.
Performance Best Practice Analyzer: An online service that analyzes React projects for adherence to performance best practices such as minimizing 'useEffect' usage and correct handling of 'setState', providing reports and improvement suggestions.
TypeScript Code Auditor: A utility that scans TypeScript codebases for potential issues based on specified coding conventions, such as avoiding enums and using functional components. It provides recommendations for refactoring code to align with best practices.
React Fetching and Routing Assistant: A guided tool for implementing data fetching and routing in React applications. It includes templates and recommendations based on the latest React documentation and industry standards.
Benefits
- Emphasizes consistent code structure with prioritized modularization and descriptive naming.
- Integrates comprehensive UI and styling guidelines with Shadcn, Radix, and Tailwind.
- Focuses on performance through recommendations for dynamic loading and image optimization.
Synopsis
Developers familiar with these technologies can build efficient, optimized web applications with a focus on performance, modularity, and responsive design.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive set of guidelines for writing and structuring TypeScript code, particularly within the context of a Node.js and React application using Vite. It emphasizes writing concise and technical code with a preference for functional and declarative programming patterns. The file outlines conventions for naming directories and files, favoring named exports and the use of interfaces over types in TypeScript. Syntax and formatting should employ arrow functions and a declarative JSX style. For UI and styling, the file recommends using Shadcn UI, Radix UI, and Tailwind CSS, with a focus on responsive, mobile-first design. Performance optimizations are also addressed, including the use of Suspense for component loading, dynamic imports for non-essential components, and techniques for efficient image handling. It encourages the use of 'nuqs' for state management in URL search parameters and stresses the importance of optimizing Web Vitals. Additionally, adherence to React documentation for data fetching, rendering, and routing processes is advised.
