About .cursorrules prompt file
What you can build
TypeScript Code Snippet Generator: A web app that generates TypeScript code snippets based on user specifications, using functional programming patterns, descriptive variable names, and Bun native modules where available.
Vue.js Component Library: A repository of reusable Vue.js single file components styled with Tailwind CSS. Each component follows TypeScript interfaces, optimization practices, and has full test coverage.
Performance Optimizer for Web Developers: A tool that analyzes static HTML/CSS/JavaScript projects, optimizing images to WebP, implementing lazy loading, and ensuring conformance with LCP, CLS, and FID web vitals.
Zod Form Validator: An online tool that helps developers generate Zod validation schemas for complex forms, ensuring robust error handling and validation in TypeScript applications.
Error Handling Middleware: A TypeScript library for handling errors using guard clauses and early returns. It implements nerverthrow for improved error response handling in front-end and back-end codebases.
Tailwind CSS Mobile-first Design Tool: A design tool that assists developers in creating responsive layouts using Tailwind CSS, prioritizing a mobile-first methodology and providing live previews.
Vue Composition API Starter Kit: A template for quickly starting Vue.js applications with Composition API, setup scripts, and pre-configured automatic import of vueuse functions.
TypeScript Interface Builder: A web application that assists developers in crafting interfaces in TypeScript, focusing on the use of interfaces over types and avoiding enums through map usage.
Test Coverage Analyzer: A service that scans your TypeScript project to ensure 100% test coverage, offering insights and recommendations for missing tests in Vue.js components.
Error Boundary Vue Component Library: A collection of Vue.js components designed to gracefully handle unexpected errors in single-page applications, enhancing user experience through detailed error reporting.
Functional TypeScript Training Platform: An educational platform offering lessons and examples on writing functional TypeScript code, with emphasis on error handling, modularization, and performance optimization.
Image Optimization Service: A cloud service that auto-converts images to WebP format, provides size data, and implements lazy loading strategies for website performance enhancement.
Benefits
- Emphasizes the use of TypeScript, functional patterns, and Bun native modules to ensure modern and efficient code.
- Promotes error handling with specific tools like Zod for validation and neverthrow for management.
- Encourages UI development with Vue.js, leveraging auto-imported vueuse functions, and maintaining 100% test coverage.
Synopsis
This prompt will benefit TypeScript Vue.js developers aiming to create modular, performant applications with clear structure and robust error handling.
Overview of .cursorrules prompt
The .cursorrules file provides a set of guidelines and conventions for TypeScript development with a focus on Vue.js projects. It encourages concise and technical coding practices, favoring functional and declarative programming patterns while avoiding unnecessary duplication and class structures. The file emphasizes using Bun native modules and TypeScript interfaces, avoiding enums, and using descriptive variable names. It details naming conventions for directories and suggests preferring named exports. Syntax and formatting rules include using the "function" keyword for pure functions and concise conditional statements. For error handling, it recommends early returns, using Zod for validation, and proper error logging. UI and styling are to be done using Vue.js Single File Components with Tailwind CSS following a mobile-first approach. Performance optimization techniques include optimizing images with WebP, lazy loading, and optimizing web vitals. The file also advises using vueuse functions, aiming for full test coverage, and preferring browser implementations when possible. It emphasizes the use of the Composition API and setup script, and suggests aligning with Vue.js documentation where appropriate.
