TypeScript Zod Tailwind Next.js .cursorrules prompt file

Author: Vivek018

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.

.cursorrules Content

# Coding Style GuideCode 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, typesNaming Conventions:- Use lowercase with dashes for directories (e.g., components/auth-wizard)- Favor named exports for componentsTypeScript Usage:- Use TypeScript for all code; prefer interfaces over types- Avoid enums; use maps instead- Use functional components with TypeScript interfaces- Use Zod for form validationSyntax and Formatting:- Use the "function" keyword for pure functions- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements- Use declarative JSXError Handling and Validation:- Prioritize error handling: handle errors and edge cases early- Use early returns and guard clauses- Implement proper error logging and user-friendly messages- Use Zod for form validation- Model expected errors as return values in Server Actions- Use error boundaries for unexpected errorsUI and Styling:- Use Shadcn UI, Radix, and Tailwind Aria for components and styling- Implement responsive design with Tailwind CSS; use a desktop-first approachPerformance Optimization:- Minimize 'useEffect', and 'setState'; favor React Remix 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 loadingKey Conventions:- Use proper URL search parameter state management- Optimize Web Vitals (LCP, CLS, FID)- Limit 'use client' When React Server Components (RSC) are used: - Favor server components and Next.js SSR - Use only for Web API access in small components - Avoid for data fetching or state managementFollow React Remix docs for Data Fetching, Rendering, and RoutingFollow Next.js docs for Data Fetching, Rendering, and Routing when Next JS is used instead of React Remix