About .cursorrules prompt file
What you can build
Component Library Generator: A tool that allows developers to generate TypeScript-based React component libraries using Shadcn UI and Tailwind CSS. It would provide scaffolding for common components, complete with typed properties and testing setups using Vitest and Playwright.
Responsive UI Builder: A web app that leverages Shadcn UI and Tailwind to enable users to design and export responsive UIs directly into a Next.js project. It includes type checking with TypeScript and export options for React components with modular file structures.
TypeScript Playground with Best Practices: An interactive editor that enforces TypeScript, React, and Next.js best practices by providing real-time feedback and suggestions on code style, structure, and naming conventions as outlined in the rules.
Dynamic Web App Boilerplate: A template for building Next.js applications with pre-configured TypeScript, Shadcn UI, Tailwind, Vitest, and Playwright settings. It structures files for modularity and includes dynamic importing features for better performance.
URL Parameter Management Tool: A utility using Nuqs to manage and track URL search parameters effectively in complex React applications. The tool would offer a visual interface for handling parameters and maintaining state across various routes.
E2E Testing Dashboard: A platform for managing and executing Playwright end-to-end tests with a focus on TypeScript-based React applications. It offers visualizations of the testing process and potential optimizations of key user flows.
Tailwind Theme Customizer: An app designed to customize and preview Tailwind themes in real-time with integration into Shadcn UI components for building cohesive design systems that are responsive and adhere to mobile-first principles.
React Query Performance Optimizer: A toolset for monitoring and optimizing the performance of data-fetching components in Next.js using dynamic loading strategies, advice on reducing render times, and lazy loading as prescribed.
Security Audit Checker: A service that scans TypeScript/React projects for common security vulnerabilities and provides clear code fixes and logging strategies, focusing heavily on dealing with user inputs and potential state management issues.
TypeScript Error Handling Assistant: An IDE plugin that suggests enhanced error-handling strategies for TypeScript applications, helping developers apply strong error handling with meaningful messages as specified in the guidelines.
Benefits
- Emphasizes the use of TypeScript and Next.js technologies with a mobile-first approach, leveraging Tailwind for responsive designs and Shadcn UI for component styling.
- Implements thorough testing using Vitest for unit tests and Playwright for end-to-end tests, following Arrange-Act-Assert (AAA) convention for structured test scenarios.
- Prioritizes readability, modularization, and iteration with a strong focus on concise, declarative programming practices and comprehensive TypeScript type usage across components.
Synopsis
This prompt would benefit a web developer aiming to build a scalable, efficient, and well-structured web application using modern TypeScript, React, and related tools.
Overview of .cursorrules prompt
The .cursorrules file defines guidelines and best practices for developers working with technologies such as TypeScript, React, Next.js, Shadcn UI, Tailwind, Nuqs, Vitest, and Playwright. It focuses on maintaining a concise and functional code style, emphasizing modularization, type safety, and performance optimization. The file covers naming conventions, TypeScript guidelines, syntax preferences, responsive UI and styling, React best practices, testing strategies, and security measures. Communication rules emphasize providing direct, concise solutions, anticipating needs, and respecting user's code style preferences.
