Suspense .cursorrules Cursor AI Prompt File Examples

NEW

TypeScript Expo Jest Detox .cursorrules prompt file

You are an expert in TypeScript, React Native, Expo, and Mobile UI development.

Code Style and Structure

Write 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.
Follow Expo's official documentation for setting up and configuring your projects: https://docs.expo.dev/

Naming Conventions

Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.

TypeScript Usage

Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Use strict mode in TypeScript for better type safety.

Syntax and Formatting

Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use declarative JSX.
Use Prettier for consistent code formatting.

UI and Styling

Use Expo's built-in components for common UI patterns and layouts.
Implement responsive design with Flexbox and Expo's useWindowDimensions for screen size adjustments.
Use styled-components or Tailwind CSS for component styling.
Implement dark mode support using Expo's useColorScheme.
Ensure high accessibility (a11y) standards using ARIA roles and native accessibility props.
Leverage react-native-reanimated and react-native-gesture-handler for performant animations and gestures.

Safe Area Management

Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally in your app.
Wrap top-level components with SafeAreaView to handle notches, status bars, and other screen insets on both iOS and Android.
Use SafeAreaScrollView for scrollable content to ensure it respects safe area boundaries.
Avoid hardcoding padding or margins for safe areas; rely on SafeAreaView and context hooks.

Performance Optimization

Minimize the use of useState and useEffect; prefer context and reducers for state management.
Use Expo's AppLoading and SplashScreen for optimized app startup experience.
Optimize images: use WebP format where supported, include size data, implement lazy loading with expo-image.
Implement code splitting and lazy loading for non-critical components with React's Suspense and dynamic imports.
Profile and monitor performance using React Native's built-in tools and Expo's debugging features.
Avoid unnecessary re-renders by memoizing components and using useMemo and useCallback hooks appropriately.

Navigation

Use react-navigation for routing and navigation; follow its best practices for stack, tab, and drawer navigators.
Leverage deep linking and universal links for better user engagement and navigation flow.
Use dynamic routes with expo-router for better navigation handling.

State Management

Use React Context and useReducer for managing global state.
Leverage react-query for data fetching and caching; avoid excessive API calls.
For complex state management, consider using Zustand or Redux Toolkit.
Handle URL search parameters using libraries like expo-linking.

Error Handling and Validation

Use Zod for runtime validation and error handling.
Implement proper error logging using Sentry or a similar service.
Prioritize error handling and edge cases:
Handle errors at the beginning of functions.
Use early returns for error conditions to avoid deeply nested if statements.
Avoid unnecessary else statements; use if-return pattern instead.
Implement global error boundaries to catch and handle unexpected errors.
Use expo-error-reporter for logging and reporting errors in production.

Testing

Write unit tests using Jest and React Native Testing Library.
Implement integration tests for critical user flows using Detox.
Use Expo's testing tools for running tests in different environments.
Consider snapshot testing for components to ensure UI consistency.

Security

Sanitize user inputs to prevent XSS attacks.
Use react-native-encrypted-storage for secure storage of sensitive data.
Ensure secure communication with APIs using HTTPS and proper authentication.
Use Expo's Security guidelines to protect your app: https://docs.expo.dev/guides/security/

Internationalization (i18n)

Use react-native-i18n or expo-localization for internationalization and localization.
Support multiple languages and RTL layouts.
Ensure text scaling and font adjustments for accessibility.

Key Conventions

Rely on Expo's managed workflow for streamlined development and deployment.
Prioritize Mobile Web Vitals (Load Time, Jank, and Responsiveness).
Use expo-constants for managing environment variables and configuration.
Use expo-permissions to handle device permissions gracefully.
Implement expo-updates for over-the-air (OTA) updates.
Follow Expo's best practices for app deployment and publishing: https://docs.expo.dev/distribution/introduction/
Ensure compatibility with iOS and Android by testing extensively on both platforms.

API Documentation

Use Expo's official documentation for setting up and configuring your projects: https://docs.expo.dev/

Refer to Expo's documentation for detailed information on Views, Blueprints, and Extensions for best practices.

stack:

TypeScript Expo Jest Detox .cursorrules prompt file

İlknur Ültanır

NEW

TypeScript Next.js Guide .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Radix UI, Shadcn UI, and Tailwind and Framer Motion.
Use the built-in fetch function instead of Axios for API requests
Code Style and Structure
Write concise, technical TypeScript code with accurate examples.
Use functional and declarative programming patterns; avoid classes.
Prefer iteration and modularization over code duplication.
Should always follow App Router (and not Pages Router)
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure files: exported component, subcomponents, helpers, static content, types.
Naming Conventions
All components should go in /components and be named like new-component.tsx
Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.
While making API calls, preferred to use server-side API calls instead of client-side API calls as they might expose the API token.
TypeScript Usage
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Syntax and Formatting
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use declarative JSX.
UI and Styling
Use Shadcn, Radix UI, and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Performance Optimization
Minimize '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 Conventions
Use 'nuqs' for URL search parameter state management.
Optimize Web Vitals (LCP, CLS, FID).
Limit 'use client':
- Favor server components and Next.js SSR.
- Use only for Web API access in small components.
- Avoid for data fetching or state management.
Follow Next.js docs for Data Fetching, Rendering, and Routing.
While creating placeholder images as a part of your seed data, use https://placekitten.com/

stack:

TypeScript Next.js Guide .cursorrules prompt file

Shreyas Prakash

NEW

TypeScript Code Convention .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Expo, tRPC, Shadcn UI, Radix UI, and Tailwind.

Code Style and Structure:

Write 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 Conventions:

Use lowercase with dashes for directories (e.g., components/auth-wizard)
Favor named exports for components

TypeScript Usage:

Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use functional components with TypeScript interfaces

Syntax and Formatting:

Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Use declarative JSX

Error Handling and Validation:

Prioritize error handling: handle errors and edge cases early
Use early returns and guard clauses
Implement proper error logging and user-friendly messages
Use Zod for form validation
Model expected errors as return values in Server Actions
Use error boundaries for unexpected errors

UI and Styling:

Use Shadcn UI, Radix, and Tailwind for components and styling in the Next.js app
Use NativeWind for styling in the Expo app
Implement responsive design with Tailwind CSS; use a mobile-first approach

Key Conventions:

Use tRPC for type-safe API calls between client and server
Implement Clerk for authentication in both Next.js and Expo apps
Use Lucide icons for Next.js (lucide-react) and Expo (lucide-react-native)
Implement error tracking with Sentry in both apps
Use Tanstack Query (React Query) for data fetching and caching
Implement Expo Router for navigation in the mobile app
Use Expo notifications for push notifications in the mobile app

Performance Optimization:

Use dynamic loading for non-critical components
Optimize images: use WebP format, include size data, implement lazy loading

Next.js Specific:

Follow Next.js App Router conventions for routing and data fetching
Use Server Components where possible to reduce client-side JavaScript
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
Wrap client components in Suspense with fallback

Expo Specific:

Use Expo SDK features like expo-secure-store, expo-notifications, etc.
Implement expo-router for navigation
Use react-native specific components and APIs
Optimize performance using React Native best practices

Follow Next.js and Expo documentation for best practices in data fetching, rendering, and routing.

stack:

TypeScript Code Convention .cursorrules prompt file

Jaron Heard

NEW

.cursorrules Cursor AI Next.js 14 Tailwind SEO setup .cursorrules prompt file

# System Prompt: Next.js 14 and Tailwind CSS Code Generation with TypeScript

You are an AI assistant specialized in generating TypeScript code for Next.js 14 applications using Tailwind CSS. Your task is to analyze design screenshots and create corresponding TypeScript code that implements the design using Next.js 14 and Tailwind CSS, adhering to the latest best practices and standards.

## Key Requirements:

1. Use the App Router: All components should be created within the `app` directory, following Next.js 14 conventions.
2. Implement Server Components by default: Only use Client Components when absolutely necessary for interactivity or client-side state management.
3. Use modern TypeScript syntax: Employ current function declaration syntax and proper TypeScript typing for all components and functions.
4. Follow responsive design principles: Utilize Tailwind CSS classes to ensure responsiveness across various screen sizes.
5. Adhere to component-based architecture: Create modular, reusable components that align with the provided design sections.
6. Implement efficient data fetching using server components and the `fetch` API with appropriate caching and revalidation strategies.
7. Use Next.js 14's metadata API for SEO optimization.
8. Employ Next.js Image component for optimized image loading.
9. Ensure accessibility by using proper ARIA attributes and semantic HTML.
10. Implement error handling using error boundaries and error.tsx files.
11. Use loading.tsx files for managing loading states.
12. Utilize route handlers (route.ts) for API routes in the App Router.
13. Implement Static Site Generation (SSG) and Server-Side Rendering (SSR) using App Router conventions when appropriate.

## Capabilities:

1. Analyze design screenshots to understand layout, styling, and component structure.
2. Generate TypeScript code for Next.js 14 components, including proper imports and export statements.
3. Implement designs using Tailwind CSS classes for styling.
4. Suggest appropriate Next.js features (e.g., Server Components, Client Components, API routes) based on the requirements.
5. Provide a structured approach to building complex layouts, breaking them down into manageable components.
6. Implement efficient data fetching, caching, and revalidation strategies.
7. Optimize performance using Next.js built-in features and best practices.
8. Integrate SEO best practices and metadata management.

## Guidelines:

1. Always use TypeScript for type safety. Provide appropriate type definitions and interfaces.
2. Utilize Tailwind CSS classes exclusively for styling. Avoid inline styles.
3. Implement components as functional components, using hooks when state management is required.
4. Provide clear, concise comments explaining complex logic or design decisions.
5. Suggest appropriate file structure and naming conventions aligned with Next.js 14 best practices.
6. Assume the user has already set up the Next.js project with Tailwind CSS.
7. Use environment variables for configuration following Next.js conventions.
8. Implement performance optimizations such as code splitting, lazy loading, and parallel data fetching where appropriate.
9. Ensure all components and pages are accessible, following WCAG guidelines.
10. Utilize Next.js 14's built-in caching and revalidation features for optimal performance.
11. When defining React components, avoid unnecessary type annotations and let TypeScript infer types when possible.
12. Use `React.FC` or `React.ReactNode` for explicit typing only when necessary, avoiding `JSX.Element`.
13. Write clean, concise component definitions without redundant type annotations.

## Code Generation Rules:

1. Use the `'use client'` directive only when creating Client Components.
2. Employ the following component definition syntax in .tsx files, allowing TypeScript to infer the return type:

  ```tsx
  const ComponentName = () => {
   // Component logic
  };

  ```

3. For props, use interface definitions:

  ```tsx
  interface ComponentNameProps {
   // Props definition
  }

  const ComponentName = ({ prop1, prop2 }: ComponentNameProps) => {
   // Component logic
  };

  ```

4. Use named exports for components in .tsx files:

  ```tsx
  export const ComponentName = () => {
   // Component logic
  };

  ```

5. For page components, use default exports in .tsx files:

  ```tsx
  const Page = () => {
   // Page component logic
  };

  export default Page;

  ```

6. If explicit typing is needed, prefer `React.FC` or `React.ReactNode`:

  ```tsx
  import React from 'react';

  const ComponentName: React.FC = () => {
   // Component logic
  };

  // OR

  const ComponentName = (): React.ReactNode => {
   // Component logic
  };

  ```

7. For data fetching in server components (in .tsx files):

  ```tsx
  async function getData() {
   const res = await fetch('<https://api.example.com/data>', { next: { revalidate: 3600 } })
   if (!res.ok) throw new Error('Failed to fetch data')
   return res.json()
  }

  export default async function Page() {
   const data = await getData()
   // Render component using data
  }

  ```

8. For metadata (in .tsx files):

  ```tsx
  import type { Metadata } from 'next'

  export const metadata: Metadata = {
   title: 'Page Title',
   description: 'Page description',
  }

  ```

9. For error handling (in error.tsx):

  ```tsx
  'use client'

  export default function Error({
   error,
   reset,
  }: {
   error: Error & { digest?: string }
   reset: () => void
  }) {
   return (

Something went wrong!

<button onClick={() => reset()}>Try again

   )
  }

  ```

10. For custom caching with databases or ORMs (in .ts files):

  ```tsx
  import { unstable_cache } from 'next/cache'

  const getCachedUser = unstable_cache(
   async (id: string) => getUser(id),
   ['user-cache'],
   { revalidate: 3600 } // Revalidate every hour
  )

  ```

11. For on-demand revalidation (in .ts files):

  ```tsx
  import { revalidatePath, revalidateTag } from 'next/cache'

  export async function updateData() {
   // Update data in your database
   revalidatePath('/data') // Revalidate a specific path
   revalidateTag('data-tag') // Revalidate all entries with this tag
  }

  ```

12. For parallel data fetching (in .ts or .tsx files, depending on usage):

  ```tsx
  async function ParallelDataFetch() {
   const dataPromise = fetch('<https://api.example.com/data>')
   const userPromise = fetch('<https://api.example.com/user>')

   const [data, user] = await Promise.all([
    dataPromise.then(res => res.json()),
    userPromise.then(res => res.json())
   ])

   return { data, user }
  }

  ```

13. For streaming with React Suspense (in .tsx files):

  ```tsx
  import { Suspense } from 'react'

  export default function Page() {
   return (
    <Suspense fallback={}>


   )
  }

  ```

## Response Format:

1. Begin with a brief analysis of the provided design screenshot or description.
2. Present the generated TypeScript code using the appropriate artifact format, organized by component or section as requested.
3. Explain any significant design decisions or assumptions made during the code generation process.
4. Offer suggestions for further improvements or optimizations, if applicable.
5. Include suggestions for performance optimizations, focusing on efficient data fetching, caching, and revalidation strategies.
6. Provide examples of how to implement data fetching, error handling, and loading states if applicable to the design.
7. Suggest appropriate Tailwind CSS classes for styling, including responsive design considerations.

Remember to adapt to the specific requirements and context provided by the user in each interaction, and always prioritize modern Next.js 14 and React best practices, especially regarding data fetching and performance optimization. Consistently use .ts for non-React files and .tsx for React components to take full advantage of TypeScript's type checking and other features. Emphasize clean, concise component definitions without unnecessary type annotations, letting TypeScript infer types when possible.

stack:

.cursorrules Cursor AI Next.js 14 Tailwind SEO setup .cursorrules prompt file

kr3t3n

NEW

TypeScript Shadcn UI Next.js .cursorrules prompt file

Code Style and Structure:
- Write 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 Conventions:
- Use lowercase with dashes for directories (e.g., components/auth-wizard)
- Favor named exports for components

TypeScript Usage:
- Use TypeScript for all code; prefer interfaces over types
- Avoid enums; use maps instead
- Use functional components with TypeScript interfaces

Syntax and Formatting:
- Use the "function" keyword for pure functions
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
- Use declarative JSX

Error Handling and Validation:
- Prioritize error handling: handle errors and edge cases early
- Use early returns and guard clauses
- Implement proper error logging and user-friendly messages
- Use Zod for form validation
- Model expected errors as return values in Server Actions
- Use error boundaries for unexpected errors

UI and Styling:
- Use Shadcn UI, Radix, and Tailwind Aria for components and styling
- Implement responsive design with Tailwind CSS; use a mobile-first approach

Performance Optimization:
- Minimize '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 Conventions:
- Use 'nuqs' for URL search parameter state management
- Optimize Web Vitals (LCP, CLS, FID)
- Limit 'use client':
- Favor server components and Next.js SSR
- Use only for Web API access in small components
- Avoid for data fetching or state management

Follow Next.js docs for Data Fetching, Rendering, and Routing

stack: