Claude Code

Internal Training Session

December 2025

Today's Journey

🎯 Project Showcase See the magic

📚 Must Know Essential skills

🚀 Intermediate Level up

⚡ Advanced What's possible

❓ Q&A Your questions

LIVE DEMO

Demo 1: Color Spectrum

Building a complete color system from scratch

"Generate a comprehensive color palette with semantic naming"

DEMO SCRIPT - Color Spectrum:

1. Open the Color Spectrum project: cd color-spectrum && claude
2. Show the initial state of the project
3. Demonstrate Claude generating color scales, variants, and accessibility-compliant combinations
4. Show how Claude understands color theory and applies it
5. Walk through the generated palette structure
6. Accept the changes and show the result

KEY POINT: "Claude understands design systems and can generate production-ready color tokens."

HIGHLIGHT: Show the automatic contrast ratio calculations for accessibility.

LIVE DEMO

Demo 2: Admin Project

Building admin interfaces at speed

"Create an admin dashboard with user management and analytics"

DEMO SCRIPT - Admin Project:

1. Open the Admin project: cd admin-project && claude
2. Show the existing admin structure
3. Ask Claude to add a new feature or enhance existing functionality
4. Demonstrate how Claude understands the admin patterns already in place
5. Show multi-file changes across components, routes, and API calls
6. Walk through how Claude maintains consistency with existing code style

KEY POINT: "Claude learns your project's patterns and applies them consistently."

HIGHLIGHT: Show how Claude handles CRUD operations, data tables, forms, and validation - all following your existing conventions.

LIVE DEMO

Demo 3: Product Ready Designs

From mockup to production-ready code

DEMO SCRIPT - Product Ready Designs:

1. Open the designs project: cd product-designs && claude
2. Drag a design mockup/screenshot into Claude
3. Ask: "Implement this design as a React component"
4. Watch Claude analyze the visual and generate code
5. Show the output - responsive, accessible, production-ready
6. Make a quick iteration: "Make it mobile-first" or "Add hover states"

KEY POINT: "Claude sees what you see. Drop in a design, get production code."

HIGHLIGHT: Show the image analysis capability - Claude understands layout, spacing, colors, and interactions from visuals.

Part 2

Must Know

Getting Started


cd your-project
claude

That's it. You're ready.

First Things to Try

🔍 Understand "What does this project do?"

🧭 Navigate "Where is the auth logic?"

💡 Explain "Explain /src/utils/api.js"

How Context Works

📖 On-demand reading Claude reads files as needed

🧠 No manual setup Automatically finds what matters

📦 Scales to any size Large codebases work fine

The Change Flow

You ask for a change

↓

Claude proposes edits (shows diff)

↓

You review

↓

Accept / Reject / Edit

Your Daily Toolkit

/help Show all commands

/model Switch AI models

/compact Save tokens

/rewind Undo changes

/status Session info

Checkpoint & Rewind

Claude auto-saves your code before each change

Esc Esc Quick rewind

Code only	Files go back, conversation stays
Conversation only	Context resets, files stay
Both	Full rollback

Keyboard Shortcuts

Esc Esc

Quick rewind

Shift+Tab

Change mode

Ctrl+C

Cancel

Ctrl+R

Search history

Two Modes

Default

Ask → Review → Approve

Learning, critical code

Auto-accept

Ask → Claude does it all

Prototyping, boilerplate

Vibe coder mode

Make Claude Think

Normal Quick response

"think" Some reasoning

"think hard" Deep analysis

"ultrathink" Maximum depth

Choose Your Model

Sonnet

Default

Daily coding
Fast
$3/$15 per M

Opus

Power

Hard problems
Slower
$5/$25 per M

Haiku

Quick

Simple tasks
Fastest
$1/$5 per M

Planning Big Tasks


# Todo: Add User Authentication

- [x] Create User model
- [x] Set up password hashing
- [ ] Build login endpoint
- [ ] Add JWT tokens
- [ ] Create auth middleware

Claude creates this automatically for complex tasks

Project Memory

CLAUDE.md

Context Claude always knows

Auto-loaded on every session

What to Include

Tech stack

Build commands

Code conventions

Testing approach

Things to avoid

Part 3

Intermediate

The Common Mistake

Not giving Claude the
context
to make good decisions

The Multi-Step Workflow

1. Research
"Look at how X is done"

2. Plan
"Create a plan - don't code yet"

3. Implement
"Now implement the plan"

4. Verify
"Run tests and fix failures"

5. Commit
"Commit and create a PR"

Good vs Bad Prompts

❌ Vague "Fix the login bug"

✓ Better "Fix the null pointer in UserService.getById - add null handling"

Prompt Template

What What you want done

Where Which files/areas

Constraints What to preserve/avoid

Verify How to know it's done right

Codebase-Aware Changes

"Rename User to Account across the codebase"

"Add TypeScript types to all /utils functions"

"Replace console.log with our logger utility"

Parallel Work

Main Agent

↓ ↓ ↓

Designer

Tester

Subagent Use Cases

🎯 Large features Split work across subagents

🔄 Research + implement One researches, one implements

📊 Parallel tasks Independent components at once

Your Own Commands


# .claude/commands/component.md

Create a new React component:
- Functional component with TypeScript
- Include unit test file
- Add to components index

Component name: $ARGUMENTS

Quick File References

📄@filename Reference a file

📁@folder/ Reference a folder

🔗@symbol Reference a function/class

Type @ and get autocomplete

Claude Can See

Error screenshots

UI mockups

Architecture diagrams

Console output

How to Use Images

🖱️ Drag & Drop Drag image into terminal

📂 File Path "Analyze ./screenshot.png"

📋 Clipboard Paste directly

Part 4

Advanced

(awareness only)

What Else Is Possible

claude -p Headless mode for scripts

🌳 Git worktrees for parallel work

⏳ Background tasks

📄 Skills for documents

Extensibility

Hooks Scripts before/after actions

MCP Connect to external tools

Plugins Extend functionality

Agent SDK Build your own agents

Quick Reference

Auto accept

Plan mode

/rewind

Custom Commands

Insert images

@mentions

Think mode

Claude.md

Next Steps

1 Install today

2 Start with exploration

3 Build a CLAUDE.md for your project

Questions?

Thank You!

Start using Claude Code today

Questions? Reach out anytime