TypeScript Node.js Next.js React UI CSS .cursorrules prompt file

Author: virgoone

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

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.

.cursorrules Content

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.   Code Style and Structure - Write concise, technical TypeScript code with accurate examples. - Use functional and declarative programming patterns; avoid classes. - Prefer iteration and modularization over code duplication. - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Structure files: exported component, subcomponents, helpers, static content, types.   Naming Conventions - Use lowercase with dashes for directories (e.g., components/auth-wizard). - Favor named exports for components.   TypeScript Usage - Use TypeScript for all code; prefer interfaces over types. - Avoid enums; use maps instead. - Use functional components with TypeScript interfaces.   Syntax and Formatting - Use the "function" keyword for pure functions. - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements. - Use declarative JSX.   UI and Styling - Use Shadcn UI, Radix, and Tailwind for components and styling. - Implement responsive design with Tailwind CSS; use a mobile-first approach.   Performance Optimization - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC). - Wrap client components in Suspense with fallback. - Use dynamic loading for non-critical components. - Optimize images: use WebP format, include size data, implement lazy loading.   Key Conventions - Use 'nuqs' for URL search parameter state management. - Optimize Web Vitals (LCP, CLS, FID). - Limit 'use client':  - Favor server components and Next.js SSR.  - Use only for Web API access in small components.  - Avoid for data fetching or state management.   Follow Next.js docs for Data Fetching, Rendering, and Routing.