TypeScript Node.js React Vite .cursorrules prompt file

Author: Ryan Atkinson

What you can build

TypeScript IDE Plugin: Develop a plugin for popular IDEs that enforces the code styles and structures outlined in the prompt, providing real-time feedback and suggestions to developers.React Component Library: Create a library of TypeScript React components built with Tailwind CSS, adhering to the style and structure guidelines, with features such as responsive design and performance optimization.Web Application Boilerplate: Design a boilerplate for web applications using TypeScript, Node.js, React, Vite, and TanStack Query/Router. The boilerplate would include pre-configured settings for ESLint, Prettier, and TypeScript interfaces.TypeScript Code Analyzer: Build a tool that analyzes TypeScript codebases for adherence to the provided constraints and guidelines, offering improvement suggestions and refactoring options.Interactive TypeScript Tutorial: Develop an online platform that offers interactive tutorials and exercises for learning to code efficiently in TypeScript, focusing on the principles enumerated in the prompt.State Management Library: Create a lightweight state management library optimized for performance, utilizing efficient data structures and algorithms as suggested by the prompt.Developer Documentation Generator: Build a service that automatically generates developer documentation from TypeScript codebases, ensuring consistent use of interfaces and maps.Code Optimization Service: Offer a service that scans projects to identify and suggest optimizations for network requests, data fetching strategies, and rendering processes in TypeScript applications.Tailwind CSS Templates: Design a set of Tailwind CSS templates specifically for TypeScript and React projects, emphasizing responsiveness and a mobile-first design approach.Functional Programming Workshop: Organize a workshop or series of webinars teaching functional programming patterns in TypeScript, aligned with the guidelines in the prompt.

Benefits

Synopsis

Front-end developers can use this prompt to build efficient, scalable web applications with TypeScript, React, and Tailwind, following best practices in functional programming and performance optimization.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines and constraints for writing TypeScript code in a project using technologies such as Node.js, React, Vite, TanStack Query, TanStack Router, and Tailwind. It emphasizes maintaining existing code and formatting, preferring functional and declarative programming patterns, and using descriptive variable names. It outlines a file structure for components, promotes the use of TypeScript interfaces over types, and advocates for functional components. It also specifies using Tailwind for styling and encourages performance optimizations like efficient data handling and rendering strategies. The file enforces certain naming conventions and syntax rules to ensure consistency and maintainability in the codebase.

.cursorrules Content

You are an expert in TypeScript, Node.js, React, Vite, TanStack Query, TanStack Router, and Tailwind.Response Constraints- Do not remove any existing code unless necessary.- Do not remove my comments or commented-out code unless necessary.- Do not change the formatting of my imports.- Do not change the formatting of my code unless important for new functionality.Code Style and Structure- Write concise, technical TypeScript code with accurate examples.- Use functional and declarative programming patterns; avoid classes.- Prefer iteration and modularization over code duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).- Structure files: exported component, subcomponents, helpers, static content, types.Naming Conventions- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for components.TypeScript Usage- Use TypeScript for all code; prefer interfaces over types.- Avoid enums; use maps instead.- Use functional components with TypeScript interfaces.Syntax and Formatting- Use the "function" keyword for pure functions.- Use curly braces for all conditionals. Favor simplicity over cleverness.- Use declarative JSX.UI and Styling- Use Tailwind for components and styling.Performance Optimization- Look for ways to make things faster: - Use immutable data structures - Use efficient data fetching strategies - Optimize network requests - Use efficient data structures - Use efficient algorithms - Use efficient rendering strategies - Use efficient state management