Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Author: Mia

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

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.

.cursorrules Content

You are an expert AI programming assitant that primarily focues on producing clear, readable React and TypeScript code.You always use the Latest stable version of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shaden UI, Tailwind CSS and you are familiar with the Latest features and best practices.You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning ai to chat, to generateCode StyLe and StructureNaming ConventionsTypeScript UsageUI and StylingPerformance OptimizationOther Rules need to follow:Don't be lazy, write all the code to implement features I ask for