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

Want to write code 10 times faster? Claude Code turns your terminal into an AI coding partner that understands your entire project. Unlike copying and pasting code in a browser, Claude Code works directly inside your development environment — no context switching, no manual file management, just pure productivity.

What Exactly Is Claude Code?

Claude Code is a command-line AI assistant that lives in your terminal. Instead of bouncing between your browser and IDE, you get instant coding help right where you're typing. Think of it as having a senior developer sitting next to you, ready to write code, debug issues, review changes, plan features, and even handle Git commits.

If you've ever typed npm install or git push, you already know how to use the command line. Claude Code works the same way — you type commands and get instant responses. On Mac it's called Terminal, on Windows it's Command Prompt or PowerShell.

The magic? Claude can see your entire codebase, understand your project structure, and write code that actually fits your style and conventions. No more generic solutions — just code that works for your project.

Browser Claude vs. Terminal Claude Code

Browser Version Terminal Claude Code
Copy-paste code back and forth Works directly with your files
Can't see your project structure Views your entire codebase
Manual file creation and editing Auto-creates and modifies files
Separate from your workflow Integrated into your process

Real talk: Terminal Claude Code isn't just faster — it's a completely different experience. You're not asking an AI to help with code anymore. You're working with a tool that understands the code it's looking at.

Getting Started

Installation takes less than a minute:

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

# Navigate to your project
cd your-project

# Start Claude Code
claude

That's it. You're in.

Your First Command: /init

> /init

This creates a CLAUDE.md file in your project root. This file matters more than you might think.

Why CLAUDE.md Changes Everything

CLAUDE.md is Claude's instruction manual for your project. Every time you start a session, Claude reads this file first. It's like onboarding a new developer — you're telling Claude your tech stack, coding conventions, folder structure, and how everything works.

Without CLAUDE.md: Claude has to guess how your project works. The advice is generic.

With CLAUDE.md: Claude knows exactly what to do. The advice is specific to your code.

Here's what a good CLAUDE.md looks like:

# 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`

The difference this makes is huge:

Without CLAUDE.md With CLAUDE.md
Claude might use the wrong styling approach Claude uses Tailwind as specified
Claude creates files in random directories Claude respects your folder structure
Claude uses inconsistent naming conventions Claude matches your coding style
You repeat context in every conversation Claude remembers your preferences

Pro tip: Spend 10 minutes setting up a solid CLAUDE.md. It'll save you hours of corrections later.

The Essential Commands You Need to Know

1. /help — Your Starting Point

> /help

Shows every available command. When in doubt, start here.

2. /add — Show Claude Your Code

This is critical. 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 an entire directory
> /add src/components

# Add files matching a pattern
> /add src/**/*.tsx

Why this matters: When you start Claude Code, it can't see any of your files by default. Asking Claude to fix code without showing it to them is like asking a mechanic to fix your car over the phone — they might try, but they're working blind.

Think about it this way:

The Wrong Way The Right Way
> Why is my Header component broken? > /add src/components/Header.tsx
> Why is my Header component broken?
❌ Claude can't see your actual code. Generic answer. ✅ Claude sees everything. Specific, actionable feedback.

Golden rule: Before asking Claude anything about your code, add the relevant files first. Use `/ls` to verify what Claude can see.

3. /ls — Verify What Claude Sees

> /ls

Lists all files currently in Claude's context. This prevents confusion:

> /ls

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

Total: 3 files

Use this to double-check before asking questions. If Claude gives you weird answers, run `/ls` — you might have forgotten to add something.

4. /clear — Start Fresh

> /clear

Removes all files from Claude's context. Use this when switching tasks:

When to Use /clear Why It Matters
Finished one task, starting another Old files might confuse Claude
Context gets too broad Too many files = slower, less focused responses
Claude's answers seem off-topic Might be referencing the wrong files
Switching between different projects Never mix files from different projects

Workflow example:

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

# Done with Header. Moving on to Footer.
> /clear

# Start fresh
> /add src/components/Footer.tsx
> /code Add social media links

5. /code — Write and Edit Code

The most powerful command. This tells Claude to actually write or modify code:

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

# Edit an 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

The specificity rule: The more detailed your request, the better the output.

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

Better example:

# ❌ Too 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

6. /architect — Plan Before You Build

> /architect How should I structure user authentication?

Use this for big-picture questions. Claude will propose file structure, design patterns, implementation order, and tradeoffs — like consulting a senior engineer before coding.

What you get back:

  • File structure — which files you need and where
  • Design patterns — best practices for your use case
  • Implementation order — what to build first
  • Tradeoffs — pros and cons of different approaches

When to use /architect:

  • Authentication systems
  • Database schema design
  • API structure
  • Multi-component features
  • State management setup

The workflow:

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

# 2. Review the plan, ask follow-ups
> What about system preference detection?

# 3. Once satisfied, build it
> /code Implement dark mode following the plan above

Time saver: 10 minutes of planning with /architect prevents you from rebuilding a poorly-structured feature later.

7. /review — Quality Control

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

Claude reads your code like a senior code reviewer. It catches bugs, security issues, performance problems, and style inconsistencies:

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

Review workflow:

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

# 2. Run review
> /review

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

# 4. Review again to confirm
> /review

# 5. Now safe to commit
> /git commit

Always run /review before pushing code. It's like having a free senior developer check your work.

8. /test — Generate Tests Automatically

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

Claude auto-generates test files for your code. Different types:

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

# Component tests (test React components)
> /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

# Edge cases
> /add src/utils/cart.ts
> /test Write tests for edge cases: empty cart, max quantity, negative prices

Be specific about what to test:

# ❌ Too vague
> /test Write tests

# ✅ Specific
> /test Write tests including:
> - Valid input
> - Invalid input (empty, wrong format)
> - Edge cases (very long strings, special characters)
> - Error handling

9. /debug — Find and Fix Bugs

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

Claude analyzes your code and hunts down bugs. Give it context:

# ❌ Too 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 after I added validation

What Claude does:

1️⃣ Reads your code
2️⃣ Analyzes the error message
3️⃣ Finds the root cause
4️⃣ Explains why it's broken
5️⃣ Shows you how to fix it

10. /git — Smart Git Operations

> /git status      # What changed?
> /git diff       # See the changes
> /git commit     # Smart commit messages

The best part: Claude writes your commit messages for you. It analyzes your changes and creates professional, descriptive messages automatically:

> /git commit

# Claude proposes:
# "feat: Add email validation to login form
# 
# - Add regex validation for email format
# - Show error messages below input field
# - Disable submit button for invalid emails
# - Add unit tests for validation function"

# Better than anything you'd write by hand!

Full Git workflow:

# 1. Check changes
> /git status

# 2. See details
> /git diff

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

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

# 5. Commit with smart message
> /git commit

Real-World Workflows

Building a New Feature

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

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

# 3. Continue working on it
> /add src/components/UserProfile.tsx
> /code Add avatar upload functionality

# 4. Write tests
> /test Write tests for UserProfile component

# 5. Review before committing
> /review

# 6. Commit
> /git commit

Fixing a Bug

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

# 2. Debug it
> /debug Submit button doesn't work after the latest update

# 3. Apply the fix
> /code Fix the issue described

# 4. Add a regression test
> /test Write a test to prevent this bug from happening again

# 5. Commit
> /git commit

Command Cheat Sheet

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

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

CODE OPERATIONS
/code            Write or edit code
/architect       Plan architecture
/review          Check code quality
/debug           Find and fix bugs
/test            Generate tests
/docs            Create documentation

GIT OPERATIONS
/git status      Show changed files
/git commit      Smart commit message
/git diff        View changes
/git branch      Create or view branches
/git log         Show recent commits

Key Takeaways

Claude Code transforms your terminal into a productivity multiplier:

Master These First What They Do
/add Show Claude your files
/code Write and edit code
/review Quality check before commit
/debug Fix bugs fast
/git commit Professional commit messages

Start with /help to see everything available. Then practice with /add, /code, and /review — just these three will transform how you work. The real power comes from using them together in a smooth workflow.

The 10x speed improvement isn't magic. It's the result of eliminating context switching, automating tedious tasks, and having instant feedback on your code quality. Master these commands and you'll wonder how you ever coded without them.

Description: Learn Claude Code terminal commands, workflow setup, and practical examples to supercharge your development speed. Complete guide with cheat sheet.

Related Articles