About .cursorrules prompt file
What you can build
TypeScript Component Library: Develop a component library using TypeScript, Shadcn UI, and Radix UI for React apps, ensuring fully typed, reusable, and styled components optimized for performance with Tailwind CSS.
Cloudflare-based Blogging Platform: Create a serverless blogging platform leveraging Cloudflare's D1 database for data storage, R2 for media files, and KV for caching. Optimize for speed and server-side rendering with Next.js and DrizzleORM.
E-commerce Site with Enhanced Performance: Develop a headless e-commerce platform using Next.js and Cloudflare tools, focusing on performance optimizations, image loading with WebP, and utilizing RSCs to deliver fast, interactive user experiences.
AI-Powered Image Repository: Implement an AI-assisted image repository using Cloudflare's AI multimodal inference and R2 for storage, allowing users to search, upload, and manage images with advanced querying capabilities and optimize image delivery.
Real-time Collaboration Tool: Build a real-time collaboration web app using Node.js, Tailwind CSS, and React, with state management via nuqs and serverless backend with Cloudflare KV for shared data persists and competitive synchronization speed.
Next.js Starter Kit: Develop a Next.js starter kit with TypeScript, Radix UI, and Tailwind CSS integration, featuring pre-configured ESLint, Prettier, and optimized responses for rapid development of high-performance web applications.
Headless CMS using DrizzleORM: Create a headless content management system that uses DrizzleORM for data interactions, Cloudflare D1 as a backend, and Next.js for the frontend, ensuring seamless real-time updates and scalability.
Customizable Dashboard: Offer a customizable dashboard template using Shadcn UI components with dynamic loading, ready-to-use widgets, and Tailwind for responsive design, connecting to Cloudflare KV for storing user settings and preferences.
Server-Side Rendering News Portal: Develop a news portal application in Next.js focusing on SSR for enhanced SEO, using Tailwind CSS for styling and Cloudflare caching to ensure content is always delivered fresh and efficiently.
Authentication Microservice: Create a microservice for authentication using Node.js, Cloudflare KV for session management, and tailored components from Radix UI ensuring secure, performant, and scalable authentication processes.
Benefits
- Comprehensive focus on modern web stack, using TypeScript with frameworks and UI libraries like Next.js, React, Tailwind, and Shadcn UI for robust web application development.
- Strong emphasis on efficiency; guidelines for minifying client-side processing using React Server Components, dynamic loading, and image optimization strategies.
- Expertise in optimizing performance and utilizing Cloudflare's serverless offerings, recommending configuration changes and command suggestions for primitive additions in
wrangler.toml.
Synopsis
This prompt would benefit full-stack JavaScript developers who can build scalable, performant web applications using Next.js, React, TypeScript, and modern tooling like Cloudflare Workers and Tailwind CSS.
Overview of .cursorrules prompt
The .cursorrules file outlines a set of guidelines and best practices for software development using TypeScript, Node.js, and other modern web technologies such as Next.js App Router, React, and Tailwind CSS. It emphasizes expert usage of Cloudflare developer tools and suggests configuration changes for adding various Cloudflare primitives. The file provides detailed instructions on code style and structure, favoring functional programming, modularization, and descriptive naming conventions. It advocates for using TypeScript interfaces, Shadcn UI, Radix, and Tailwind CSS for UI styling, and emphasizes performance optimization strategies such as minimizing certain React hooks and optimizing images. Additionally, it offers conventions for managing state and optimizing web performance metrics while adhering to Next.js documentation for data fetching, rendering, and routing.
