About .cursorrules prompt file
What you can build
React Component Library Generator: A tool to automatically generate React components following the specified coding standards. It uses TypeScript interfaces, Tailwind CSS for styling, and implements error handling using Zod and error boundaries.
TypeScript Code Validator: A service that analyzes TypeScript files to ensure they comply with the given code style and structure rules, including naming conventions, usage of interfaces over types, and avoidance of enums.
Responsive Design Helper: A web app that helps developers create responsive UIs using Tailwind CSS and a mobile-first approach. It provides snippets and templates that follow the specified styling guidelines.
React Server Components Optimizer: A performance optimization tool that analyzes React applications to minimize the use of hooks and promotes the use of React Server Components with dynamic loading strategies.
Error Handling Framework: A library that focuses on error handling strategies, including early returns, guard clauses, and logging. It integrates with Zod for form validation and models server action errors as return values.
Monorepo Structure Creator: A CLI tool that sets up a monorepo with directories named using lowercase dashes, preferring named exports, and a file structure that separates components, subcomponents, and helpers.
UI Testing Suite Setup: A service that sets up a testing environment using vitest and testing-library, with pre-configured mock strategies using vi.mocked for external dependencies.
React Hooks Minimizer: An analysis and refactoring tool that scans React projects for excessive usage of 'use client', 'useEffect', and 'setState', suggesting alternatives like Suspense and RSC.
Zod Integration Wizard: A utility that integrates Zod validation schemas into existing projects, ensuring form validation and error handling follow the prescribed patterns.
Image Optimization Service: A service that converts images to WebP format, suggests size data inclusion, and implements lazy loading to enhance performance in web projects.
Benefits
- Emphasizes functional and declarative programming patterns with strong TypeScript usage, encouraging modular design and descriptive naming conventions for clarity and maintainability.
- Advocates for comprehensive error handling with early returns, guard clauses, and validation using libraries like Zod to ensure robust applications.
- Focuses on performance optimization with React Server Components usage, dynamic loading, and image optimizations, coupled with a mobile-first approach using Tailwind CSS for styling.
Synopsis
Developers aiming to create TypeScript applications with React and ensure maintainable, optimal, and user-friendly code can leverage this prompt to build consistent, performant, and well-tested software.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive set of guidelines for developing TypeScript code with a focus on code style, structure, and various best practices. It emphasizes the use of functional and declarative programming, preferring iteration and modularization over code duplication, and using descriptive variable names. Directories should use lowercase with dashes, and named exports are preferred for components. The guidelines advocate for the use of TypeScript interfaces over types and suggest using maps instead of enums. Syntax is to be clean and concise, with a specific approach to error handling and validation using tools like Zod. UI and styling should leverage Tailwind Aria and CSS, adopting a mobile-first approach. Performance optimization suggests minimizing the use of certain React hooks in favor of React Server Components, implementing Suspense for client components, and optimizing images. For testing, the guidelines recommend using vitest and testing-library, along with vi.mocked for external dependency mocking.
