Frontend CLAUDE.md Templates

Why frontend projects benefit most from a well-tuned CLAUDE.md

Frontend has more moving parts — and more opinionated per-framework conventions — than almost any other part of the stack. A single page in a modern web app can involve four rendering models (SSR, SSG, RSC, CSR), three or four state systems (URL state, server state, form state, client state), a design system with hundreds of tokens, a styling framework with its own directives, and a routing convention with rules about where files can live. That's a lot for Claude to hold in mind unprompted. A well-tuned CLAUDE.md carries that context every session so Claude arrives already up-to-speed.

The 11 templates on this page are calibrated for the frameworks in current use in 2026: the two Next.js majors, Remix, Astro, SvelteKit, Nuxt, Angular, Solid, Qwik, plus plain React + Vite for SPA work. Each is refreshed within 48 hours of a meaningful framework release and includes the current-version idioms, gotchas, and Do NOTs specific to that framework.

The five sections every frontend CLAUDE.md needs

1. Rendering model rules

The Server/Client boundary is the single most consequential decision in a modern React app, and getting it wrong is the single most common Claude Code frontend mistake. Every Next.js 15 or Remix template on this page opens with an explicit posture: "Server Components by default; add 'use client' only when a specific interactive dependency requires it." The rule doesn't need to be elaborate — it just needs to be present, so Claude reaches for the server-side option first.

2. Styling system rules

Tailwind projects, styled-components projects, CSS Modules projects, and vanilla CSS projects all need different guidance. Tell Claude explicitly what your project uses, whether utility classes are preferred over component styles, and which design tokens exist. For Tailwind projects specifically, name the design system if you have one (shadcn, Untitled UI, custom) so Claude reaches for the right component patterns.

3. State management defaults

Modern frontends usually have three or four state systems: URL state (searchParams or router state), server state (TanStack Query, SWR, tRPC, RSC), form state (React Hook Form, Conform, framework-native), and client state (Zustand, Redux, Context). Tell Claude which system handles which kind of state so it doesn't reach for the wrong one. A one-line rule like "URL state via searchParams; server state via TanStack Query; form state via React Hook Form; client state via Zustand only when needed" is enough.

4. File conventions

Where components live, where hooks live, where utilities live, and what naming pattern is used. Frontend projects fragment into many small files, and Claude will happily invent new locations if not told the existing convention. A five-line directory map at the top of CLAUDE.md prevents that.

5. Version-specific gotchas

Next.js 15 changed caching defaults. React 19 shipped new hooks. Angular 18 added Signals. These changes are recent enough that Claude sometimes reaches for pre-change patterns. Explicit Do NOTs in the CLAUDE.md close the gap. Every template here documents its framework's most-recent-major gotchas.

Anatomy of the Next.js 15 template

Under 50 lines and it covers every decision Claude would otherwise guess at. That's the template pattern: dense, specific, opinionated.

Templates + framework agents: the frontend trifecta

A CLAUDE.md tells Claude about your project. A framework subagent tells Claude about the framework itself. Install both for maximum leverage on frontend work:

• Next.js 15 template — project conventions loaded every session.
• nextjs-15-expert subagent — deep framework expertise on demand.
• Optional: matching testing template for the framework-specific test setup (Playwright config, Vitest workspace patterns).

The pair produces frontend code that reads like a senior on the team wrote it — not because Claude is different, but because it now has the context it always needed.