.cursorrules Cursor AI prompt file: TypeScript, Next.js, Tailwind

TypeScript Next.js Tailwind .cursorrules prompt file

Elie Steinbock

NEW

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

About .cursorrules prompt file

What you can build

TypeScript Code Playground: An interactive online platform where users can write, run, and share TypeScript code snippets, complete with ready-to-use examples in functional and declarative programming styles.
Next.js Starter Kit: A boilerplate for creating Next.js applications with pre-configured TypeScript, React, and server actions. Includes examples of Turborepo, Tailwind CSS, and Shadcn UI to help developers quickly start projects with best practices.
TypeScript Learning Platform: An educational app that provides courses and tutorials on TypeScript, focusing on modularizing code with functional programming, TypeScript server actions, and effective use of libraries like React Hook Form with Zod validation.
UI Component Library: A repository of commonly used Shadcn UI and Tailwind components structured according to best practices with TypeScript, which can be easily integrated into apps using Radix UI for accessibility.
TypeScript API Service Generator: A tool that generates ready-to-use backend API services in TypeScript using Node.js and Prisma, incorporating server actions, data validation with Zod, and PostgreSQL integration.
Responsive Design Showcase: A website that hosts a collection of responsive design examples created with Tailwind CSS, emphasizing a mobile-first approach and illustrating best practices for component styling and structure.
Zod Validation Assistant: An online tool that assists developers in creating robust type definitions and validation schemas using Zod, offering instant feedback and validation suggestions to ensure type safety.
React Form Builder with TypeScript: A drag-and-drop form builder tool that allows developers to create forms with React Hook Form integrations, using TypeScript and Zod for validation, and ready to be deployed in Next.js applications.
Image Optimization Guide: A web resource providing extensive examples and guides on using the next/image package effectively within Next.js projects to optimize image loading and performance.
Error Handling Workshop: An educational platform focused on teaching developers how to handle errors gracefully in server actions, with live code samples and interactive sessions demonstrating the use of toastError and toastSuccess.

Benefits

Adopts a consistent file and folder structure supporting modularity and clarity in codebase organization.
Integrates seamlessly with a range of modern tools and libraries to streamline development workflows and ensure code quality.
Enforces robust TypeScript practices with Zod validation and React Hook Form for type-safe, validated server actions.

Synopsis

Developers building robust, full-stack web applications with a modern tech stack can utilize this prompt to create efficient TypeScript-based solutions following best practices.

Overview of .cursorrules prompt

The .cursorrules file provides a comprehensive guide for developers using technologies like TypeScript, Node.js, Next.js, and others to maintain code quality and consistency across projects. It emphasizes writing concise, technical TypeScript code with clear examples, favoring functional programming patterns, avoiding code duplication, and using descriptive variable names. The file specifies best practices for file and component organization, using Turborepo with pnpm workspaces, and the structure of Next.js server actions. It integrates Tailwind for responsive design and recommends using packages like `swr` and React Hook Form with Zod for API requests and data validation. Additionally, it advises using named exports, type-safe server actions, error handling, and enforcing a mobile-first design approach.

TypeScript Next.js Tailwind .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

React TypeScript Care Project .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Node React Tailwind Guide .cursorrules prompt file

Shopify Polaris Prisma .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components