Capstone: Configure a Project

Time: 30-60 minutes | Skills: CLAUDE.md, Settings.json, Permissions, Allowlists

The Scenario

You are starting a brand new project: a personal recipe collection website. Before writing any code, you want to set up the project with proper Claude Code configuration so that Claude knows the project conventions, has the right permissions, and follows your rules from the very first line of code.

This capstone combines everything from Module 03:

Skill	How You Will Use It
CLAUDE.md	Define project context, conventions, and instructions
Settings.json	Configure project-level preferences and permissions
Permissions	Set up allow/deny rules appropriate for a web project

Setup

Create a new project folder:

mkdir C:\Users\YourName\recipe-site
cd C:\Users\YourName\recipe-site

Start Claude Code:

claude

Part 1: Create the CLAUDE.md

Ask Claude to help you write the project's CLAUDE.md file. Give it these requirements:

> Create a CLAUDE.md file for this project. Here is the context:
>
> - This is a personal recipe collection website
> - Built with HTML, CSS, and vanilla JavaScript (no frameworks)
> - All recipe pages go in a "recipes" folder
> - CSS files go in a "css" folder  
> - JavaScript files go in a "js" folder
> - Images go in an "images" folder
> - Use descriptive filenames like "chocolate-cake.html" not "recipe1.html"
> - All HTML files should include a link back to index.html
> - CSS should use a consistent color scheme: #2d5016 (dark green), #f5f0e1 (cream), #8b4513 (brown)
> - No external CDN links -- everything should work offline
> - Code comments should explain "why" not "what"

After Claude creates the file, review it:

> Read the CLAUDE.md and tell me if it covers all the requirements I listed

If anything is missing, ask Claude to add it:

> Also add a section about naming conventions: CSS classes should use kebab-case,
> JavaScript functions should use camelCase, and file names should use lowercase
> with hyphens.

Make It Your Own

The CLAUDE.md is for your project. If you disagree with something Claude wrote, change it. Add your own preferences. The best CLAUDE.md reflects how you actually want to work.

Part 2: Configure settings.json

Now set up the project-level settings. Ask Claude to help:

> Create a .claude/settings.json file for this project. I want:
> - Read, Glob, Grep, WebSearch, and WebFetch auto-approved (I don't want prompts for searching)
> - Edit and Write should ask me each time (I want to review all file changes)
> - Bash commands should ask me each time
> - Block any commands that delete files recursively or format drives
> - Use the dark theme

Review the file Claude creates:

> Read .claude/settings.json and make sure it matches what I asked for

Verify the JSON Is Valid

> Check if the settings.json file is valid JSON. Are there any syntax errors?

Claude will verify the file for you. Fix any issues before moving on.

Part 3: Test Your Configuration

Now test that everything works as expected.

Test 1: Auto-Approved Tools

> Find all HTML files in this project

This should work without a permission prompt because Glob is on your allow list. (There may not be any HTML files yet, and that is fine -- the point is that Claude did not ask permission to search.)

Test 2: Permission-Required Tools

> Create an index.html file with a basic recipe site homepage

Claude should ask for permission before creating the file because Write is not on your allow list. Review the proposed file and approve it.

Test 3: Denied Commands

> Run: del /s /q *.html

Claude should refuse or warn you that this command is blocked.

Test 4: CLAUDE.md Instructions

Now test whether Claude follows your CLAUDE.md:

> Create a recipe page for chocolate chip cookies

Check that Claude:

• Puts the file in the recipes folder (as specified in CLAUDE.md)
• Uses a descriptive filename like chocolate-chip-cookies.html
• Includes a link back to index.html
• Uses the color scheme from CLAUDE.md
• Does not use any external CDN links

> Read the recipe file you just created. Does it follow all the rules in CLAUDE.md?

If Claude missed any rules, point it out:

> The CLAUDE.md says to use the color #2d5016 for the main green, but you used
> a different shade. Please fix that.

Part 4: Refine Your Configuration

Based on your testing, you might want to adjust things:

Adjust CLAUDE.md

> Add a rule to CLAUDE.md that every recipe page should have a "Prep Time"
> and "Cook Time" section at the top

Adjust Permissions

If you found the Edit/Write prompts annoying for HTML files, you could adjust:

> I'm comfortable letting Claude edit HTML and CSS files without asking.
> Update the settings.json to allow Edit and Write for this project.

Or if you want to keep the prompts:

> Actually, I like reviewing changes. Keep the current permission setup.

Create a .gitignore

Good practice for any project:

> Create a .gitignore file that excludes .env files, node_modules, and
> any .tmp files. Also exclude the .claude folder since that's my personal
> configuration.

Part 5: Document and Verify

Finish up by verifying everything:

> Show me the complete project structure
> Read CLAUDE.md one more time and confirm it's comprehensive
> Read .claude/settings.json and confirm it's valid and complete
> Create one more recipe page (banana bread) and verify it follows all the rules

Self-Assessment

After completing the capstone, check off each item:

• Created a CLAUDE.md that describes the project, folder structure, naming conventions, and coding standards
• CLAUDE.md includes specific rules Claude can follow (color scheme, file locations, link requirements)
• Created a project-level .claude/settings.json with appropriate permissions
• Read-only tools are auto-approved for faster searching
• Dangerous commands are blocked in the deny list
• Tested that auto-approved tools work without prompts
• Tested that non-listed tools still ask for permission
• Tested that denied commands are blocked
• Verified Claude follows CLAUDE.md instructions when creating files
• Created a .gitignore for the project

Going Further

Want more practice? Try these extensions:

• Add a style-guide section to CLAUDE.md with HTML template snippets Claude should follow
• Set up a global settings.json at C:\Users\YourName\.claude\settings.json with your baseline preferences
• Create a second project (like a blog or portfolio) with a completely different CLAUDE.md and settings, and see how Claude adapts
• Try running Claude in plan mode (claude --plan) and compare the experience to the default mode

---

Help Us Improve

How was this lesson? Take 2 minutes to share your feedback — it helps us make the tutorials better for everyone.

Give Feedback →