The Claude Code Workflow

Interactive Workflow Diagram

Click on any step to learn what happens at that stage:

Workflow Language Matters

What Makes This Special

Unlike GitHub Copilot (which autocompletes) or ChatGPT (which just answers questions), Claude Code:

• Works on your actual project files
• Coordinates changes across multiple files
• Shows you what it will do before doing it
• Lets you modify the plan mid-conversation
• Maintains your code style and follows your CLAUDE.md rules
• Helps you understand what changed and why

Deep Dive: Each Step Explained

Step 1: Developer Gives Task

You communicate in plain English, not code. The quality of your request affects the quality of the response.

Step 2 & 3: Claude Reads & Proposes

This is where Claude's intelligence shines. It doesn't just look at one file—it understands your entire project context.

Decision Points: The Heart of Control

The yellow diamonds are where you maintain control. Here's what happens at each:

The Power of CLAUDE.md

This is THE SECRET to getting consistent, high-quality results from Claude Code. Think of it as your project's constitution—rules Claude must follow.

# Hospital Management System

## Project Overview
HIPAA-compliant patient records system
Stack: React 18, Node.js 20, PostgreSQL, TypeScript

## Code Style Rules
- **Language**: TypeScript for ALL new code
- **Functions**: Must have JSDoc comments
- **Async**: Use async/await, NOT .then()
- **Logging**: NO console.log in production
- **Naming**: camelCase for functions, PascalCase for components

## File Structure
/src
  /components - React components (functional only)
  /hooks - Custom React hooks
  /api - API endpoint handlers
  /models - Database schemas (Prisma)
  /utils - Pure utility functions
  /tests - Test files (required for all features)

## Testing Requirements
- Every new feature MUST have tests
- Run `npm test` before committing
- Minimum 80% code coverage
- Use React Testing Library for components

## Security Rules
- All patient data encrypted at rest
- Never log PHI (Protected Health Information)
- All API calls require authentication
- Use environment variables for secrets

## Git Workflow
- Branch naming: `feature/description` or `fix/description`
- Commit messages: Imperative mood ("Add", not "Added")
- Create PRs from feature branches to `develop`
- Never commit directly to `main`

## API Conventions
- RESTful endpoints
- Use proper HTTP status codes
- Return errors in consistent format:
  ```json
  {
    "error": "Error message",
    "code": "ERROR_CODE"
  }
  ```

## Database
- Use Prisma migrations for schema changes
- Never do raw SQL queries
- All queries must use parameterization
- Add indexes for frequently queried fields

## Don't Do This
- Don't use `any` type in TypeScript
- Don't bypass authentication checks
- Don't store passwords in plain text
- Don't use inline styles in React

Conversational Flow: Real Examples

Claude Code is conversational, not transactional. Here's how real interactions unfold:

Best Practices & Recommendations

Common Pitfalls & How to Avoid Them

Advanced Tips for Power Users

Measuring Success

You're using Claude Code effectively when:

• You understand every change before it's committed
• Your commit history is clean and meaningful
• Claude follows your project conventions consistently
• You're learning from Claude's implementations
• You're moving faster than coding alone, but not blindly
• You catch issues during review, not after deployment

Now that you understand the workflow deeply, let's see it in action! Continue to "Your First Run" to walk through a complete real-world example.

Terminal Basics

What is a Terminal?

A terminal is a text-based interface where you type commands instead of clicking. Think of it as having a conversation with your computer using precise instructions.

How to Open a Terminal

Essential Commands (Only 3!)

Quick Cheat Sheet

Folder Navigation

Understanding File Structure

📁 Home
├── 📁 Documents
│   └── 📁 Projects
│       ├── 📁 my-website  👈 You want to be HERE
│       │   ├── 📄 index.html
│       │   ├── 📄 style.css
│       │   └── 📄 script.js
│       └── 📁 another-project
├── 📁 Desktop
└── 📁 Downloads

Navigating to Your Project

Shortcut: Open Terminal in Folder

Your First Claude Code Experience

1Navigate to Your Project

my-website/
├── index.html
├── about.html
├── style.css
└── script.js

2Give Claude Your Task

3Modify the Plan (Optional)

4Claude Makes Changes

5Test Before Committing

You test in the browser... it works perfectly!

6Commit the Changes

Common Follow-Up Commands

Tips for Success

• Be specific: Good: "Add contact form with name, email, message" / Bad: "add a form"
• Test everything: Always verify changes work before committing
• Use CLAUDE.md: Document your project conventions so Claude follows them
• Ask questions: Claude can explain code, not just write it
• Iterate: Refine through conversation—perfection comes from dialogue