About .cursorrules prompt file
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
- Emphasizes TypeScript best practices such as using interfaces over types, and avoiding classes for a functional approach.
- Prioritizes performance optimizations using VueUse, dynamic loading, and an optimized Vite build process.
- Advocates for a mobile-first and maintainable UI design with DaisyUI and Tailwind, focusing on concise and organized code structure.
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.
