About .cursorrules prompt file
What you can build
Component Builder for React: A web platform where developers can visually build React components using drag-and-drop facilities. The platform would ensure the generated code adheres to the described rules, including TypeScript for all components, correct React hook usage, and Tailwind CSS for consistent styling.
Tailwind CSS Styling Assistant: A browser extension or VSCode plugin that checks and enforces the consistent use of Tailwind CSS classes in your codebase. It would highlight non-compliant code blocks according to the established rules, ensuring previous classes are retained when changes are made.
TypeScript Code Assistant for React: An IDE plugin or web app that assists developers in writing TypeScript-compliant React components. It would make recommendations based on the latest conventions, including proper hook usage and dynamic component setup with "use client" tags.
React Hook Compliance Checker: A standalone tool or IDE extension that reviews React component code and verifies the consistent use and correct application of React hooks. This tool would help ensure hooks are used effectively, following the guidelines provided.
Jest and React Testing Library Integrator: A tool that automatically sets up a testing environment with Jest and React Testing Library in new or existing TypeScript React projects. It would configure the directory structure to place test files alongside their corresponding source files, ensuring compliance with established rules.
Tailwind CSS Evolution Tracker: A tool that tracks changes made to Tailwind CSS classes across a project's components. It ensures that class modifications do not override previous styles unless specified, and aids developers in maintaining consistency in styling.
TypeScript Type Inference Analyzer: A developer tool that evaluates TypeScript code to check for unnecessary explicit type declarations, promoting efficient use of TypeScript’s type inference capabilities. This ensures a leaner codebase by only adding explicit types when necessary.
React Codebase Explorer with Rule Enforcement: A web service where developers can upload their React TypeScript projects. The platform will analyze the code to ensure adherence to naming conventions, import/export structures, and consistent rule application, providing detailed reports on compliance.
Benefits
- Enforces TypeScript with inferred types, consistent naming, and modern React functional component standards to ensure clean and maintainable code.
- Mandates Tailwind CSS for styling with consistent class usage and adherence to existing styles to maintain visual consistency.
- Specifies organizational rules, such as local library installation and co-located testing files with Jest, for streamlined project structure.
Synopsis
Developers building a React application can ensure maintainable, scalable code by adhering to TypeScript, React hooks, Tailwind CSS, and consistent naming conventions with Jest for testing.
Overview of .cursorrules prompt
The .cursorrules file establishes guidelines for a coding environment using TypeScript, React, and Tailwind CSS. It mandates specific naming conventions, such as PascalCase for components and camelCase for variables, and ensures the use of modern React functional components, including proper use of React hooks. It emphasizes consistency in styling with Tailwind CSS and encourages maintaining existing styles when making changes. Testing should be conducted using Jest and React Testing Library, with test files located alongside source files. All new files and installations should be confined to the `client/src/` directory, avoiding server or root-level changes, and explicit return types should be minimized to allow TypeScript inference.
