About .cursorrules prompt file
What you can build
TypeScript-Focused Code Formatter: Develop a code formatter tool that adheres to the specified syntax and naming conventions, ensuring concise and technical TypeScript code. The tool would automatically transform classes into functional components, replace enums with maps, and format code using Tailwind CSS styling conventions.
Modular React Component Library: Create a library of modular React components written in TypeScript using the defined conventions, including FC imports, and leveraging Tailwind for styling. Components would come with TypeScript interfaces for easy customization.
Next.js Custom Scaffolding Tool: Build a tool that generates a Next.js project structure following the specified coding guidelines, including API routes, pages, and components directories using lowercase with dashes.
Responsive Layout Builder with Tailwind: Launch a web-based layout builder utilizing Tailwind CSS, allowing users to create responsive designs with a mobile-first approach, automatically generating TypeScript-ready components for Next.js.
TypeScript Map Syntax Transformer: Develop a utility that transforms TypeScript enum syntax into map patterns, providing converted code samples and integration within IDEs for real-time transformations.
Image Optimization and Lazy Loading Service: Implement a service that optimizes images into WebP format, adds size metadata, and embeds lazy loading attributes, directly compatible with Next.js projects.
Descriptive Naming Linter for TypeScript: Build a linter that enforces descriptive naming conventions with auxiliary verbs, ensuring variables like isLoading or hasError are used appropriately in TypeScript projects.
React Functional Component Conversion Tool: Create a tool to convert class-based React components into functional components using the function keyword with FC and PropsWithChildren types in TypeScript.
Education Platform on Functional TypeScript: Launch an online platform offering courses and tutorials on writing functional and declarative TypeScript code, focusing on the techniques outlined in the conventions.
Tailwind CSS Responsive Mocks Generator: Invent a mockup generation app that automatically adjusts Tailwind CSS designs to be responsive and mobile-first, providing instant previews in various screen resolutions.
Benefits
- Implement TypeScript interfaces for clear type definitions and prefer functional components for structuring React components.
- Utilize TailwindCSS for responsive, mobile-first design, ensuring efficient UI styling and optimization.
- Adhere to naming conventions and formatting guidelines to maintain code consistency and readability across projects.
Synopsis
Developers building web applications with TypeScript, Node.js, React, Next.js, and Tailwind will benefit by crafting efficient, performant, and maintainable code following these standards.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive set of guidelines and conventions for developing applications using TypeScript, Node.js, Next.js, React, and Tailwind CSS. It emphasizes concise and technically accurate TypeScript code with a preference for functional and declarative programming patterns over classes. The file outlines clear naming conventions, including lowercase with dashes for directories and favoring named exports. It encourages the use of TypeScript interfaces rather than types or enums. For React, it prefers specific imports like `FC` and promotes the use of `PropsWithChildren`. It specifies syntax and formatting rules, including the use of single quotes for strings and avoiding trailing commas. The file also mandates the use of Tailwind for styling and implementing responsive design while following Next.js documentation for data fetching, rendering, and routing. Performance optimization tips include using WebP format for images, size data, and lazy loading. Overall, it sets a structured development approach aimed at efficiency and scalability.
