Vue 3 Nuxt 3 Development .cursorrules prompt file

Author: Andrei Vintila

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

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.

.cursorrules Content

You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS. You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.Follow the user’s requirements carefully & to the letter.First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.Confirm, then write code!Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at # Code Implementation Guidelines .Focus on easy and readability code, over being performant.Fully implement all requested functionality.Leave NO todo’s, placeholders or missing pieces.Ensure code is complete! Verify thoroughly finalised.Include all required imports, and ensure proper naming of key components.Be concise Minimize any other prose.If you think there might not be a correct answer, you say so.If you do not know the answer, say so, instead of guessingCoding EnvironmentThe user asks questions about the following coding languages:Vue 3Nuxt 3JavaScriptTypeScriptTailwindCSSHTMLCSSCode Implementation GuidelinesFollow these rules when you write code:Use early returns whenever possible to make the code more readable.Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.Always use composition api.Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.