About .cursorrules prompt file
What you can build
Responsive Web App Builder: An app that allows users to build responsive web applications using Shadcn UI, Magic UI, and Radix UI with Tailwind. It includes built-in TypeScript support and generates Next.js projects with optimized code structure and performance.
TypeScript to Next.js Converter: A tool that converts regular JavaScript projects into TypeScript-based Next.js projects, ensuring structured code with interfaces, optimized data fetching using SWR, and performance enhancements with React Server Components.
UI Component Marketplace: A platform for developers to buy and sell Shadcn UI, Magic UI, Radix UI components leveraging Tailwind CSS, optimized for Next.js with efficient state management and JSX syntax practices.
Interactive Code Editor: An online IDE focused on TypeScript, Node.js, and React with integrated support for Next.js, Shadcn UI, Magic UI, Radix UI, and Tailwind, providing real-time collaboration and live preview features.
Performance Audit Tool for Next.js Apps: Service that analyzes Next.js apps against set performance benchmarks, giving insights into minimizing use client, optimizing Web Vitals, and making improvements to code based on best practices from Tailwind and Radix.
TypeScript Modularization Assistant: An application that assists developers in refactoring and modularizing existing codebases, transforming them into well-structured TypeScript projects following best practices around modularization and naming conventions.
Next.js Data Fetching Dashboard: A tool that visualizes and optimizes data fetching patterns in Next.js applications using SWR, and suggests improvements in minimizing Lifecycle Methods like 'useEffect'.
Web Accessibility Checker: A website service that scans Next.js projects built with Shadcn UI, Magic UI, and Tailwind to ensure they are accessible, providing solutions to fix issues related to UI/UX and responsive design.
Dynamic Image Optimizer: Web service that integrates with Next.js applications for optimizing images on the fly, focusing on lazy loading, WebP conversion, and embedding size data for improved loading performance.
Next.js Rendering and Routing Validator: A utility for verifying that Next.js app rendering and routing implementations follow best practices and suggested optimizations, including server-side rendering and server components usage.
Benefits
- Emphasizes modular functional TypeScript code with accurate examples and a strict structure for file organization.
- Prioritizes responsive design and performance optimization, recommending tools like Tailwind CSS, SWR, and dynamic loading.
- Clear enforcement of best practices for UI design, code readability, and efficient state management with specific library usage.
Synopsis
Developers creating scalable, maintainable web applications with TypeScript, Node.js, and Next.js would benefit from this prompt to ensure code quality, organization, and performance optimization.
Overview of .cursorrules prompt
The .cursorrules file serves as a comprehensive guide for developers working with a specific tech stack that includes TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Magic UI, Radix UI, and Tailwind. It outlines a set of rules and conventions for writing clean, efficient, and maintainable code. Key highlights include adopting functional and declarative programming patterns, detailed naming conventions, TypeScript preferences, syntax and formatting standards, UI styling using specified libraries, and best practices for data fetching and performance optimization. The file emphasizes the importance of sticking to Next.js documentation for rendering and routing, managing URL states with 'nuqs', and optimizing Web Vitals. Developers are encouraged to thoroughly plan in pseudocode, confirm details before coding, and ensure that code is correct, secure, and performant with a priority on readability. The file underlines the significance of addressing all functionality without leaving any incomplete sections.
