About .cursorrules prompt file
What you can build
TypeScript Code Linter: A linting tool specifically for TypeScript that enforces the best practices outlined in the prompt, such as functional programming patterns, modular code, and naming conventions. It could integrate with popular IDEs and support customizable rule sets.
Modular TypeScript Template Generator: A CLI tool that generates a boilerplate code structure for TypeScript projects, adhering to the style and structure guidelines, including file organization and naming conventions. It could also include pre-configured components with Tailwind CSS and Shadcn UI.
Functional Components Library: A library of pre-built functional components using TypeScript interfaces and avoiding class usage. These components would be equipped with error handling, validation using Zod, and include responsive styling options with Tailwind CSS.
Error Handling and Validation Framework: A framework that facilitates error handling and validation in TypeScript projects. It would include pre-defined error boundaries, logging systems, and integration with form validation libraries like Zod to streamline capturing and managing errors.
Responsive Design Toolkit: A toolkit to aid developers in designing mobile-first, responsive applications using Tailwind CSS. It could include utility classes and templates that ensure components are styled consistently and perform well on all devices.
Server Action Modeling Tool: A tool for efficiently modeling expected errors as return values in server actions, helping developers implement comprehensive error handling strategies. This could include automated generation of TypeScript types for expected API errors.
Dynamic Component Loader: A utility to facilitate dynamic loading of non-critical components, leveraging React Server Components and optimizing performance through techniques like lazy loading and Suspense.
WebP Image Optimizer Service: A web service that automatically converts images to the WebP format and generates size data for lazy loading, providing developers with optimized image assets to improve web performance.
'nuqs'-Based State Management Library: A library for managing URL search parameters in React projects, allowing state to be stored in the URL query string, following the 'nuqs' convention.
Web Vitals Optimization Toolkit: A set of tools and guidelines aimed at optimizing key Web Vitals like LCP, CLS, and FID. It would provide insights and suggestions for improving these metrics based on the performance optimization strategies mentioned in the prompt.
Benefits
- Encourages functional and declarative programming patterns and avoids class usage, promoting clean and maintainable code structures.
- Emphasizes comprehensive error handling, favoring early returns, guard clauses, and user-friendly logging for robust applications.
- Prioritizes performance optimization strategies, leveraging dynamic loading, image optimization, and minimal client-side state management to enhance speed and efficiency.
Synopsis
Developers building scalable web applications with TypeScript and React would benefit, allowing them to implement modular, efficient, and maintainable code adhering to modern best practices.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for writing efficient and maintainable TypeScript code, emphasizing functional and declarative programming patterns while avoiding class-based structures. It offers specific conventions for code structure, including naming, usage of TypeScript, syntax, and formatting, as well as handling errors and validation effectively. The file recommends using modern UI frameworks like Shadcn UI, Radix, and Tailwind CSS for responsive design. It also focuses on performance optimization, suggesting minimal use of 'use client', 'useEffect', and 'setState', and highlighting strategies for optimizing Web Vitals and image loading. A key convention includes using 'nuqs' for managing URL search parameters and leveraging Next.js server-side rendering features for optimal performance.