What is a CLAUDE.md file and how does it work?

A CLAUDE.md file is a Markdown conventions file that Claude Code reads automatically when you start a session. It contains your project's folder structure, coding standards, naming conventions, and performance rules - so Claude writes consistent code from the first prompt. standarx generates this file for you in under 3 minutes with a guided wizard for React and Next.js projects.

How do I create cursor rules (.cursor/rules/*.mdc) for my project?

A .cursor/rules/*.mdc file tells Cursor's AI Composer exactly how to structure and write code for your project. With standarx, you select your framework (React or Next.js), choose a folder structure, toggle coding standards, and configure performance optimizations. The tool generates a clean .cursor/rules/*.mdc file you drop into your project root - Cursor reads it automatically.

Why does my AI coding assistant write messy or inconsistent code?

AI coding assistants like Claude Code, Cursor, and Codex produce inconsistent code because they don't know your project's specific conventions. Without explicit rules, the AI invents a different folder layout every time, mixes naming patterns, skips error handling, and ignores performance optimizations. The fix is giving your AI a conventions file (CLAUDE.md, .cursorrules, or AGENTS.md) that defines what "good" means for your stack. standarx generates these files automatically.

How do I stop AI from changing my folder structure every time?

AI coding agents change folder structures because they have no reference for your project's architecture. The solution is creating a rules file that explicitly defines your directory layout, what each folder is for, and how new files should be organized. standarx lets you configure a complete folder structure (with definitions for each directory), then generates a Markdown file your AI reads before writing any code - ensuring consistent structure across every session.

What coding standards should my AI agent follow for React and Next.js?

For React and Next.js projects, your AI agent should follow standards covering: named exports for components, TypeScript strict mode, proper error boundaries, semantic HTML, file size limits, import ordering, consistent naming conventions (PascalCase for components, camelCase for utilities), and accessibility (ARIA attributes, keyboard navigation). standarx provides a curated library of 30+ coding standards you can toggle on/off and customize, then generates a file your AI obeys.

What is "vibe coding" and how do I fix problems with it?

Vibe coding is when you build with AI tools (like Cursor or Claude Code) without setting explicit rules - you just "vibe" and let the AI decide everything. The problems: inconsistent folder structures, mixed coding patterns, missing optimizations, and unmaintainable code. The fix is giving your AI a conventions file before you start coding. standarx generates these files (CLAUDE.md, .cursorrules, AGENTS.md) so your AI follows consistent standards from line one - structured vibe coding.

Tool-Specific

CLAUDE.md for Next.js App Router

CLAUDE.md is the first thing Claude Code reads before writing a line. Get the structure right and Claude will write Next.js code that matches your project from day one.

Last updated: 2026-07-01

What CLAUDE.md does

CLAUDE.md is automatically read by Claude Code at the start of every session. It is the equivalent of onboarding documentation for your AI agent -it tells Claude your tech stack, folder structure, coding conventions, and project-specific rules before it touches any code. Without it, Claude falls back on generic React patterns that may conflict with your Next.js App Router setup.

What to include for App Router projects

App Router projects have specific patterns Claude should know: the server-first component model, how route groups work, where server-only code lives, and how data fetching is done without getServerSideProps. The CLAUDE.md should make these explicit so Claude doesn't revert to Pages Router assumptions.

Ready-to-use CLAUDE.md template

Drop this at the root of your Next.js project and customize the stack section.

CLAUDE.md

# Project Overview
This is a Next.js 16 App Router project using TypeScript.

## Tech Stack
- Framework: Next.js 16 (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- State: Zustand (client UI state only)
- Data Fetching: Next.js fetch() with cache options / React Query for client
- Auth: [your auth provider]
- Database: [your database/ORM]

## Folder Structure
```
src/
├── app/           # Routes only. Thin pages that import from features/.
├── components/    # Shared UI used across 2+ routes.
├── features/      # Business-domain modules (auth/, dashboard/, billing/).
│   └── [feature]/ # Each has: components/, hooks/, actions/, types/, index.ts
├── hooks/         # Shared client-side custom hooks (use* prefix).
├── lib/           # Server-only clients (Prisma, auth, Stripe). Import 'server-only'.
├── store/         # Zustand stores. UI state only -no server data.
├── types/         # Global TypeScript types and Zod schemas.
└── utils/         # Pure helpers usable on client and server.
```

## Component Rules
- Default to Server Components. Add "use client" only when needed (event handlers, browser APIs, hooks).
- Never use useEffect to fetch data. Fetch in async Server Components.
- Named exports only. No default exports for components.
- Props typed with interfaces. No implicit any.

## Naming Conventions
- Files: kebab-case. Components: PascalCase. Hooks: useCamelCase.
- Boolean variables: isX, hasX, canX prefix.
- Event handlers: handleX prefix. Prop callbacks: onX prefix.
- Constants: UPPER_SNAKE_CASE.

## Key Rules
- Do NOT create files in pages/ -this project uses App Router exclusively.
- Always add loading.tsx and error.tsx for route segments with async data.
- All external data validated with Zod at the boundary. Infer types with z.infer<>.
- Route handlers: app/api/[route]/route.ts. One file per HTTP method group.
- Server-only files must import 'server-only' at the top.

CLAUDE.md for Next.js App Router

What CLAUDE.md does

What to include for App Router projects

Ready-to-use CLAUDE.md template

Generate a tailored CLAUDE.md for your Next.js project