About .cursorrules prompt file
What you can build
TypeScript React Component Library: Create a component library using TypeScript, React, Shadcn UI, and Tailwind that provides pre-built, fully responsive, and optimized UI components. Ensure all components are type-safe, follow best practices, and include comprehensive documentation with examples.
Responsive Design Starter Kit: Develop a starter kit for building responsive web applications using Tailwind CSS and React. It should include commonly used layouts, components, and patterns optimized for mobile-first design.
Nuqs URL Parameter Manager: Build a standalone utility for managing URL search parameters in React applications using Nuqs. This tool should simplify handling, updating, and parsing URL parameters in a type-safe manner.
React Code Formatter and Linter: Design a code formatter and linter tool specifically for React and TypeScript projects, enforcing style and best practices outlined in the prompt, including naming conventions, syntax, and organization.
Playwright Testing Framework: Develop a pre-configured Playwright framework that includes vitest integration. It should facilitate writing and organizing both unit and end-to-end tests for React projects with built-in examples and templates.
Dynamic Asset Loader: Introduce a browser extension or library that dynamically loads and optimally manages media assets for web applications, focusing on lazy loading and optimization to enhance performance and reduce Web Vitals metrics.
Error Handling Middleware: Create middleware for React applications that provides a standardized approach to error handling and logging. It should include customizable, user-friendly error messages and integrate with popular logging solutions.
State Management Security Checker: Build a tool that scans React projects for potential security vulnerabilities related to state management, particularly focusing on common issues with user inputs and updates.
TypeScript Type Validator: Offer a browser or IDE plugin that analyzes TypeScript code to ensure all functions and components are properly typed according to the guidelines, recommending improvements when necessary.
Edge Case Coverage Analyzer: Develop a testing tool that evaluates unit tests written in Vitest, highlighting areas not covered by tests and suggesting edge cases to include for comprehensive testing.
Benefits
- Combines modern TypeScript, Tailwind CSS, and Shadcn UI for a comprehensive front-end guide.
- Emphasizes functional programming, modularization, and robust TypeScript typing for maintainable code.
- Enforces thorough testing with Vitest and Playwright for resilient and error-free applications.
Synopsis
This prompt would benefit frontend developers creating a modern web application, providing guidance on TypeScript code structure, styling, performance, and testing.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for writing and organizing TypeScript code in a React project using frameworks and tools such as Shadcn UI, Tailwind, Nuqs, Vitest, and Playwright. It emphasizes writing concise, functional code with clear examples and modularity. Naming conventions are standardized using kebab-case for files and directories. TypeScript usage is strictly typed with a preference for types over interfaces, avoiding loose typing. Syntax and formatting guidelines include using the "function" keyword and adopting a mobile-first approach for responsive design. Recommendations for UI and styling involve using Shadcn UI and Tailwind to ensure responsive, consistent components. React best practices are focused on minimizing certain hooks and emphasizing server-side logic. Testing is mandated with Vitest for unit tests and Playwright for end-to-end tests, following the AAA convention. Performance is optimized through dynamic and lazy loading, while security and error handling are prioritized with strong messaging and vulnerability reviews.
