Browse

SWR .cursorrules prompt files

SWR (Standing Wave Ratio) measures the impedance matching of a load to a transmission line, optimizing signal transmission and minimizing power loss.

Filters

All

React

Tailwind CSS

Filters

Tech

Clear

tokio::sync::oneshot

async programming

tokio-postgres

Result

tokio::time::sleep

tokio::sync::mpsc

tonic

json

React JSX

aiohttp

tenacity

lxml

1. requests

BeautifulSoup

React hooks

SecureStore.

React Navigation

Ignite

MobX State Tree

localStorage

Firestore

NextAuth

LLM

NLP

sphinx

Nodejs

Puppeteer 🤔

Reactjs

OpenAI GPT-3

SocketIO

skimage.restoration

tqdm.notebook

nibabel

os

image_utils

jupyter

SimpleITK

totalsegmentator

Airbnb’s JavaScript Style Guide

serverless architecture

JSON-ld

DOM manipulation

CSS-Variables

E-L-D loading pattern

vanilla JavaScript

C++

LDoc

Emscripten

Lua

Defold

i18next

Turbo

react-i18next

nativewind

1. React

class-validator

jest

Logger

Client Components

Server-Side Rendering (SSR)

Next.js Image component

App Router

caching

1. Next.js 14

error boundaries

Static Site Generation (SSG)

revalidation

`fetch` API

Java Concurrency utilities

Java Platform Module System

JavaDocs

ConcurrentHashMap

JUnit

Functional Interfaces

ArrayList

Lambda Expressions

IDEs

HashMap

try-with-resources

three.js

jsonwebtoken

Nodemailer

EJS

OpenAPI 3.0

Swagger-ui-express

Sinon

Winston

Bunyan

Sequelize

MercadoPago

supertest

PM2

New Relic

ELK stack

APIs

MercadoPago SDK

Datadog

Swagger-jsdoc

Google Cloud

Helmet

TypeScript Next.js Tailwind .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Prisma, PostgreSQL, Turborepo, Shadcn UI, Radix UI and Tailwind.

Write concise, technical TypeScript code with accurate examples.
Use functional and declarative programming patterns; avoid classes.
Prefer iteration and modularization over code duplication. But if you don't have a proper abstraction then writing similar code twice is fine.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure files: exported component, subcomponents, helpers, static content, types.
Use kebab case for route directories (e.g., api/hello-world/route). Use PascalCase for components (eg. components/Button.tsx)
Shadcn components are in components/ui. All other components are in components/.
Colocate files in the folder they're used. Unless the component can be used in many places across the app. Then it can be placed in the components folder.
We use Turborepo with pnpm workspaces.
We have one app called web in apps/web.
We have packages in the packages folder.
We have Next.js server actions in the apps/web/utils/actions folder. Eg. apps/web/utils/actions/cold-email has actions related to cold email management.
Favor named exports for components.
Use TypeScript for all code.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use Shadcn UI and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Use next/image package for images.
For API get requests to server use the swr package. Example:
```typescript
const searchParams = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
/api/user/planned/history?page=${page}
);
```
Use the Loading component. Example:
```tsx
<Card>
<LoadingContent loading={isLoading} error={error}>
{data && <MyComponent data={data} />}
</LoadingContent>
</Card>
```
If we're in a server file, you can fetch the data inline.
For mutating data, use Next.js server actions.
Use isActionError with toastError and toastSuccess. Success toast is optional. Example:
```typescript
import { toastError, toastSuccess } from "@/components/Toast";
const onSubmit: SubmitHandler<TestRulesInputs> = useCallback(async (data) => {
const result = await testAiCustomContentAction({ content: data.message });
if (isActionError(result)) {
toastError({
title: "Error testing email",
description: result.error,
});
} else {
toastSuccess({ description: "Saved!" });
}
}, []);
```
Implement type-safe server actions with proper validation.
Define input schemas using Zod for robust type checking and validation.
Handle errors gracefully and return appropriate responses.
Ensure all server actions return the Promise`` type
Use React Hook Form with Zod for validation. The same validation should be done in the server action too. Example:
```tsx
export const ProcessHistory = () => {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<ProcessHistoryOptions>({
resolver: zodResolver(processHistorySchema),
});
const onSubmit: SubmitHandler<ProcessHistoryOptions> = useCallback(
async (data) => {
const result = await processHistoryAction(data.email);
handleActionResult(result, Processed history for ${data.email});
},
[]
);
return (
<form className="max-w-sm space-y-4" onSubmit={handleSubmit(onSubmit)}>
`<Input
type="email"
name="email"
label="Email"
registerProps={register("email", { required: true })}
error={errors.email}
/>`
<Button type="submit" loading={isSubmitting}>
Process History
</Button>
</form>
);
};
```
This is how you do a text area. Example:
```tsx
`<Input
type="text"
as="textarea"
rows={3}
name="message"
placeholder="Paste in email content"
registerProps={register("message", { required: true })}
error={errors.message}
/>`
```
This is the format of a server action. Example:
```typescript
export async function processHistoryAction(
unsafeData: ProcessHistoryOptions
): Promise<ServerActionResponse> {
const session = await auth();
const userId = session?.user.id;
if (!userId) return { error: "Not logged in" };
const data = processHistorySchema.safeParse(unsafeData);
if (!data.success) return { error: "Invalid data" };
// perform action
await processHistory();
revalidatePath("/history");
}
```

stack:

TypeScript Next.js Tailwind .cursorrules prompt file

Elie Steinbock

3

NEW

TypeScript Node.js React Next.js .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Magic 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.
UI and Styling
Use Shadcn UI, Magic UI, Radix, and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Data Fetching
Use SWR for data fetching.
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 Rendering, and Routing.
Other Rules need to follow:
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, up to date, bug free, fully functional and working, secure，performant and efficient code.
Focus on readability over being performant.
Fully implement all requested functionality.
Leave No todo's, placeholders or missing pieces.
Be sure to reference file names.
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.