TypeScript Vite Tailwind .cursorrules prompt file

Author: sphiNx

What you can build

Vue Performance Optimization Toolkit: A web app that helps developers optimize their Vue.js applications by providing tools to analyze and improve key performance metrics like Web Vitals (LCP, CLS, FID) and offering suggestions using best practices such as lazy loading, code splitting, and image optimization.TS to Vue Code Exporter: A service that converts TypeScript code, adhering to best practices like using interfaces and avoiding classes, into Vue functional components with seamless integration of TypeScript interfaces, ensuring maintainability and extendability.DaisyUI & Tailwind Component Library: A comprehensive library of pre-built, responsive DaisyUI and Tailwind CSS components that can be integrated into Vue.js projects. Includes dynamic loading options and examples of using a mobile-first approach.Vue Composition API Educator: An educational platform that provides tutorials, examples, and best practices for using the Vue Composition API script setup style, focusing on functional programming patterns and avoiding class-based components.Reactive UI Builder with VueUse: A tool that leverages VueUse functions to create high-performance, reactive UIs in Vue.js. It allows developers to visually create components and export them with optimized performance settings like lazy loading and suspense wrapping.File Structure Organizer for Vue Projects: A CLI tool that organizes Vue project files systematically, ensuring each file contains only related content, promoting DRY principles, and using naming conventions to improve maintainability and clarity.Vite Build Optimizer: A plugin for Vite that automatically implements optimized chunking strategies during the build process, such as code splitting, to generate smaller bundle sizes and ensure quick application loading times.Vue Image Optimizer: A service that processes and optimizes images for Vue.js applications, converting them to WebP format, adding size data, and implementing lazy loading to improve page load times and performance.Vue Code Suggester: A browser extension that reviews your Vue.js code for readability, adherence to best practices, and performance, suggesting improvements like avoiding unnecessary re-renders and using descriptive variable names.Responsive Design Checker for Vue: An online tool that helps developers test and ensure responsive design in their Vue.js applications, providing insights and recommendations on using Tailwind CSS for mobile-first development.

Benefits

Synopsis

This prompt is ideal for a front-end developer aiming to build a scalable, performant web application using TypeScript, Vue, and TailwindCSS, ensuring maintainability and best practices.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developers working with a tech stack that includes TypeScript, Node.js, Vite, Vue.js, and related technologies. It emphasizes writing concise and maintainable code using functional programming patterns, avoiding classes, and adhering to DRY principles. It advises on the use of TypeScript interfaces, prefers named exports for functions, and details naming conventions for directories. The file outlines UI and styling practices using DaisyUI and Tailwind CSS, focusing on responsive design. Performance optimization strategies include dynamic loading, image optimization, and chunking strategies in the Vite build process. It also includes best practices for code review, emphasizing performance, readability, and adherence to these guidelines.

.cursorrules Content

You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, DaisyUI, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.    Code Style and Structure  - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.  - Use functional and declarative programming patterns; avoid classes.  - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).  - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.    Naming Conventions  - Use lowercase with dashes for directories (e.g., components/auth-wizard).  - Favor named exports for functions.    TypeScript Usage  - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.  - Avoid enums; use maps instead for better type safety and flexibility.  - Use functional components with TypeScript interfaces.    Syntax and Formatting  - Use the "function" keyword for pure functions to benefit from hoisting and clarity.  - Always use the Vue Composition API script setup style.    UI and Styling  - Use DaisyUI, and Tailwind for components and styling.  - Implement responsive design with Tailwind CSS; use a mobile-first approach.    Performance Optimization  - Leverage VueUse functions where applicable to enhance reactivity and performance.  - Wrap asynchronous components in Suspense with a fallback UI.  - Use dynamic loading for non-critical components.  - Optimize images: use WebP format, include size data, implement lazy loading.  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.    Key Conventions  - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.  - Use the VueUse library for performance-enhancing functions.  - Implement lazy loading for non-critical components.  - Optimize images: use WebP format, include size data, implement lazy loading.  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.    Code Review  - Review code for performance, readability, and adherence to best practices.  - Ensure all components and functions are optimized for performance and maintainability.  - Check for unnecessary re-renders and optimize them using VueUse functions.  - Use the VueUse library for performance-enhancing functions.  - Implement lazy loading for non-critical components.  - Optimize images: use WebP format, include size data, implement lazy loading.  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.    Best Practices  - Use the VueUse library for performance-enhancing functions.  - Implement lazy loading for non-critical components.  - Optimize images: use WebP format, include size data, implement lazy loading.  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.