I Built Vibe Stack 22 Cursor Rules To Prevent Next Js 15 Ai

Cursor Rules Examples: 20+ Templates for Every Stack Copy-paste cursor rules with security patterns built in. Ready for Next.js, React, Python, Go, and more. Below are 20+ ready-to-use cursor rules templates organized by stack and use case. Each template includes security rules that prevent common vulnerabilities in vibe coded projects. Copy the template that matches your stack, customize for your project, and paste into .cursorrules or .cursor/rules/ . Browse templates by category Select a category to browse templates.

Each includes security patterns from our vulnerability guides - SQL injection prevention, authentication checks, input validation, and more.

Frontend Framework Templates false false false false Next.js 14 App Router Server Components, Server Actions, TypeScript strict mode # Next.js 14 App Router Project ## Tech Stack - Next.js 14 with App Router - TypeScript in strict mode - React 18 Server Components - Tailwind CSS - Supabase for backend ## Architecture Patterns - Server Components by default - Client Components only for interactivity (hooks, events) - Server Actions for mutations (use 'use server') - Route handlers in app/api/ for external integrations ## File Organization ``` app/ âââ (auth)/ # Route group for auth pages âââ (dashboard)/ # Protected routes âââ api/ # Route handlers âââ layout.tsx # Root layout âââ page.tsx # Home page components/ âââ ui/ # Reusable UI âââ features/ # Feature-specific lib/ âââ db.ts # Database client âââ auth.ts # Auth helpers âââ utils.ts # Utilities ``` ## Security Rules - NEVER use template literals in database queries - ALWAYS validate input with Zod in Server Actions - Check authentication before processing any Server Action - Use parameterized queries: `$1, $2` not `${var}` - Never expose server secrets in Client Components - Always use HTTPS for external API calls ## Code Patterns ### Server Component (Default) ```tsx // No 'use client' = Server Component export default async function Page() { const data = await getData() // Direct server call return <div>{data}</div> } ``` ### Client Component (When Needed) ```tsx 'use client' import { useState } from 'react' export function Counter() { const [count, setCount] = useState(0) return <button onClick={() => setCount(c => c + 1)}>{count}</button> } ``` ### Server Action Pattern ```tsx 'use server' import { auth } from '@/lib/auth' import { z } from 'zod' const schema = z.object({ title: z.string().min(1) }) export async function createPost(formData: FormData) { const session = await auth() if (!session) throw new Error('Unauthorized') const input = schema.parse(Object.fromEntries(formData)) // Database operation here } ``` React + Vite SPA Client-side React with modern tooling # React + Vite SPA Project ## Tech Stack - React 18 with Vite - TypeScript strict mode - React Router v6 - TanStack Query for data fetching - Tailwind CSS ## Code Conventions - Functional components only - Custom hooks for reusable logic - Named exports (not default exports) - Collocate related files - Props interfaces in same file ## Component Structure ```tsx // components/Button/Button.tsx interface ButtonProps { variant: 'primary' | 'secondary' children: React.ReactNode onClick?: () => void } export function Button({ variant, children, onClick }: ButtonProps) { return ( <button className={styles[variant]} onClick={onClick}> {children} </button> ) } ``` ## Security Rules - Sanitize ALL user input before rendering - Never use dangerouslySetInnerHTML with user data - Validate API responses before use - Store tokens in httpOnly cookies (not localStorage) - Use Content Security Policy headers ## Data Fetching Pattern ```tsx // hooks/useUser.ts export function useUser(id: string) { return useQuery({ queryKey: ['user', id], queryFn: () => fetchUser(id), staleTime: 5 * 60 * 1000, }) } ``` ## Anti-Patterns to Avoid - Don't store sensitive data in localStorage - Don't use inline event handlers in JSX - Don't use array index as key for dynamic lists - Don't mutate props or state directly SvelteKit Full-stack Svelte with SSR and API routes # SvelteKit Project ## Tech Stack - SvelteKit 2.x with Svelte 5 - TypeScript - Supabase / Prisma for database - Tailwind CSS ## Svelte 5 Runes (Required) - Use $state() for reactive state - Use $derived() for computed values - Use $effect() for side effects - NO let for reactive declarations ## File Structure ``` src/ âââ routes/ â âââ +page.svelte # Pages â âââ +page.server.ts # Server load/actions â âââ +layout.svelte # Layouts â âââ api/ # API routes âââ lib/ â âââ components/ # Reusable components â âââ server/ # Server-only code â âââ utils/ # Shared utilities âââ app.d.ts # Type definitions ``` ## Security Rules - Validate ALL form data in +page.server.ts actions - Use parameterized queries in database operations - Check authentication in load functions - Never expose secrets in +page.ts (client-accessible) - Use locals.user from hooks for auth state ## Load Function Pattern ```typescript // +page.server.ts export const load: PageServerLoad = async ({ locals }) => { if (!locals.user) { redirect(303, '/login') } const data = await db.query('SELECT * FROM posts WHERE user_id = $1', [locals.user.id]) return { posts: data } } ``` ## Form Action Pattern ```typescript // +page.server.ts export const actions = { create: async ({ request, locals }) => { if (!locals.user) return fail(401) const form = await request.formData() const schema = z.object({ title: z.string().min(1) }) const result = schema.safeParse(Object.fromEntries(form)) if (!result.success) return fail(400, { errors: result.error.flatten() }) await db.insert(posts).values({ ...result.data, userId: locals.user.id }) return { success: true } } } ``` ## Svelte 5 Component Pattern See svelte.dev/docs for component syntax.

Key patterns: - Use $state() for reactive variables - Use $derived() for computed values - Use $effect() for side effects - Event handlers: onclick={() => action()} - Two-way binding: bind:value={variable} How to use these cursor rules templates Choose Your Template Find the template that matches your tech stack. Most projects need one frontend template plus the universal security rules. Copy and Customize Click "Copy" and paste into .cursorrules in your project root. Update the tech stack section to match your specific versions and libraries.

Add Security Rules Combine with a security template. Create .cursor/rules/security.md with the Universal Security Rules template for comprehensive protection. Test and Iterate Ask Cursor to generate code and verify it follows your rules. Refine rules based on what patterns the AI keeps missing. Why every template includes security rules AI coding tools generate functional code quickly, but they often skip security patterns. The awesome-cursorrules community repository (36k+ stars) provides excellent framework templates, but many lack security guidance. Our templates are security-first because vibe coders need protection from the start.

Each template includes rules that prevent: - SQL Injection - Parameterized query patterns - Hardcoded Secrets - Environment variable patterns - Missing Authentication - Auth check patterns - IDOR - Ownership verification patterns - XSS - Input sanitization patterns Combining multiple cursor rules templates Most projects benefit from combining templates.

Use the .cursor/rules/ folder structure to organize multiple rule files: project/ âââ .cursor/ â âââ rules/ â âââ core.md # Framework template (Next.js, etc.) â âââ security.md # Universal security rules â âââ typescript.md # TypeScript strict rules â âââ testing.md # Testing patterns âââ src/ âââ package.json Cursor merges all rules in the folder. Use frontmatter to control when each rule file applies: --- description: "TypeScript patterns for all .ts and .tsx files" alwaysApply: false globs: ["**/*.ts", "**/*.tsx"] --- # TypeScript Rules ...

Frequently asked questions Where do I copy these cursor rules to? Create a .cursorrules file in your project root, or use the newer .cursor/rules/ folder with separate .md files. Both approaches work - the folder structure offers more organization for larger projects. Cursor automatically detects and applies these rules to all AI interactions. Can I combine multiple cursor rule templates? Yes. Copy sections from multiple templates into one file, or split them into separate files in .cursor/rules/ (e.g., security.md, typescript.md, nextjs.md). Cursor merges all applicable rules.

Just remove duplicate sections if you combine templates. How do I know if my cursor rules are working? Ask Cursor to generate code that your rules should affect. For example, if you have SQL security rules, ask it to write a database query. Check if it uses parameterized queries instead of template literals. You can also ask "what rules are you following?" to verify. Should I include both Do and Dont patterns in cursor rules? Yes, absolutely. Showing anti-patterns helps AI avoid common mistakes.

Use clear markers like "SECURE" and "VULNERABLE" or checkmarks and X marks. The contrast makes the correct pattern more memorable for the AI and helps catch errors during code review. How often should I update my cursor rules? Review quarterly or when you adopt new technologies. Update immediately if you discover a security pattern the AI keeps getting wrong. Version control your rules alongside your code so changes are tracked and the team stays aligned. What is the awesome-cursorrules repository?

The awesome-cursorrules GitHub repository (github.com/PatrickJS/awesome-cursorrules) is a community collection with over 36,000 stars and 150+ rule templates. It includes rules for various frameworks, languages, and use cases. Our examples here include security rules that the community collection often lacks. Related resources External resources - Cursor Official Documentation - awesome-cursorrules (36k+ stars) - Community collection - OWASP Top 10 - Security vulnerability reference

People Also Asked

• I built Vibe-Stack: 22+ Cursor Rules to prevent Next.js 15 AI ...
• I catalogued every AI hallucination in Next.js 15 — then I built a ...
• GitHub - vibestackdev/vibe-stack: 29 .mdc architecture rules that ...
• Next.js 15 + Supabase Architecture Rules (Vibe Stack) | Cursor ...
• Cursor Rules Examples: 20+ Templates for Every Stack