Browse

Component Naming .cursorrules strategies

Filters

Tech

Clear

shadcn-ui

@mui/styled-engine-sc

@mui/material

bcryptjs

@emotion/react

init

@ckeditor/ckeditor5-react

@types/react-dom

clsx

next-auth

react

prisma

@prisma/client

typescript

framer-motion

@emotion/styled

ckeditor5

NestJS

MikroORM

WCAG

React.FC

React.ReactNode

ORM

fetch API

lazy loading

SEO

code splitting

bun

Livewire

PSR-12

PHP 8.1

Eloquent ORM

Luvi

Alpine.js

Composer.

Blade

novo-elements

Nose-Js

Supabaar SQL

Shaden UE

Gutenberg editor blocks

Guzzle

WP REST endpoint

HTTP client

Vue

Bash

AMD ROCm

Nvidia CUDA

react-spring

react-window

next/image

sqlalchemy

pydantic

fastapi-users

Python 3.12

fastapi-jwt-auth

alembic

fastapi-pagination

fastapi-cache

fastapi

fastapi-limiter

fastapi-mail

Ruby

Rails

DragonRuby Game Toolkit

NextJS

Replit

PNPM

zod

Large Language Models

axios

GPU

Knative

htmx

Typesense

React Remix Components

Next.js.

immutability

composability

pure functions

declarative

functional

DRY

imperative

D1 serverless database

R2

Cloudflare

KV

AI

wrangler

DrizzleORM

MkDocs

cloud native technologies

Chrome's i18n API

Chrome's alarms API

Chrome APIs

Chrome's identity API

Chrome's storage API

Categories

Clear

Server Actions

DRY (Don't Repeat Yourself)

Best practices

Code improvements

Agile methodologies

Modularity

Code comments.

UI Frameworks

Portfolio

Software Dependencies

Efficiency Principles

Mobile-Friendly Design

File Management

Design and User Experience

Cross-Platform Commands

Modular Architecture

NestJS Guidelines

Modern Web Development

User Authentication

Business Logic

User Management

Software Development Lifecycle

Software Development Practices

Development Guidelines

Accessbility

Forms and Actions

Svelte Documentation

Extreme Programming

Software Maintenance.

Software Development Principles

Software Engineering Principles

Code Review Guidelines

State Management.

Web Optimization

Data Model Creation

WordPress plugin

readability

coding standards

code optimization

type hinting

Component-Based Architecture

Styling

Model Quantization

Web Development Tools.

Code Style Guides

Project Scalability

Component Organization.

Error Handling and Feedback

Firebase Best Practices

AI-powered Features

Native-like Features

Consistent Design System

Touch-Friendly UI

Responsive Typography

Animation and Transitions

Software Design Principles

Python Development

Python Coding Standards

Code Best Practices

Software Development Tools

JavaScript Code

Browser Development

Pseudocode Planning

TypeScript Development

Modern Web Practices

Accessibility in Web Design.

Svelte Components

Smart Contract Security

Library Usage

Application Security

Search Technologies.

Testing and Monitoring

Responsive Design.

Communication

Handling Uncertainty

Semantic Naming

Platform Thinking

Problem-Solving

Limitations

Response Format

Data Fetching and Rendering

Cloudflare Tools

TypeScript Coding Practices

Syntax and Formatting Conventions

Microservices

Documentation Best Practices

Technical Documentation

Orchestration

Collaboration

API best practices

code style and structure

user interface design

testing and debugging

publishing processes

development process

internationalization

security practices

naming conventions

Chrome extension development

Expo

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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/