About .cursorrules prompt file
What you can build
Vue 3 Component Library: Develop a comprehensive component library for Vue 3 that utilizes TailwindCSS for styling, offering pre-built components such as buttons, modals, forms, and more. All components will follow best practices in accessibility and will be implemented using Vue's composition API.
Nuxt 3 Blogging Platform: Create a blogging platform using Nuxt 3 that allows users to create, edit, and publish posts. The platform will feature user authentication, a rich-text editor, and customizable templates styled with TailwindCSS. It will also focus on SEO optimization and markdown support.
TypeScript-TailwindCSS Starter Kit: Build a starter kit for new projects that integrates Vue 3, TypeScript, and TailwindCSS. This kit will be optimized for rapid development and include essential tooling like ESLint, Prettier, and basic project scaffolding.
Accessible UI Design System: Create a design system focused on accessibility using Vue 3 and TailwindCSS. The system will include guidelines and components that prioritize WCAG compliance, such as keyboard-navigable menus and screen reader-friendly elements.
JavaScript to TypeScript Migration Tool: Develop a tool that assists developers in migrating JavaScript projects to TypeScript within a Vue 3 or Nuxt 3 environment. This tool will analyze JavaScript code and suggest TypeScript types and interfaces while ensuring code integrity.
Dynamic Form Builder: Design a dynamic form builder application using Vue 3, allowing users to create complex forms with drag-and-drop ease. Forms can be styled with TailwindCSS and exported for use in other projects, complete with validation and submission features.
E-commerce Platform: Create a full-featured e-commerce platform with Nuxt 3, supporting product listings, user reviews, shopping carts, and payment integrations. Use TailwindCSS for sleek, responsive styling, and TypeScript for type safety across the application.
Custom TailwindCSS Generator: Build a web application that enables users to customize and generate their own TailwindCSS configuration files. This tool will provide sliders and inputs for tweaking the default Tailwind theme, with a real-time preview of changes.
Real-time Collaboration Tool: Develop a real-time collaboration platform using Vue 3 and WebSockets for live updates. Allow multiple users to work together on documents or code, with synchronized editing and chat features, all styled with TailwindCSS.
Interactive Learning Platform: Design an interactive learning platform that uses Vue 3 and Nuxt 3 to provide courses and tutorials on web development. Include features like quizzes, progress tracking, and certificates, with all UI components using TailwindCSS for consistent styling.
Benefits
- Emphasizes the DRY principle and best practices, making sure code is bug-free, fully functional, and aligned with specified guidelines for maintainability and readability.
- Requires a step-by-step plan using detailed pseudocode before implementation, ensuring clarity and thoughtful reasoning in development.
- Prioritizes accessibility and descriptive naming, enforcing early returns, Tailwind styling, and composition API usage for enhanced code quality and user experience.
Synopsis
Frontend developers using Vue 3, Nuxt 3, JavaScript, TypeScript, and TailwindCSS would benefit by creating scalable, maintainable, and accessible web applications with best practices in mind.
Overview of .cursorrules prompt
The .cursorrules file outlines the responsibilities and approach for a Senior Frontend Developer specializing in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML, and CSS. The developer is expected to provide accurate and thoughtful solutions while adhering to best practices and principles like DRY (Don't Repeat Yourself). The file emphasizes a structured approach: planning with detailed pseudocode, confirming the plan, and then implementing complete, bug-free code. It provides specific code implementation guidelines, such as using TailwindCSS for styling, employing early returns for readability, and naming conventions for variables and functions to enhance code clarity and maintainability. The developer is also encouraged to implement accessibility features in their code.
