About .cursorrules prompt file
What you can build
TypeScript Code Validator and Formatter: Develop a tool that automatically validates and formats TypeScript code according to specified conventions, ensuring concise syntax, functional components, and proper use of types.
Error Handling Library for TypeScript: Create a library that provides pre-defined error handling and validation functions, utilizing guard clauses, early returns, and error boundaries to improve code robustness and user experience.
UI Component Library with TypeScript and Tailwind: Build a component library using Shadcn UI, Radix, and Tailwind CSS, offering responsive, mobile-first design elements in line with recommended TypeScript practices and functional programming patterns.
Performance Optimization Analyzer: Develop a service that analyzes TypeScript applications for opportunities to minimize 'use client', 'useEffect', and 'setState', suggesting Remix-style optimizations to enhance web performance.
Dynamic Loading Component Generator: Create a tool that generates TypeScript components with dynamic loading capabilities, prioritizing essential components and deferring non-critical ones to optimize loading times.
Web Vitals Monitoring Service: Offer a platform that tracks and reports on essential Web Vitals (LCP, CLS, FID) for TypeScript-based applications, providing actionable insights to meet performance benchmarks.
Remix Style Code Example Repository: Maintain a repository of Remix-style TypeScript code examples, showcasing best practices for function usage, error handling, modularization, and optimization techniques.
Responsive Design Testing Platform: Develop a platform that tests TypeScript-based applications for responsiveness across various devices, using Tailwind CSS and mobile-first principles to ensure optimal user experience.
Declarative JSX Conversion Tool: Design a tool that converts imperative JSX code into a more declarative style, promoting concise and readable TypeScript components.
TypeScript Map Utilization Guide: Create educational content or an interactive tool demonstrating the benefits of using maps over enums in TypeScript, with practical code snippets and real-world examples.
Benefits
- Enforces concise and technical TypeScript code, leveraging functional and declarative programming patterns without classes.
- Establishes strict naming conventions with PascalCase for components and camelCase for variables, favoring named exports.
- Emphasizes optimized performance via Remix style, dynamic loading, and minimized 'use client', 'useEffect', and 'setState'.
Synopsis
A TypeScript developer can use this prompt to create modular, optimized web applications using TypeScript, Shadcn UI, Radix, and Tailwind with guidelines for code style, error handling, and performance optimization.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for writing TypeScript code with a focus on simplicity, functionality, and maintainability. It emphasizes using functional and declarative programming patterns, clear naming conventions, and avoiding code duplication. All code should be written in TypeScript, utilizing types over interfaces and maps instead of enums. It provides syntax and formatting rules to enhance readability and efficiency, including the use of pure functions and concise conditionals. The file also prioritizes robust error handling, UI styling with Shadcn UI, Radix, and Tailwind, and performance optimization strategies. Developers are encouraged to follow Remix documentation for best practices, optimizing essential web performance metrics.
