React TypeScript Tailwind CSS .cursorrules prompt file
About .cursorrules prompt file
What you can build
Solidity Smart Contract Development Platform: A web-based IDE tailored for writing and compiling Solidity smart contracts. Includes features such as syntax highlighting, real-time compilation feedback, modularization tools, and integration with blockchain networks for deployment.
Next.js Tailored Server Action Builder: A tool that helps developers easily create type-safe server actions in Next.js using next-safe-action. It provides an intuitive interface to define input schemas with Zod, manage error handling, and return consistent responses.
TypeScript Code Quality Analyzer: A service that examines TypeScript code to ensure adherence to best practices, such as using interfaces over types and avoiding enums. It integrates with code editors to provide real-time feedback and suggestions for improvement.
React Component Library with Shadcn and Radix UI: A pre-built component library utilizing Shadcn UI, Radix, and Tailwind Aria for React applications. The library offers a wide range of customizable and accessible UI components ready for integration.
Responsive Design Studio with Tailwind CSS: An application allowing developers to design and visualize responsive web interfaces using Tailwind CSS. It supports interactive adjustments for mobile-first design and immediate feedback on layout changes.
Dynamic Image Optimization Service: A service that automatically optimizes images for Next.js applications. It converts images to WebP format, ensures proper sizing, and implements lazy loading to enhance performance.
Modular Error Handling Framework: A framework for Next.js applications focused on modularizing error handling. It includes custom error types, logging utilities, and user-friendly error messages for consistent application-level error management.
Zod-based Form Validator: A React hook utility leveraging Zod to validate forms and manage form states effortlessly. It integrates with react-hook-form for seamless validation and error handling in React applications.
Vite Project Scaffolding Tool: A CLI tool to scaffold Vite projects with best practices embedded, such as using types for declarations, iterating modular code structures, and providing a pre-configured TypeScript setup.
Web Vital Optimization Analyzer: A tool that analyzes and provides suggestions on improving Core Web Vitals (LCP, CLS, FID) for Next.js applications, contributing to better performance metrics and user experience.
Benefits
- Strong emphasis on TypeScript and functional programming using declarative and modular techniques for optimal code precision and readability.
- Detailed guidelines for error handling prioritization, enforcing early error returns, guard clauses, and use of custom error types for consistent handling.
- Extensive React/Next.js recommendations including functional components, optimized responsive design with Tailwind CSS, and robust state management with RORO and Zod validation.
Synopsis
Developers and teams using modern web technologies can improve scalability and maintainability by adopting these structures and principles for efficient code design and error handling.
Overview of .cursorrules prompt
The `.cursorrules` file outlines guidelines and best practices for web development using technologies like Solidity, TypeScript, Node.js, React, Next.js, and Tailwind CSS. It emphasizes concise technical communication with accurate TypeScript examples, promoting functional and declarative programming styles. The file provides detailed conventions for JavaScript/TypeScript usage, error handling, and validation. It also includes recommendations for React and Next.js applications, such as using functional components, optimizing image handling, and implementing responsive designs. The file stresses the importance of minimizing "use client" usage, handling errors gracefully, and ensuring consistent error management. It encourages following Next.js documentation for optimal data fetching and rendering. Security, performance, and operational considerations are also highlighted as integral to the development process.