Introduction

A well-designed workflow can dramatically improve your productivity with Claude Code. This tutorial walks you through creating your first automated workflow.

Setting Up Your Project

Start by creating a CLAUDE.md file in your project root. This file tells Claude Code about your project’s conventions:

# My Project

## Tech Stack
- Language: TypeScript
- Framework: React
- Testing: Vitest

## Conventions
- Use functional components
- Prefer named exports
- Write tests for all utilities

The Development Loop

A typical Claude Code workflow follows this pattern:

  1. Describe the task - Be specific about what you want to build
  2. Review the plan - Claude will outline its approach
  3. Watch the implementation - Code is written in real-time
  4. Test and iterate - Request changes or fixes

Example: Adding a Feature

Let’s add a dark mode toggle to a React app:

User: Add a dark mode toggle to the header. It should:
- Use system preference as default
- Persist choice to localStorage
- Apply a 'dark' class to the body

Claude Code will:

  1. Create the toggle component
  2. Add the theme logic
  3. Update the header
  4. Add CSS variables for theming

Automating Commits

With the git-local MCP server, you can commit directly:

User: Commit these changes with a descriptive message

Claude analyzes the diff and creates an appropriate conventional commit.

Tips for Beginners

  1. Start small - Begin with single-file changes
  2. Be specific - Detailed prompts get better results
  3. Use context - Reference existing code patterns
  4. Iterate - Refine through conversation

Next Steps