About .cursorrules prompt file
What you can build
Next.js Learning Platform: A comprehensive learning platform focused on teaching TypeScript, Node.js, Next.js, React, and UI frameworks like Shadcn UI, Radix UI, and Tailwind CSS. It would include interactive tutorials and challenges that reinforce the coding standards and best practices outlined.
Component Library Generator: A tool that allows developers to create and maintain a component library using guidelines from Shadcn UI, Radix UI, and Tailwind. It focuses on generating TypeScript functional components with an emphasis on modularization and performance optimization.
Performance Optimization Analyzer: An application that analyzes Next.js applications for performance issues and provides suggestions based on best practices like minimizing 'use client', wrapping components in Suspense, and optimizing images.
Responsive Design Builder: A web app that assists in building responsive designs using Tailwind CSS, ensuring designs follow a mobile-first approach and adhere to the principles of using Radix and Shadcn UI components.
TypeScript Interface Converter: A service that converts existing JavaScript codebases to TypeScript, focusing on utilizing interfaces, functional components, and avoiding enums in favor of maps.
Naming Convention Linter: A tool that enforces naming conventions including lowercase directory names and variable naming standards, ensuring consistency in larger codebases.
Server Components Converter: A service that helps convert client components to server components in Next.js, adhering to best practices for SSR, minimizing client usage, and optimizing Web Vitals.
Dynamic Component Loader: A library that simplifies the implementation of dynamic loading for non-critical components in React applications, improving initial load times.
Next.js URL State Manager: An application managing URL search parameters using 'nuqs', making it easy and efficient to sync state with the URL in Next.js apps.
Image Optimization Toolkit: A suite of tools that automate the process of converting images to WebP format, inserting size data, and enabling lazy loading for better load performance.
Benefits
- Emphasizes a comprehensive understanding of modern UI libraries and frameworks like Shadcn UI, Radix UI, and Tailwind CSS for responsive, mobile-first design.
- Advocates for performance optimization through minimal 'use client' directives, dynamic loading, and React Server Components.
- Prioritizes code maintainability with concise TypeScript practices, descriptive naming conventions, and modular file structures.
Synopsis
A developer building a Next.js application with TypeScript, optimized UI and performance, adhering to best practices in code structure, styling, and naming conventions.
Overview of .cursorrules prompt
The .cursorrules file serves as a guideline for developers working with TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind CSS. It emphasizes concise and technical TypeScript coding, advocating for functional and declarative programming patterns, modularization, and descriptive variable naming. The file advises using TypeScript interfaces, favoring maps over enums, and adopting functional components. It includes syntax and formatting preferences, such as the use of the "function" keyword for pure functions and declarative JSX. For UI and styling, it promotes the use of Shadcn UI, Radix, and Tailwind with a responsive design approach. Performance optimization suggestions focus on minimizing client-side hooks and using React Server Components, dynamic loading, and image optimization. Additionally, it outlines key conventions like using 'nuqs' for URL search parameters, optimizing Web Vitals, and limiting the use of client-side components, recommending adherence to Next.js documentation for data fetching, rendering, and routing.
