About .cursorrules prompt file
What you can build
Code Quality Platform for Vue.js: A platform that uses best practices mentioned in the prompt to analyze and improve Vue.js and TypeScript code quality. It provides feedback on maintainability, performance optimizations, and file organization, and suggests improvements like using VueUse for reactivity and performance.
Vite & Tailwind Performance Analyzer: An online tool that evaluates the performance of your applications built with Vite and Tailwind. It focuses on optimizing Web Vitals, analyzing build bundle sizes, and recommending improvements like code splitting and lazy loading for non-critical components.
Responsive UI Component Library: A library of reusable, responsive Vue components styled with DaisyUI and Tailwind, adhering to the best practices of modularity, naming conventions, and performance optimization.
Vue Composition API Playground: An interactive environment for experimenting with the Vue Composition API, demonstrating best practices for component creation, using TypeScript, and applying performance optimization techniques from the prompt.
Dynamic Image Optimizer: A web service that allows users to upload images and receive optimized versions in WebP format with lazy loading capabilities and properly defined size data, improving page load performance.
VueUse-Powered Application Templates: Pre-built application templates that leverage the VueUse library for enhancing reactivity and performance, demonstrating how to use the library to optimize codebase efficiently.
TypeScript Interface Generator for Vue: A tool to automatically generate TypeScript interfaces for Vue projects. It guides developers in using interfaces over types, avoiding enums, and maintaining extendability and mergeability.
Code Modularizer Tool: A tool that helps developers refactor their Vue projects into modular and DRY-compliant structures, suggesting systematic organization of components, helpers, and static content in separate files.
Async Component Wrapper: A Vue plugin that provides a simple API for wrapping asynchronous components in Suspense, complete with fallback UIs, to improve user experience and maintain application performance.
Tailwind Responsive Design Checker: A web-based service that offers guidance and tools for implementing responsive design using Tailwind CSS, focusing on mobile-first approaches to ensure optimal display across various devices.
TypeScript Map Utilizer: A learning platform that teaches the advantages of using maps over enums in TypeScript, providing real-world examples and scenarios where maps offer superior type safety and flexibility.
Code Review Assistant for Vue.js: A virtual assistant tool that automates the code review process for Vue.js projects, ensuring adherence to the provided best practices and identifying areas for performance improvements.
Vue Router Optimization Tool: An app for auditing and enhancing Vue Router configurations, ensuring efficient lazy loading of route-based components and advising optimizations for smoother navigation experiences.
Build Process Optimizer for Vite: A CLI tool that analyzes and optimizes the Vite build process, suggesting chunking strategies and code splitting techniques to generate smaller and more efficient bundles.
Interactive VueUse Guide: An educational website offering tutorials and examples of using the VueUse library to improve the efficiency and functionality of Vue applications, tailored for developers of various skill levels.
Benefits
- Promotes functional programming with TypeScript by using interfaces, avoiding classes, and leveraging functional components.
- Emphasizes optimization techniques including dynamic loading, image optimization with WebP, and chunking strategy for Vite builds.
- Enforces structured, modularized code organization and naming conventions for clarity and maintainability.
Synopsis
Developers familiar with TypeScript, Vue.js, and Node.js can use this prompt to create performance-optimized, maintainable, and modular web applications with best practices and efficient code structure.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive guide for developers on best practices and performance optimization when using TypeScript, Node.js, Vite, Vue.js, and related technologies. It emphasizes maintaining clean and modular code, promoting functional and declarative programming patterns, and providing clear naming conventions. The file outlines the use of TypeScript with a preference for interfaces over types, and recommends using functional components. It prescribes specific syntax and formatting rules, such as always using the Vue Composition API script setup style. For UI and styling, it advocates for DaisyUI and Tailwind CSS, stressing responsive, mobile-first design. The file emphasizes performance optimization through various techniques including dynamic loading, image optimization, and effective use of VueUse functions. It also highlights the importance of reviewing code for performance and adherence to best practices, ensuring optimized components for maintainability. Overall, it serves as a detailed rule set for developers aiming to enhance performance and maintain high standards in their projects.
