When you work with Claude Code, organizing projects well makes a huge difference. Claude works best when it has a clear context, consistent structure, and explicit instructions.
Below are 5 integral principles you should follow to create an excellent project structure:
- Place CLAUDE.md at the root CLAUDE.md is a critical file that provides project-specific context for Claude Code. It serves an onboarding guide for AI to your project requirements and codebase.
Claude automatically reads the CLAUDE.md file at start.
Here is an example of what to include in this file:
`# Project Overview
Short description of the project.
Architecture
Explanation of major components.
Tech Stack
Next.js
TypeScript
ShadCN UI
Tailwind
Coding Conventions
- Use TypeScript strict mode
- Prefer functional components
- Avoid default exports
Folder Structure
Explanation of directories.
Commands
- npm run dev
- npm run build
Important Rules
- Performance requirements
- Accessibility requirements
- Testing strategy`
I’ve shared best practices for creating CLAUDE.mdin the following article:
The file should be placed in the root folder of your project
my-project/
├── CLAUDE.md
├── package.json
├── src/
├── docs/
└── scripts/
Quick note: If you have an existing codebase in your project, you don’ t have to start from scratch when crafting CLAUDE.md. Instead, you can type /init command in Claude Code, and it will create a first draft of this file for you
/init
- Split large CLAUDE.md instructions into imported files CLAUDE.md file can grow fast. Because Claude Code reads this file all the time, and it’s added to the context, it’s not recommended to have very large files. As a rule of thumb, if you notice that the file has more than 200 lines of text, you should split it into a few files.
Claude Code supports imports inside CLAUDE.md
@path/to/import.md
All you need to do is provide a context for when Claude should perform the import. Here is how our updated file CLAUDE.mdwith add imports will look like:
`# CLAUDE.md
Architecture
For project architecture check @claude/architecture.md
Coding Conventions
For coding conventions check @claude/coding_conventions.md
UI Guidelines
For UI guidelines check @claude/ui_guidelines.md`
And in the project directory, the file structure will be:
CLAUDE.md
claude/
architecture.md
coding_conventions.md
ui_guidelines.md
This structure will be beneficial both for you and for AI because:
Its easier to maintain (if you want to modify something)
faster Claude context loading
reusable across projects (fits all types of web-dev projects)
- Add a /docs folder for context If you want to help Claude better understand your project and its nuances, you want to add docs/ folder. Claude reads documentation in markdown format extremely well.
For example, you can add information about upcoming features you plan to add to your product this quarter, or about the current API calls your product provides.
docs/
project_roadmap.md
api.md
And now you can prompt Claude to check docs when implementing a certain feature (i.e., health check for your web service)
Read docs/api.md and implement our service health monitor available via API calls.
- Add a /workflows folder for workflows If you want Claude to follow a specific workflow when performing a task, you should put such workflows in a dedicated directory. For example, for web-dev project, this can be
claude/
worfklows/
build-new-component.md
code-refactoring.md
write-auto-tests.md
migrate-db.md
And here is how the workflow build-new-component.mdcan looks (note that this is just an example, the actual workflow can be more complex):
`# build-component.md
When you are asked to create a new component for a web service,
create it with following requirements:
- TypeScript
- ShadCN UI
- accessible
- mobile-first
- Tailwind styling`
And you can call it like:
Follow claude/prompts/build-component.md to create a dashboard card
The great thing about this structure is that you can trigger one workflow from another. For example, if Claude codes a new component (following the build-new-component.md) you can trigger writing auto tests that will validate this new code right from the file build-new-component.md
build-component.md
`When you are asked to create a new component for a web service,
create it with following requirements:
- TypeScript
- ShadCN UI
- accessible
- mobile-first
- Tailwind styling
Make sure to write auto tests for this component following the
@workflows/write-auto-tests.md`
- Use a /tools folder for Claude service tasks The great thing about Claude Code is that it will write specific service scripts to streamline workflows. For example, if you ask it to organize an operation of database migration (that you articulate in the migrate-db.md), Claude will likely write a Python script that will handle some actions. I suggest keeping all service scripts in one folder named ‘/tools.’
tools/
migrate-db.py
seed-data.py
export-data.py
Quick note: You might wonder why the folder is named /tools and not /scripts. If you are in a web-dev project, you typically associate the name ‘script’ with front-end or back-end scripts that your service uses, not service tools you use. Thus, I use this naming to minimize confusion when project teams check the folder.
Top comments (0)