About .cursorrules prompt file
What you can build
React Type UI Generator: A tool that allows developers to create UI components using Shadcn UI and Tailwind CSS, leveraging a drag-and-drop interface to facilitate design while generating clear, maintainable React and TypeScript code as per the prompt's guidelines.
Next.js App Bootstraper: An app providing a ready-to-use template for next-generation React applications, using Next.js App Router and fully integrating with TypeScript, Tailwind CSS, and Shadcn UI following best practices as described.
Code Structure Validator: A web service that analyzes React and TypeScript projects to ensure they follow the prescribed stylistic and structural guidelines, such as file organization, naming conventions, and code patterns.
TypeScript Code Mentor: An interactive AI tool that offers step-by-step real-time guidance for writing TypeScript code with React, focusing on avoiding classes and using functional programming patterns.
Performance Optimizer Plug-in: A VS Code extension or Node.js tool that automatically refactors React code to minimize the use of 'use client', 'useEffect', and 'setstate', recommending server-side rendering opportunities and dynamic loading strategies.
React Component Library Builder: An app enabling users to build and publish a library of React components, designed with TypeScript types and styled using Shadcn UI and Tailwind CSS, ensuring all components are modularized and reusable.
UI Theme Customizer: A web application tailored for developers to customize Shadcn UI themes and export Tailwind CSS configurations, aligning with best practices for responsive design and mobile-first approaches.
React Project Audit Tool: A service to audit existing React projects for compliance with modern TypeScript practices, such as functional components and descriptive variable naming, and suggest improvements as per the guidelines.
Design System Integration Platform: A platform to aid developers in integrating standardized design systems into React projects, using Tailwind CSS for responsive design while adhering to the latest React and TypeScript conventions.
AI-Powered Coding Example Guide: An educational resource providing developers with a repository of TypeScript code examples illustrating functional programming patterns and optimal file structuring for React applications.
Benefits
- Strict TypeScript and React development guidance emphasizes functional, modular, and consistent code patterns and styling.
- Enforces comprehensive performance strategies, including server components and dynamic loading for optimized end-user experience.
- Ensures complete, secure, and bug-free code by emphasizing detailed planning, strict adherence to instructions, and clear naming conventions.
Synopsis
Developers building web applications with React, TypeScript, and modern UI frameworks will benefit by creating clean, scalable, and optimally performing applications following best practices and standards.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines for an AI programming assistant specialized in developing React and TypeScript code. It emphasizes the use of the latest stable versions of various technologies (TypeScript, JavaScript, React, etc.) and best practices. The file outlines guidelines for code style and structure, such as writing concise TypeScript code with functional programming patterns and descriptive variable names. It recommends using TypeScript types, modular code design, Shadcn UI, and Tailwind CSS for UI and styling, and focusing on performance optimizations like React Server Components and Suspense. The file also stresses the importance of thorough, accurate, and bug-free code development, and advises a step-by-step approach to plan and write code while adhering to user requirements. It emphasizes the importance of readability, security, and maintaining a fully functional codebase without placeholders or incomplete features.
