About .cursorrules prompt file
What you can build
TypeScript Linter Plugin - A tool or plugin for code editors that enforces the specified TypeScript code style and structure guidelines, including naming conventions, TypeScript usage, and syntactic preferences.
Functional Programming Guide for TypeScript - A comprehensive website offering tutorials, examples, and interactive coding challenges focused on implementing functional and declarative programming patterns in TypeScript.
Zod Form Validation Library - An open-source form validation library that integrates with popular form libraries to simplify form validation using the Zod schema.
Component Directory Generator - A CLI tool that creates structured component directories following the specified lowercase with dashes naming conventions and modular file structure.
Performance Optimizer for React Applications - A web service that analyzes React applications and provides suggestions for performance optimizations based on highlighted principles such as minimizing 'useEffect' and optimizing Web Vitals.
UI Component Library - A set of pre-built Shadcn UI, Radix, and Tailwind Aria components, promoting the specified styling and UI conventions, especially focusing on responsive design.
Responsive Design Checker - An online tool that allows developers to test and verify responsive designs optimized for desktop-first development using specified Tailwind CSS conventions.
Error Handling Dashboard - A service that integrates with apps to log errors, providing a dashboard for developers to track, analyze, and handle errors efficiently according to the error handling and validation guidelines.
React Remix and Next.js Data Fetching Simulator - An educational platform offering simulations and interactive scenarios to practice data fetching, rendering, and routing per the React Remix or Next.js guide references.
Lazy Loading Image Optimizer - A tool to convert images to WebP format, include size data, and implement lazy loading, aiding developers in following the performance optimization guidelines for images.
Benefits
Emphasizes functional programming patterns and modularization while avoiding code duplication, using iteration and concise TypeScript syntax.
Prioritizes error handling and form validation using early returns, guard clauses, and Zod, with modeled expected errors and error boundaries.
Recommends performance practices like optimizing Web Vitals, limiting 'use client' for server components, and utilizing dynamic loading for non-critical components.
Synopsis
Developers can leverage this prompt to create a clean, efficient boilerplate for a TypeScript-based React project, ensuring consistent code structure and optimal performance.
Overview of .cursorrules prompt
The .cursorrules file outlines a comprehensive coding style guide for developing TypeScript applications, focusing on code structure, naming conventions, and TypeScript usage. It emphasizes functional programming, iteration, and modularization, recommending the use of interfaces, maps, and Zod for form validation. The guide advises using specific UI libraries and responsive design with Tailwind CSS, promoting performance optimization techniques like dynamic loading and lazy loading. It also stresses error handling, logging, and user-friendly messaging, suggesting the use of server components, early returns, and guard clauses. Additionally, it provides guidelines for managing URL state, optimizing Web Vitals, and integrating with React Remix and Next.js for data fetching and routing.
