About .cursorrules prompt file
What you can build
TypeScript Code Reusability Analyzer: Create a service that analyzes TypeScript code to identify potential areas for code reuse or modularization, helping developers adhere to DRY principles effectively.
Vue Component Library: Develop a library of pre-built Vue components using Shadcn UI and styled with TailwindCSS, optimized for performance and with clear TypeScript interfaces for easy integration.
Responsive Design Toolkit: Build a web-based tool that helps developers preview and tweak their responsive designs using Tailwind CSS, ensuring a mobile-first approach and instant feedback.
Webpack to Vite Migration Tool: Create a step-by-step guide and accompanying tool to help developers transition projects from Webpack to Vite, emphasizing performance optimizations like code splitting.
Real-time Code Performance Optimizer: Design an extension for IDEs that provides real-time suggestions on code performance improvements using VueUse and dynamic loading strategies.
Vue Composition API Learning Platform: Develop an online course platform focusing on learning the Vue Composition API using the script setup style, complete with practical coding exercises and examples.
Image Optimization Service: Offer a service to convert images to WebP format, provide size metadata, and implement lazy loading to improve web page performance.
Vue Router Best Practices Guide: Create comprehensive documentation illustrating best practices for managing complex routing in Vue.js applications to enhance performance and maintainability.
Asynchronous Component Manager: Launch a tool that helps developers wrap async components in Suspense with fallback UIs, ensuring smoother user experiences.
Vite Build Optimizer: Develop a plugin for Vite focused on optimizing the build process through advanced chunking strategies, aiming for smaller bundle sizes and improved load times.
URL Parameter State Management Tool: Implement a utility to automate and simplify URL search parameter management using 'nuqs', enhancing state management in applications.
Web Vitals Monitoring Service: Provide a service that continuously monitors and reports on key web vitals (LCP, CLS, FID), with actionable insights for improvement based on testing tools like Lighthouse.
Benefits
- Emphasizes modular code organization, encouraging file-based separation for maintainability.
- Prioritizes modern TypeScript practices, such as preferring interfaces and maps over enums.
- Focuses on performance with strategies like dynamic component loading and image optimization for superior efficiency.
Synopsis
Developers building scalable web applications with modern front-end frameworks will benefit from this prompt to ensure code quality, maintainability, and performance optimization.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for developing web applications using TypeScript, Node.js, and a suite of Vue.js technologies including Vite, Vue Router, Pinia, and VueUse. It emphasizes best practices and performance optimization across various aspects of development. The file advises developers on code style and structure, such as writing concise and maintainable TypeScript code, using functional programming patterns, and organizing files systematically. It specifies naming conventions, TypeScript usage guidelines, syntax preferences, and UI styling instructions using Shadcn UI and Tailwind. It also provides recommendations for performance optimization, including leveraging VueUse, optimizing images, and implementing dynamic loading and chunking strategies in Vite. Additionally, the file suggests tools and strategies for optimizing web performance metrics like Web Vitals.
