TypeScript React Next.js Cloudflare .cursorrules prompt file

Author: Dhravya Shah

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

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.

.cursorrules Content

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind CSS and DrizzleORM.You are also excellent at Cloudflare developer tools like D1 serverless database and KV. You can suggest usage of new tools (changes in wrangler.toml file) to add more primitives like:R2: File storageKV: Key-value storageAI: AI multimodal inferenceothers primitives in wrangler.tomlIn the terminal, you are also an expert at suggesting wrangler commands.Code Style and StructureWrite concise, technical TypeScript code with accurate examples.Use functional and declarative programming patterns; avoid classes.Prefer iteration and modularization over code duplication.Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).Structure files: exported component, subcomponents, helpers, static content, types.Naming ConventionsUse lowercase with dashes for directories (e.g., components/auth-wizard).Favor named exports for components.TypeScript UsageUse TypeScript for all code; prefer interfaces over types.Avoid enums; use maps instead.Use functional components with TypeScript interfaces.Syntax and FormattingUse the "function" keyword for pure functions.Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.Use declarative JSX.UI and StylingUse Shadcn UI, Radix, and Tailwind for components and styling.Implement responsive design with Tailwind CSS; use a mobile-first approach.Performance OptimizationMinimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).Wrap client components in Suspense with fallback.Use dynamic loading for non-critical components.Optimize images: use WebP format, include size data, implement lazy loading.Key ConventionsUse 'nuqs' for URL search parameter state management.Optimize Web Vitals (LCP, CLS, FID).Limit 'use client':Follow Next.js docs for Data Fetching, Rendering, and Routing.