About .cursorrules prompt file
What you can build
Note-Taking Web App with Advanced Features: Develop a comprehensive note-taking application using TypeScript, Node.js, and Next.js with Shadcn UI and Tailwind styling. Features include adding new notes, viewing a list of all notes, a detailed view, editing, and deleting notes. The app will integrate a search field, filters, sort options, pagination, loading state, error handling, and drag-and-drop functionality.
Drag-and-Drop Notes Organizer: Create a web application focusing on the drag-and-drop feature, allowing users to easily organize and prioritize their notes visually. Use Radix UI for accessibility, Tailwind for styling, and Next.js for server-side rendering.
Responsive Notes App with Mobile-First Design: Build a responsive notes application targeting mobile users first. Utilize Tailwind CSS for responsive design, ensuring optimal experience on all devices. Include features like search, filter, and sort functionalities.
Optimized Notes App with React Server Components: Design a notes application optimized for performance using React Server Components. Minimize client-side state management by leveraging server-side rendering and dynamic component loading only when necessary.
SEO-Friendly Notes Management Platform: Implement a note management platform with an emphasis on SEO and Web Vitals optimization (LCP, CLS, FID). Use Next.js capabilities for server-side data fetching and routing to enhance search engine visibility and page load times.
Collaborative Notes App with Real-Time Updates: Create a collaborative notes application allowing multiple users to edit notes simultaneously. Use Web Sockets for real-time updates and Shadcn UI for intuitive user interaction.
Accessibility-Optimized Notes App: Develop a note-taking application with a focus on accessibility, using Radix UI components. Implement accessible features such as keyboard navigation, screen reader support, and high-contrast themes.
Offline-First Notes App: Design an offline-first notes application using localStorage or IndexedDB for data persistence. Allow users to access and modify notes even without an internet connection.
Themed Notes Application with Customization Options: Build a notes app offering theme customization where users can choose different color schemes or layout preferences using CSS variables and Tailwind classes.
Integrative Notes App with Cloud Storage Sync: Create a notes application that integrates with popular cloud storage services (e.g., Google Drive, Dropbox) to sync notes across devices, ensuring accessibility from any location.
Benefits
- Emphasizes minimal use of 'use client', promoting server components and Next.js SSR for optimal performance.
- Prioritizes UI/UX with responsive design using Tailwind CSS and cutting-edge UI libraries like Shadcn and Radix.
- Incorporates complex features, like drag-and-drop, pagination, filters, with focus on maintainability through modular and descriptive TypeScript code.
Synopsis
Developers familiarizing with TypeScript, Node.js, and Next.js App Router could build a robust, optimized notes application with full CRUD functionality and modern UI using this prompt.
Overview of .cursorrules prompt
The .cursorrules file outlines coding guidelines and best practices for developing a web application using TypeScript, Node.js, Next.js, React, Shadcn UI, Radix UI, and Tailwind CSS. It emphasizes writing concise and technical TypeScript code, using functional and declarative patterns, and preferring modularization and descriptive naming conventions. The file specifies the usage of TypeScript interfaces over types, and various syntax and formatting preferences. For UI and styling, it mandates using Shadcn UI, Radix, and Tailwind CSS with a mobile-first approach. Performance optimization guidance includes minimizing client-side functions, leveraging React Server Components, optimizing images, and using dynamic loading. Key conventions cover state management, optimizing Web Vitals, and adhering to Next.js documentation for data fetching and routing. Finally, it outlines the requirements for a notes app, including features like adding, listing, editing, and deleting notes, along with search, filter, sort, pagination, loading, error states, and drag-and-drop functionality.
