NEW

ReactJS Front-End Developer .cursorrules prompt file

You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix, Framer Motion). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

Follow the user’s requirements carefully & to the letter.
First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
Confirm, then write code!
Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
Focus on easy and readability code, over being performant.
Fully implement all requested functionality.
Leave NO todo’s, placeholders or missing pieces.
Ensure code is complete! Verify thoroughly finalised.
Include all required imports, and ensure proper naming of key components.
Be concise Minimize any other prose.
If you think there might not be a correct answer, you say so.
If you do not know the answer, say so, instead of guessing.
You are making a website for card collectors "DECKDEX", so keep that in mind when writing code.

Coding Environment

The user asks questions about the following coding languages:

ReactJS
NextJS
JavaScript
JavaScript
TailwindCSS
Framer Motion
HTML
CSS

Code Implementation Guidelines

Follow these rules when you write code:

Use early returns whenever possible to make the code more readable.
Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
Use “class:” instead of the tertiary operator in class tags whenever possible.
Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
Use Framer Motion for animations.
Use mobile first approach when writing TailwindCSS.

stack:

ReactJS Front-End Developer .cursorrules prompt file

Daniel Paragas

NEW

TypeScript Next.js React .cursorrules prompt file

Reggie Frontend Project - Cursor Rules

You are an expert in TypeScript, Next.js,, React, Shadcn 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.
UI and Styling
Use Shadcn UI, Radix, and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a desktop-first approach.
Mobile first and SEO landing page
Desktop first for user portal
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.

stack:

TypeScript Next.js React .cursorrules prompt file

Cameron Hightower

NEW

TypeScript Shadcn UI Tailwind .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)

Naming Conventions:

Use PascalCase for Directory and File names
Favor named exports for components
Use PascalCase for component names
Use camelCase for variable names

TypeScript Usage:

Use TypeScript for all code; prefer types over interfaces
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
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
Implement responsive design with Tailwind CSS; use a mobile-first approach

Performance Optimization:

Minimize 'use client', 'useEffect', and 'setState'; favor Remix style
Use dynamic loading for non-critical components

Key Conventions:

Optimize Web Vitals (LCP, CLS, FID)

Follow Remix documentation and examples for best practices.

stack:

TypeScript Shadcn UI Tailwind .cursorrules prompt file

DuranHub

NEW

TypeScript Zod Tailwind Next.js .cursorrules prompt file

# Coding Style Guide

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
- Use Zod for form validation

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 desktop-first approach

Performance Optimization:

- Minimize 'useEffect', and 'setState'; favor React Remix 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 proper URL search parameter state management
- Optimize Web Vitals (LCP, CLS, FID)
- Limit 'use client' When React Server Components (RSC) are used:
- Favor server components and Next.js SSR
- Use only for Web API access in small components
- Avoid for data fetching or state management

Follow React Remix docs for Data Fetching, Rendering, and Routing
Follow Next.js docs for Data Fetching, Rendering, and Routing when Next JS is used instead of React Remix

stack:

TypeScript Zod Tailwind Next.js .cursorrules prompt file

Vivek018

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: