DEV Community

Cover image for Claude Code Project Structure Best Practices
irfanarshad
irfanarshad

Posted on

Claude Code Project Structure Best Practices

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:

  1. 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

  1. 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)

  1. 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.

  1. 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`

  1. 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)