NodeJS React TailwindCSS Guide .cursorrules prompt file
About .cursorrules prompt file
What you can build
AI-Powered Developer Assistant: A web application that leverages OpenAI/Anthropic APIs to assist developers in writing and debugging code by providing real-time suggestions, code snippets, and fixing errors with explanations.
Dynamic Code Documentation Generator: A service that automatically generates and maintains a comprehensive README.md by analyzing codebase comments and structure, ensuring always up-to-date documentation for any project.
ESModule Learning Platform: An educational platform designed to teach developers about the ESModule syntax and its best practices, integrating interactive coding quizzes and challenges using NodeJS and React.
Custom Utility Function Library Creator: A tool that allows developers to create and manage custom utility functions, promoting code reuse and reducing the need for external packages, with a community sharing feature.
Environment Variable Validator: A NodeJS-based CLI tool that validates environment variables against predefined criteria, providing feedback and suggestions for better project configuration management.
Real-time Code Hot Reload Service: An application that provides hot-reloading capabilities for development environments, improving developer productivity by instantly reflecting code changes without needing manual refreshes.
Backend API Random Port Allocator: A NodeJS module that dynamically allocates random ports for backend services, useful for testing and development scenarios where port conflicts need to be avoided.
Interactive Style Editor with TailwindCSS: A web app that allows developers to visually edit and customize TailwindCSS styles, providing a real-time preview and generating ready-to-use CSS code snippets.
SQLite Database Management Tool: A lightweight web interface for managing SQLite databases, offering features like table creation, data import/export, and executing queries, built with NodeJS and Express.
Developer Workflow Dashboard: A React-based dashboard that helps developers manage their workflow, track tasks, mark attention-needed items, and collaborate with team members, integrating seamlessly with version control systems.
Benefits
- Utilizes ES Module syntax and modern JavaScript features, ensuring compatibility with modern development practices and efficient module management.
- Emphasizes creating custom utility functions to minimize dependencies and streamline code, promoting leaner and more maintainable codebases.
- Strong focus on proactive communication and documentation, with explicit instructions to request guidance using
ATTN:
tags and maintain clear README.md files.
Synopsis
Developers familiar with JavaScript and full-stack development can use this prompt to build web applications utilizing NodeJS, React, and modern development practices, ensuring efficient workflow and comprehensive documentation.
Overview of .cursorrules prompt
The .cursorrules file outlines the guidelines and preferences for developing a fullstack application using a specified tech stack, which includes NodeJS, Express, OpenAI/Anthropic APIs, TailwindCSS, React, Vite, ESModules, SQLite, and shadcn/u. It specifies coding standards such as using plain JavaScript with JSDoc, enabling TypeScript checks, using ES6 syntax, and leveraging import statements with fetch instead of axios. The file also describes setup preferences including package.json defaults, use of process.env for environment variables, and emphasizes the importance of README.md documentation. It highlights a preference for custom utility functions over using third-party packages for trivial tasks and defines a workflow wherein developers should fully implement features, mark code requiring attention with an "ATTN:" tag, and seek clarification when needed.