DEV Community

Cover image for Claude Code in Terminal: A Beginner's Guide to 10x Faster Development
Ege Pakten
Ege Pakten

Posted on

Claude Code in Terminal: A Beginner's Guide to 10x Faster Development

#webdev #claude #ai #programming

A beginner's guide to supercharging your development workflow with Claude Code

This space is for beginners and new grads who want practical, no-nonsense tutorials. Explore more posts at kerempakten.dev!

📚 Table of Contents

  1. What is Claude Code?
  2. Why Use Claude in Terminal?
  3. Getting Started
  4. Essential Commands You Need to Know
  5. Real Workflow Examples
  6. Command Cheat Sheet
  7. Level Up: Community Resources
  8. Summary

What is Claude Code?

Claude Code is a CLI-based AI coding assistant that lives in your terminal. Instead of switching between your browser and IDE, you can have Claude help you directly where you code.

What's CLI? CLI stands for Command Line Interface — it's the text-based terminal/console where you type commands instead of clicking buttons. On Mac it's called Terminal, on Windows it's Command Prompt or PowerShell. If you've ever typed npm install or git push, you've used a CLI!

Think of it as having a senior developer sitting next to you, ready to help with anything — writing code, debugging, reviewing, planning features, and even committing to Git.

Why Use Claude in Terminal?

Browser Claude Terminal Claude Code
Copy-paste code back and forth Works directly with your files
Can't see your project structure Sees your entire codebase
Manual file management Creates/edits files automatically
Separate from your workflow Integrated into your workflow

Bottom line: Terminal Claude Code is 10x faster for actual development work.

Getting Started

Installation 

# Install Claude Code globally
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-project

# Start Claude Code
claude
Enter fullscreen mode Exit fullscreen mode

First Command: /init 

> /init
Enter fullscreen mode Exit fullscreen mode

This creates a CLAUDE.md file in your project root. This file is extremely important!

Why CLAUDE.md Matters

  • The CLAUDE.md file is like a briefing document for Claude. Every time you start Claude Code, it reads this file first to understand your project. Think of it as onboarding a new developer — you'd tell them about your tech stack, coding conventions, and project structure.

Without CLAUDE.md: Claude guesses how your project works.

With CLAUDE.md: Claude knows exactly how to help you.

What to Include in CLAUDE.md 

# Project: My Portfolio Website

## Tech Stack
- React 18 with TypeScript
- Tailwind CSS for styling
- Supabase for backend
- Vite for bundling

## Project Structure
- `/src/components` - React components
- `/src/pages` - Page components
- `/src/lib` - Utility functions
- `/supabase/functions` - Edge functions

## Coding Conventions
- Use functional components with hooks
- Use TypeScript strict mode
- Use Tailwind classes, no CSS files
- Name components in PascalCase
- Name utilities in camelCase

## Commands
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run test` - Run tests

## Important Notes
- Always use environment variables for API keys
- Supabase client is in `/src/lib/supabase.ts`
- Don't modify files in `/src/generated`
Enter fullscreen mode Exit fullscreen mode

Key Benefits

Without CLAUDE.md With CLAUDE.md
Claude might use wrong styling approach Claude uses Tailwind as specified
Claude might create files in wrong folders Claude follows your structure
Claude might use different naming conventions Claude matches your style
You repeat context every conversation Claude remembers your preferences

You Can Edit It Anytime!

The CLAUDE.md file is 100% yours to customize. As your project grows, update it.

💡 Pro tip: The more specific your CLAUDE.md, the better Claude understands your project. Spend 10 minutes setting it up properly — it saves hours later!

Essential Commands You Need to Know

1. /help — Your Starting Point 

> /help
Enter fullscreen mode Exit fullscreen mode

Shows all available commands. Start here!

2. /add — Add Files to Context

Claude can only see files you explicitly add:

# Add a single file
> /add src/components/Header.tsx

# Add multiple files
> /add src/App.tsx src/index.tsx

# Add entire directory
> /add src/components

# Add with pattern
> /add src/**/*.tsx
Enter fullscreen mode Exit fullscreen mode

Why This Matters

When you start Claude Code, it can't see any of your project files by default. It's like asking someone to fix your code without showing them the code!

Example — Wrong way:

> Why is my Header component not rendering properly?

# ❌ Claude has no idea what's in your Header component
# It will give generic advice that might not apply to your code
Enter fullscreen mode Exit fullscreen mode

Example — Right way:

> /add src/components/Header.tsx
> /add src/App.tsx
> Why is my Header component not rendering properly?

# ✅ Claude can now SEE your actual code
# It will give specific advice based on YOUR files
Enter fullscreen mode Exit fullscreen mode

Think of it Like This

Scenario Real Life Equivalent
Asking Claude without /add Asking a mechanic to fix your car over the phone without seeing it
Asking Claude with /add Bringing your car to the mechanic so they can look under the hood

💡 Rule of thumb: Before asking any question about your code, always /add the relevant files first. Use /ls to double-check what Claude can see.

3. /ls — Check What Claude Sees 

> /ls
Enter fullscreen mode Exit fullscreen mode

This command lists all files currently in Claude's context (memory).

Example output:

> /ls

Files in context:
  src/App.tsx
  src/components/Header.tsx
  src/utils/api.ts

Total: 3 files
Enter fullscreen mode Exit fullscreen mode

Why Use /ls?

After adding multiple files, you might forget what Claude can see. Before asking a question, run /ls to verify:

> /add src/components/Header.tsx
> /add src/components/Footer.tsx
> /add src/utils/helpers.ts

# Wait, what did I add again?
> /ls

# Now you can confirm Claude has the right files before asking your question
Enter fullscreen mode Exit fullscreen mode

💡 Quick check: If Claude gives a weird answer, run /ls — you might have forgotten to add the relevant file!

4. /clear — Fresh Start 

> /clear
Enter fullscreen mode Exit fullscreen mode

This command removes all files from Claude's context and starts fresh.

When to Use /clear

Situation Why Clear?
Finished one task, starting another Old files might confuse Claude
Context getting too large Too many files = slower + confused responses
Claude giving irrelevant answers Might be referencing wrong files
Switching between projects Don't mix files from different projects

Example workflow:

# Working on Header component
> /add src/components/Header.tsx
> /code Fix the navigation menu
> /code Add mobile responsive styles

# Done with Header! Now working on Footer
> /clear

# Fresh start for new task
> /add src/components/Footer.tsx
> /code Add social media links
Enter fullscreen mode Exit fullscreen mode

What Happens If You Don't Clear? 

# Added Header files earlier...
> /add src/components/Header.tsx

# Now asking about Footer without clearing
> /code Fix the Footer styling

# ❌ Claude might accidentally reference Header.tsx
# or get confused about which component you mean
Enter fullscreen mode Exit fullscreen mode

💡 Good habit: When you switch tasks, run /clear first. It takes 1 second and prevents confusion!

5. /code — Write and Edit Code

This is the most powerful command — it tells Claude to actually write or modify code.

# Create new component
> /code Create a Button component with TypeScript and Tailwind

# Edit existing file (add it first!)
> /add src/App.tsx
> /code Add a dark mode toggle to the header

# Refactor
> /add src/components/OldComponent.tsx
> /code Refactor this to use React hooks instead of class component
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. Creating new files: Just describe what you want — Claude creates the file automatically 
> /code Create a useAuth hook for handling authentication

# Claude creates: src/hooks/useAuth.ts (or similar)
# with full implementation!
Enter fullscreen mode Exit fullscreen mode
  1. Editing existing files: Add the file first, then describe changes 
> /add src/components/LoginForm.tsx
> /code Add email validation that checks for @ symbol

# Claude modifies your actual LoginForm.tsx file
# You'll see the changes in your editor immediately
Enter fullscreen mode Exit fullscreen mode
  1. Refactoring: Add the file, describe what you want improved 
> /add src/utils/api.ts
> /code Refactor to use async/await instead of .then() chains

# Claude rewrites the code following best practices
Enter fullscreen mode Exit fullscreen mode

Be Specific = Better Results

Vague Request Specific Request
/code Make a button /code Create a Button component with TypeScript, Tailwind, loading state, and disabled prop
/code Fix this /code Fix the form submission - it's not sending data to the API
/code Improve this code /code Add error handling and loading states to this API call

Example — Vague vs Specific:

# ❌ Vague
> /code Add a form

# ✅ Specific
> /code Create a contact form with:
> - Name field (required)
> - Email field (required, validated)
> - Message textarea (required, min 10 characters)
> - Submit button with loading state
> - Error messages shown below each field
> - Success toast notification on submit
Enter fullscreen mode Exit fullscreen mode

💡 The more detail you give, the better the result. Treat it like explaining to a junior developer exactly what you want built.

6. /architect — Plan Before Building 

> /architect How should I structure user authentication?
Enter fullscreen mode Exit fullscreen mode

This command asks Claude to think and plan before writing any code. It's like consulting a senior developer about the best approach.

What Claude Provides

When you use /architect, Claude will give you:

  • File structure — What files to create and where
  • Design patterns — Best practices for your use case
  • Implementation steps — Ordered list of what to build first
  • Trade-offs — Pros and cons of different approaches

Example:

> /architect How should I build a shopping cart feature?

# Claude responds with something like:

# 📁 Suggested Structure:
# src/
#   components/
#     cart/
#       Cart.tsx
#       CartItem.tsx
#       CartSummary.tsx
#   hooks/
#     useCart.ts
#   context/
#     CartContext.tsx
#   types/
#     cart.ts
#
# 🔨 Implementation Order:
# 1. Create cart types (cart.ts)
# 2. Build CartContext for state management
# 3. Create useCart hook for easy access
# 4. Build UI components
#
# ⚖️ Recommendation:
# Use React Context for cart state since it needs to be
# accessed across multiple components...
Enter fullscreen mode Exit fullscreen mode

When to Use /architect

✅ Use /architect for ❌ Don't need it for
Authentication system Adding a button
Database schema design Fixing a typo
API structure Changing colors
Multi-component features Simple bug fixes
State management setup One-file changes

Architect → Then Build 

# Step 1: Plan
> /architect How should I implement dark mode?

# Step 2: Review Claude's plan, ask follow-up questions
> What about system preference detection?

# Step 3: Once happy with plan, build it
> /code Implement dark mode following the plan above
Enter fullscreen mode Exit fullscreen mode

💡 Save hours of refactoring: 10 minutes of planning with /architect can save you from rebuilding a feature that was poorly structured from the start.

7. /review — Code Review 

> /add src/components/PaymentForm.tsx
> /review
Enter fullscreen mode Exit fullscreen mode

This command asks Claude to review your code like a senior developer would in a pull request.

What Claude Checks

Category What It Looks For
🐛 Bugs Logic errors, edge cases, null checks
🔒 Security XSS vulnerabilities, exposed secrets, SQL injection
⚡ Performance Unnecessary re-renders, memory leaks, slow operations
📖 Readability Confusing code, missing comments, poor naming
🏗️ Best Practices React patterns, TypeScript usage, code structure

Example output:

> /add src/components/PaymentForm.tsx
> /review

# Claude responds:

# 🔴 Critical Issues:
# - Line 23: Credit card number is logged to console (security risk!)
# - Line 45: No error handling for API call
#
# 🟡 Warnings:
# - Line 12: useEffect missing dependency array (could cause infinite loop)
# - Line 34: Consider using useMemo for expensive calculation
#
# 🟢 Suggestions:
# - Line 8: Variable name 'x' is unclear, consider 'cardNumber'
# - Consider splitting this into smaller components
#
# Overall: 3 critical issues need fixing before commit
Enter fullscreen mode Exit fullscreen mode

Review Workflow 

# Before committing any code:

# 1. Add files you changed
> /add src/components/PaymentForm.tsx
> /add src/hooks/usePayment.ts

# 2. Run review
> /review

# 3. Fix issues Claude found
> /code Fix the security issue on line 23

# 4. Review again to confirm
> /review

# 5. Now safe to commit!
> /git commit
Enter fullscreen mode Exit fullscreen mode

💡 Catch bugs before users do: Always run /review before pushing code. It's like having a free senior developer check your work!

8. /test — Generate Tests 

> /add src/utils/validators.ts
> /test Write unit tests for validators
Enter fullscreen mode Exit fullscreen mode

This command asks Claude to automatically create test files for your code.

What Claude Creates 

> /add src/utils/validators.ts
> /test Write unit tests for validators

# Claude creates: src/utils/validators.test.ts
# with tests like:

# ✅ validates correct email format
# ✅ rejects email without @ symbol
# ✅ rejects empty email
# ✅ validates phone number with country code
# ✅ rejects phone number that's too short
# ... and more
Enter fullscreen mode Exit fullscreen mode

Different Types of Tests 

# Unit tests (test one function)
> /add src/utils/formatDate.ts
> /test Write unit tests for formatDate

# Component tests (test React component)
> /add src/components/Button.tsx
> /test Write tests for Button component

# Integration tests (test multiple things together)
> /add src/components/LoginForm.tsx
> /add src/hooks/useAuth.ts
> /test Write integration tests for the login flow

# Specific scenarios
> /add src/utils/cart.ts
> /test Write tests for edge cases: empty cart, max quantity, negative prices
Enter fullscreen mode Exit fullscreen mode

Be Specific About What to Test 

# ❌ Vague
> /test Write tests

# ✅ Specific
> /test Write tests covering:
> - Valid inputs
> - Invalid inputs (empty, wrong format)
> - Edge cases (very long strings, special characters)
> - Error handling
Enter fullscreen mode Exit fullscreen mode

💡 No excuses for no tests: Test writing is tedious, but now Claude does it for you. Use /test on every new function or component!

9. /debug — Fix Bugs 

> /add src/components/LoginForm.tsx
> /debug Form submission isn't working, getting undefined error
Enter fullscreen mode Exit fullscreen mode

This command asks Claude to analyze your code and find the bug — like having a detective investigate the crime scene.

How to Use /debug Effectively

Step 1: Add the relevant files

# Add the file with the bug
> /add src/components/LoginForm.tsx

# Add related files if needed
> /add src/hooks/useAuth.ts
> /add src/utils/api.ts
Enter fullscreen mode Exit fullscreen mode

Step 2: Describe the problem clearly

# ❌ Vague
> /debug It's broken

# ✅ Specific
> /debug Form submission fails with "undefined" error.
> - Happens when I click Submit
> - Console shows: "Cannot read property 'email' of undefined"
> - Started happening after I added validation
Enter fullscreen mode Exit fullscreen mode

Step 3: Include error messages

> /debug Getting this error when users try to login:

TypeError: Cannot read property 'user' of undefined
    at LoginForm.tsx:45
    at handleSubmit (LoginForm.tsx:23)
Enter fullscreen mode Exit fullscreen mode

What Claude Does

Step What Happens
1️⃣ Reads your code files
2️⃣ Analyzes the error message
3️⃣ Traces the problem to its source
4️⃣ Explains WHY it's broken
5️⃣ Shows you exactly how to fix it

Example:

> /debug Getting "undefined" when submitting the form

# Claude responds:

# 🔍 Found the issue!
#
# Problem: On line 23, you're accessing `formData.email`
# but `formData` is undefined because the useState
# initial value is missing.
#
# Line 23 (current):
#   const email = formData.email
#
# The issue: useState() on line 8 has no initial value
#   const [formData, setFormData] = useState()
#
# Fix: Add initial state
#   const [formData, setFormData] = useState({ email: '', password: '' })
#
# Want me to apply this fix?
Enter fullscreen mode Exit fullscreen mode

💡 Save hours of debugging: Instead of console.log everywhere, just tell Claude the symptoms and paste the error. It's like having a debugging superpower!

10. /git — Smart Git Operations 

# Check status
> /git status

# Commit with AI-generated message
> /git commit

# See changes
> /git diff
Enter fullscreen mode Exit fullscreen mode

This command lets Claude handle Git operations for you — including writing commit messages!

Available Git Commands

Command What It Does
/git status Shows changed files (like git status)
/git diff Shows what you changed in each file
/git commit Commits with AI-written message
/git branch Shows or creates branches
/git log Shows recent commits

The Magic: AI Commit Messages

This is the best part — Claude reads your changes and writes the commit message for you:

> /git commit

# Claude analyzes your changes and suggests:

# "feat: Add email validation to login form
#
# - Add regex validation for email format
# - Show error message below input field
# - Disable submit button for invalid email
# - Add unit tests for validation function"
#
# Commit with this message? (y/n)
Enter fullscreen mode Exit fullscreen mode

Why This Is Amazing 

# ❌ Your commit messages
git commit -m "fix stuff"
git commit -m "update"
git commit -m "wip"
git commit -m "asdfasdf"

# ✅ Claude's commit messages
git commit -m "fix: Resolve null pointer exception in user authentication"
git commit -m "feat: Add dark mode toggle with system preference detection"
git commit -m "refactor: Extract validation logic into custom useValidation hook"
Enter fullscreen mode Exit fullscreen mode

Full Git Workflow 

# 1. Check what you've changed
> /git status

# 2. See the actual changes
> /git diff

# 3. Review your code before committing
> /add src/components/Header.tsx
> /review

# 4. Fix any issues
> /code Fix the issue found in review

# 5. Commit with smart message
> /git commit

# Done! Professional commit message without thinking about it
Enter fullscreen mode Exit fullscreen mode

💡 Never write "fix stuff" again: Let Claude write your commit messages. Your Git history will look professional, and future you will thank present you when debugging!

Real Workflow Examples

Starting a New Feature 

# 1. Plan first
> /architect How should I build a user profile page?

# 2. Create the structure
> /code Create UserProfile component based on the plan

# 3. Add files for further work
> /add src/components/UserProfile.tsx

# 4. Implement details
> /code Add avatar upload functionality

# 5. Write tests
> /test Write tests for UserProfile

# 6. Review before committing
> /review

# 7. Commit with smart message
> /git commit
Enter fullscreen mode Exit fullscreen mode

Fixing a Bug 

# 1. Add the buggy file
> /add src/components/LoginForm.tsx

# 2. Describe the issue
> /debug Login button doesn't respond after first click

# 3. Apply the fix
> /code Fix the bug as suggested

# 4. Add regression test
> /test Add test to prevent this bug

# 5. Commit
> /git commit
Enter fullscreen mode Exit fullscreen mode

Command Cheat Sheet 

SETUP
/init              Create CLAUDE.md for your project
/help              See all commands

CONTEXT MANAGEMENT
/add <file>        Add files to context
/drop <file>       Remove specific files
/clear             Clear all context
/ls                List current files

CODE OPERATIONS
/code              Write or edit code
/architect         Plan architecture
/review            Review code quality
/debug             Fix bugs
/test              Generate tests
/docs              Generate documentation

GIT
/git status        Check status
/git commit        Smart commit message
/git diff          See changes

SHORTCUTS
Tab                Accept suggestion
Ctrl+C             Cancel operation
Esc                Close modal
Enter fullscreen mode Exit fullscreen mode

Level Up: Community Resources

The Claude Code community is incredibly active. Here are two resources I highly recommend:

1. Awesome Claude Code

📦 github.com/hesreallyhim/awesome-claude-code

A curated collection of:

  • Slash commands
  • CLAUDE.md templates
  • CLI tools
  • Workflows
  • Productivity tips

This repo is updated daily by the community. If you can't find a command or workflow you need, check here first. It has 18k+ stars and is the go-to resource for Claude Code users.

What you'll find:

  • Battle-tested slash commands
  • CLAUDE.md setups for different project types
  • Tutorials and guides
  • CLI tools and integrations

2. Superpowers — My Favourite Plugin 🦸

📦 github.com/obra/superpowers

Superpowers transforms Claude Code from a coding assistant into a complete software development workflow. Created by Jesse Vincent, it's a collection of "skills" that teach Claude professional engineering practices.

What Makes Superpowers Special?

Instead of Claude jumping straight into writing code, Superpowers makes it:

  1. Ask what you're really trying to do — Clarifies requirements first
  2. Create a proper spec — In digestible chunks you can review
  3. Build an implementation plan — Clear enough for any developer to follow
  4. Execute with subagents — Multiple agents work through tasks systematically
  5. Review between tasks — Catches issues before they compound

It emphasizes TDD (Test-Driven Development), YAGNI, and DRY principles.

Installing Superpowers 

# In Claude Code terminal:

# 1. Add the marketplace
/plugin marketplace add obra/superpowers-marketplace

# 2. Install Superpowers
/plugin install superpowers@superpowers-marketplace

# 3. Restart Claude Code
# Then check it's working:
/help

# You should see:
# /superpowers:brainstorm - Interactive design refinement
# /superpowers:write-plan - Create implementation plan
# /superpowers:execute-plan - Execute plan in batches
Enter fullscreen mode Exit fullscreen mode

Using Superpowers 

# 1. Brainstorm your feature
/superpowers:brainstorm

# Claude will ask clarifying questions, explore alternatives,
# and present the design in sections for you to validate

# 2. Create implementation plan
/superpowers:write-plan

# Creates a detailed plan with tasks clear enough for
# "an enthusiastic junior engineer" to follow

# 3. Execute the plan
/superpowers:execute-plan

# Launches subagent-driven development
# Claude can work autonomously for hours following the plan!
Enter fullscreen mode Exit fullscreen mode

Skills That Activate Automatically

Superpowers includes skills that trigger when relevant:

Skill When It Activates
test-driven-development When implementing features
systematic-debugging When debugging issues
requesting-code-review Between tasks
using-git-worktrees After design approval
finishing-a-development-branch When tasks complete

You don't need to do anything special — Claude just gains these superpowers! 🦸

Summary

Claude Code in the terminal is a game-changer for development speed:

Command What It Does
/add Add files to context
/code Write and edit code
/architect Plan features
/review Check code quality
/test Generate tests
/git commit Smart commits
/clear Reset context

Resources to bookmark:

Master these commands and you'll be 10x more productive. Start with /help, then practice with /add, /code, and /review — these three alone will transform your workflow!

📬 Join the Journey!

Found this helpful? I'm building this blog for beginners and new grads like us to learn and grow together.

👉 Subscribe at kerempakten.dev for more tutorials!

You'll find:

  • 🛠️ DevOps & Cloud tutorials
  • 💻 Project breakdowns & real code
  • 🎯 Career tips for new graduates
  • 📝 Honest "building in public" updates

Let's learn together!

Last updated: December 2025

Connect with me: kerempakten.dev

Top comments (0)