About .cursorrules prompt file
What you can build
DeckDex Web Application: A comprehensive web application for card collectors to manage their collection. It would feature functionality to add, categorize, and track cards, and could use NextJS for server-side rendering, ReactJS for interactive UI components, and TailwindCSS for styling, while leveraging Framer Motion for smooth animations of adding or moving cards in the collection.
Real-time Deck Building Tool: An intuitive tool for users to build card decks in real-time, featuring drag-and-drop functionality and live collaboration features using ReactJS. The interface would be designed with TailwindCSS for responsiveness and Framer Motion for dynamic transitions between different states of the deck.
Marketplace for Collectible Cards: A platform allowing collectors to buy and sell cards online. This would include user authentication, listing creation, and a notification system, all built with NextJS for SEO optimization. TailwindCSS would be used for crafting modern, responsive UI elements, ensuring accessibility compliance.
Card Collection Analytics Dashboard: A personalized dashboard providing insights and analytics on one's card collection, built using ReactJS and visualized with chart libraries. TailwindCSS would ensure an easy understanding of data distribution through clear and structured layout, along with animations by Framer Motion to guide user focus.
Virtual Card Showcase: An interactive webpage allowing users to display their card collections in a virtual gallery. Using NextJS and Framer Motion for enhanced 3D animations and transitions, this tool would allow users to rotate and zoom into cards, designed with TailwindCSS for a professional and sleek look.
Community Forum for Card Collectors: A platform for collectors to share tips, advice, and discuss collections, developed with ReactJS for a component-based structure and NextJS for SEO and performance. The UI would utilize TailwindCSS for styling and add interactive elements like polls and Q&A with Framer Motion for dynamic response flows.
Collection Valuation Estimator: A service that estimates the value of a card collection based on market trends and data analytics, using server-side rendering with NextJS for accurate, real-time updates. TailwindCSS would be used to style input forms and results display, with Framer Motion to animate updates seamlessly.
Card Convention Finder: A web app that helps collectors find and attend card conventions and shows worldwide, featuring search and filtering options for events. A mobile-first approach with TailwindCSS would make it easy to use on-the-go, and Framer Motion could enhance user interactions with subtle effects.
DeckDex Mobile App: A mobile application companion for the web platform DECKDEX, providing on-the-go access to one's collection and the community. Built with React Native incorporating similar TailwindCSS principles adapted for mobile, ensuring fast performance and a seamless user experience.
Card Authentication and Grading Advisor: An educational tool providing guidance on authenticating and grading cards. Using React for the frontend and TailwindCSS for a clean, professional interface, it could utilize Framer Motion to demonstrate grading techniques and highlight key card features through interactive animations.
Benefits
- Emphasis on DRY principle, ensuring code is concise, functional, and bug-free, with complete implementations and necessary imports.
- Priority on using TailwindCSS, Framer Motion, and accessibility features; leveraging specific naming conventions and event handling approaches.
- Focus on preliminary detailed pseudocode development, ensuring clarity before code implementation, with an iterative confirmation process.
Synopsis
Developers skilled in ReactJS, NextJS, and TailwindCSS can utilize this prompt to build an accessible, mobile-first web application for card collectors with seamless animations and intuitive UI components.
Overview of .cursorrules prompt
The .cursorrules file outlines a set of guidelines and expectations for a Senior Front-End Developer specializing in ReactJS, NextJS, JavaScript, HTML, CSS, and modern UI/UX frameworks. It emphasizes the importance of thoughtful, accurate, and factual reasoning in the development process. The file provides detailed instructions on writing pseudocode before actual coding and stresses adherence to principles like DRY (Don't Repeat Yourself) and best practices. Code implementations should prioritize readability, completeness, and functionality, with specific guidelines for using TailwindCSS for styling, Framer Motion for animations, and ensuring accessibility features. Developers are instructed to provide descriptive naming conventions, use of the "handle" prefix for event functions, and adopt a mobile-first approach in styling. The file also expects confirmation of understanding before code writing and thorough verification of final code, aligning with the theme of creating a website for card collectors named "DECKDEX".
