Session Timing Overview — 3 Hours
Intro
What?
Features
Install
🎬 Demos
Best Practices
Scenarios
Safety
Metrics
Next
Break
🧪 Hands-On Lab
🔗
Backup Presentation
Use this link if the live demo environment is unavailable during the session.
Open Slides ↗
Title & Agenda
Slides 1–2 · 2 minutes
- Title: "Introduction to Claude Code: AI-Powered Development"
- Subtitle: Transforming Mobile App Development with AI
- Company logo + Claude Code logo + trainer name + date
Welcome everyone. "Today we're exploring Claude Code, an AI tool that's changing how developers code." Mention this is beginner-friendly, hands-on, and Q&A is welcome.
- 9-step numbered journey: What → Features → Install → Demos → Best Practices → Scenarios → Safety → Lab → Q&A
- Estimated time for each section on the side
Cover everything from "What is it?" to "How do I use it daily?" Save detailed questions for Q&A, but urgent questions are always welcome.
Introduction — What is Claude Code
Slides 3–5 · 5 minutes
- AI agent that lives in terminal and IDE
- Understands entire codebase structure
- Makes changes across multiple files
- Runs tests and commands, manages git
- Works through natural language
Claude Code is NOT autocomplete like Copilot. It's an "agent" — plans, executes, and verifies. Think of it as a developer team member who understands your code.
- Terminal (CLI) — most powerful
- VS Code extension with inline diffs
- JetBrains IDEs: IntelliJ, Android Studio, AppCode
- Desktop App, Web Browser, GitHub @claude mentions
Android Studio? Yes! AppCode for iOS? Yes! You can choose what works best for your workflow.
- Before: Manually write every line, repetitive boilerplate, sequential editing
- After: Describe what you want, generated boilerplate, multi-file orchestration
- Split-screen comparison visual
This isn't replacing developers — it's augmenting what you can do. You still review and control everything. Think of it as a productivity multiplier.
Features Deep Dive
Slides 6–11 · 10 minutes
- Cross-platform consistency: iOS, Android, RN in one command
- Complex multi-file changes: coordinate 10+ files automatically
- Boilerplate generation in seconds
- Smart debugging: paste error → get root cause + fix
- Automatic test generation and validation
- 1. Code Understanding: Reads codebase → understands patterns
- 2. Multi-File Editing: Create/edit across entire project
- 3. Command Execution: Run tests, git, CI/CD
- 4. Natural Language: Describe task → get working code
- Scans project structure and maps dependencies
- Recognizes design patterns and conventions
- Understands your architecture decisions
- CLAUDE.md guides its understanding further
This is why prompts can be so simple. It's not guessing — it's understanding. The better organized your code, the better it works.
Single command: "Create login/signup flow with Redux, API calls, error handling, and validation"
- ✅ LoginScreen.tsx + SignupScreen.tsx
- ✅ authService.ts + authSlice.ts (Redux)
- ✅ validation/authValidation.ts
- ✅ loginScreen.test.ts
- ✅ Updates navigation.tsx
This would take 2–3 hours manually. Claude Code does it in 5–10 min. All files are consistent and integrated. This is where real time savings appear.
- Instead of
git checkout -b feature/auth → "Create a feature branch for auth"
- Instead of complex test commands → "Run tests with coverage report"
- Supports: git, npm/yarn, Jest, XCTest, GitHub Actions, deployments
Especially useful for team members less comfortable with CLI. Makes junior developers more independent.
- "Build a settings screen with toggle switches for notifications, dark mode, and language"
- "The app crashes when uploading a large image. Here's the error: OutOfMemoryException…"
- "This component re-renders too often. Optimize it."
You don't write code — you describe what you want. Even vague requests often work well. The more specific, the better.
Installation & Setup
Slides 12–14 · 8 minutes
brew install anthropic/brew/claude-code # Mac ⭐
irm https://install.anthropic.com | iex # Windows ⚠️ PowerShell!
curl -sL https://install.anthropic.com | bash # Linux
Installation is fast (2–3 min). If you get PowerShell errors on Windows, you're in CMD. We'll troubleshoot together in the lab.
cd ~/Projects/MyMobileApp
claude
# → Browser opens → Log in → Return to terminal
> What would you like me to do?
Three commands and you're coding. Authentication is one-time only. Requires Claude Pro or API key.
- Extensions panel → Search "Claude Code" → Install
- Inline diffs — see changes as they happen
- Conversation history and @-mentions for files
- Plan review — approve before execution
Live Demonstrations
Slides 15–17 · 15 minutes
🎬 Live Demo
claude: Create a UserProfile screen with navigation,
edit button, and profile image upload
- Show project overview (30 sec)
- Show plan → review and approve → watch execution
- Highlight multi-file coordination and code quality
This is the real power — watch it work. Ask team: "What did you notice?" Point out consistency in style, naming, and patterns.
🎬 Live Demo
# Show the crash, then:
"Fix this error" [paste error/stack trace]
- Show error in console → copy stack trace
- Watch Claude analyze → trace → find root cause → fix → test
- Highlight "understand → plan → execute → verify" flow
Ask team: "How long would this take you normally?" Claude Code is excellent at debugging — this impresses every audience.
🎬 Live Demo
claude: Stage the API auth changes
claude: Commit with a descriptive message
claude: Create a PR against main
- Show before: git status with changes
- Watch natural language → staged → committed → PR opened
- Highlight commit message quality
Even junior devs write professional commit messages. Perfect for team consistency. No CLI syntax to memorize.
Best Practices
Slides 18–20 · 8 minutes
- Poor: "Make it better" / "Fix this" / "Write code"
- Better: "Create a login screen with email/password validation"
- Best: Specific requirements + acceptance criteria + design refs
Quality of prompts = quality of output. Think like you're briefing a junior developer. The more context you provide, the better the result.
- CLAUDE.md: project structure, tech stack, naming conventions, code standards
- Place in project root — committed to the repo
- Benefits: consistent code, fewer revisions, faster development, team knowledge sharing
This is invaluable for teams. Created once, benefits forever. Update it as your practices evolve.
- Request → Plan shown → You approve → Execution → Review diffs → Commit
- You never commit code you haven't reviewed
- Easy to ask for changes at any step
This is the most important principle. It's collaborative, not automatic. Quality gates remain your responsibility.
Real-World Scenarios
Slides 21–22 · 8 minutes
- Task: Complete auth system with login, signup, token management, Redux, tests
- Traditional: 6–8 hours · 8–10 files · Manual testing
- Claude Code: 20–30 minutes · Same files · Automated
Real example from teams using Claude Code. The time difference is dramatic. This is where team velocity increases significantly.
- Problem: Navigation works on iOS but breaks on Android
- Command: "Review navigation and ensure it works on both iOS and Android"
- Result: Scans both → identifies inconsistencies → refactors → tests both platforms
Mobile developers know this pain. Keeping iOS and Android in sync is hard. Claude Code excels at this — saves a week or two per cross-platform fix.
Safety, Metrics & Next Steps
Slides 23–25 · 13 minutes
- ✅ Code stays in your environment
- ✅ Full transparency — review before committing
- ✅ Generated code is yours — no licensing conflicts
- ✅ Use env variables for secrets always
- ❌ Never create vulnerabilities intentionally
AI is powerful but not magical. Your oversight is critical. Code review still matters. Security responsibilities remain with your team.
- Week 1 (Learning): 10–15% productivity gain
- Week 2–4 (Integration): 40–60% gain
- Month 2+ (Mastery): 60–80% gain
- Boilerplate: 80% faster · Features: 50% faster · Bugs: 40% faster
- 4 Lab Exercises: Install → Create Component → Fix Bug → Refactor
- This week: Install + try on 1–2 tasks + share with team
- This month: Use on all features + create CLAUDE.md + measure gains
🎬 Complete Live Demo Scripts
1
Open terminal in your React Native project. Show the file structure briefly.
2
Type: "Create a UserProfile screen with avatar display, edit button, and user info display"
3
Claude Code shows its plan. Read it aloud. Ask the audience: "Does this look reasonable?"
4
Approve the plan. Watch Claude Code create multiple files simultaneously.
5
Point out the generated files, code quality, TypeScript typing, and consistency with existing code.
6
Optional: Run in simulator to show the working screen. Ask: "How long would this take manually?"
1
Have a project with an intentional bug prepared (e.g., null reference when loading user data).
2
Show the error message / crash in the console. Copy the full stack trace.
3
Paste to Claude Code: "Fix this error" + paste the stack trace.
4
Watch Claude trace through the code, identify the root cause, and explain what went wrong.
5
Watch Claude implement the fix and automatically run tests to verify.
6
Show green test results. Highlight the "understand → plan → execute → verify" cycle.
1
Show git status with several changed files — the kind of messy state developers deal with daily.
2
Type: "Stage the authentication changes and commit with a descriptive message"
3
Watch Claude Code stage only the relevant files, write a professional commit message.
4
Type: "Open a PR against main with these changes"
5
Show the PR created in GitHub/GitLab with proper title and description.
6
Highlight: no CLI syntax needed. Even junior devs write professional commits now.
💡 Delivery Tips for Trainers
⚡ Engagement Tactics
- Pause after key points for questions
- Show live terminal during all demos
- Have team predict what happens next before running
- Point out "wow" moments in generated code
- Share before/after code comparisons
- Let people shout out questions at any time
- Celebrate successes during lab exercises
📋 Before Session Demo Checklist
- Test all three live demos from start to finish
- Ensure stable internet connection (critical)
- Have terminal windows open and ready
- Sample project prepared with intentional bug for Demo 2
- Backup static slides ready (if demos fail)
- VS Code extension installed and configured
- Font size increased for screen visibility
🎤 During Demos
- Share screen clearly — use full screen mode
- Narrate what you're doing in real time
- Pause for audience reactions at key moments
- Ask "How long would this take manually?"
- Point to the screen when highlighting key elements
- Don't rush — let the tool do its magic visibly
⏱️ Timing Guide
- Slides 1–2: 2 min (Title & Agenda)
- Slides 3–5: 5 min (Introduction)
- Slides 6–11: 10 min (Features)
- Slides 12–14: 8 min (Installation)
- Slides 15–17: 15 min (Live Demos)
- Slides 18–22: 16 min (Best Practices + Scenarios)
- Slides 23–25: 13 min (Safety + Next Steps)
- Break + Lab: 75 min
Ready to Run the Session?
Use the Syllabus alongside this Presentation Outline for the complete training experience.