CLAUDE.md Starter For A Small Demo Project
An exclusive resource for students of Arun's Claude Code Course.
The reason the demo produced plain HTML, CSS and JavaScript instead of a React app is that a file called CLAUDE.md was already sitting in the folder, telling Claude what to prefer.
Save this as CLAUDE.md in the root of a new project folder. Claude Code reads it before it plans anything, which is how it makes decisions that fit your project instead of guessing.
This is the small version, the one that fits a demo or a first project. Project instruction files get a whole part of the course to themselves later on.
# Project preferences ## Stack - For small demos, prefer plain HTML, CSS and vanilla JavaScript. - No frameworks like React or Vue unless I ask for one. - No build step. What we write is what the browser receives. ## Structure - Keep a clean folder structure: separate folders for styles, scripts and images. - Name the entry file index.html. ## Code style - Semantic HTML. Use header, nav and article rather than divs everywhere. - Mobile-first CSS. Get the phone screen right, then scale up. - Write code I can read. Favour the obvious version over the clever one. ## Before you start - Read the existing files before planning any change. - Tell me the plan in plain words before you write anything. ## When you finish - Tell me which files you changed and what each change does.
Change every line of it. The point is not these preferences. The point is that Claude reads yours first.
See Where You Stand
This resource is one piece of a much bigger system.
Take the free Claude Code Readiness Quiz. It is 15 short situations, scored out of 100, and it tests how you handle a job rather than what you know about a tool, so you can take it without ever having opened Claude Code.
Take the Claude Code Readiness Quiz →15 situations · Scored out of 100 · Free