About .cursorrules prompt file
What you can build
Online Code Collaboration Platform: Develop a platform like GitHub but optimized for frontend developers using React, Next.js, tRPC, and TailwindCSS. Features could include real-time code collaboration, version control, and a forum specifically for discussing best practices in these technologies.
Educational React Component Library: Create a library of educational React components complete with TypeScript types and TailwindCSS styling. These components would be designed for teaching React and Next.js, focusing on best practices and DRY principles.
Frontend Performance Analyzer: Build an application that analyzes React and Next.js projects for performance issues, ensuring components follow best practices and DRY principles. Integrate TypeScript support for type analysis and recommend optimizations.
UI Design Tool: Develop a design tool where users can create UI components with TailwindCSS and instantly see how they would be implemented in a React/Next.js environment. Implement accessibility testing within the tool to ensure compliance with web standards.
Automated Testing Suite for Frontend Code: Create a tool that leverages Vitest to automatically generate tests for React, Next.js, and tRPC codebases. Utilize dependency injection and snapshots for comprehensive test coverage, ensuring high code reliability.
Personal Portfolio Builder: Create a service that allows frontend developers to easily build and deploy personal portfolios using Next.js and TailwindCSS. Include authentication features using TRPC best practices for security.
Dynamic Form Builder: An app for building dynamic forms with precise validation logic using TypeScript and TailwindCSS, designed for easy integration into React applications. Include options for accessibility features like ARIA attributes and keyboard navigation.
Content Management System (CMS): Develop a headless CMS using Next.js and tRPC that allows for easy content updates with real-time preview and TailwindCSS styling. Ensure that the system supports authentication and follows security best practices.
Frontend Interview Prep Platform: A web-based platform for preparing frontend developers for technical interviews, providing coding challenges and tutorials focused on React, TypeScript, and Next.js. Ensure the platform is easily navigable and styled with TailwindCSS.
Accessibility Checker: Build a tool that checks React and Next.js applications for accessibility issues, providing suggestions for improvements based on the latest web standards and guidelines. Integrate it with popular code editors for real-time feedback.
Benefits
- Detailed pseudocode planning encourages thorough analysis and anticipates potential challenges before coding.
- Strict adherence to DRY principles ensures maintainability and reduces redundancy across codebase.
- Emphasizes robust error handling and accessibility features, enhancing usability and security.
Synopsis
This prompt is ideal for frontend developers looking to build robust, maintainable React applications using Next.js, ensuring best practices in code organization, styling with TailwindCSS, and testing with Vitest.
Overview of .cursorrules prompt
The .cursorrules file provides detailed guidance for a Senior Frontend Developer with expertise in React, Next.js, TypeScript, TailwindCSS, and related technologies. It emphasizes a methodical approach to problem-solving by planning in pseudocode before coding, aiming for correct, best-practice, and DRY (Don't Repeat Yourself) code. The file outlines guidelines for coding and testing, emphasizing readable code and complete functionality without any placeholders. Developers are instructed to use TailwindCSS classes over traditional CSS, and to ensure accessibility in HTML elements. Functions should be used over consts, with descriptive naming conventions. For authentication, secure handling of errors with TRPCError is advised. Testing practices prefer Vitest and advocate for dependency injection over mocking, using `waitError` for error handling and snapshots for error verification.
