Claude Code Pro Tips

Use Plan Mode First

How to use it:

• Press Shift + Tab on your keyboard to toggle into Plan Mode
• You'll see the interface change to indicate you're in Plan Mode
• Type your request normally (e.g., "Can you refactor the authentication system to use JWT tokens?")
• Claude will analyze and create a detailed plan without touching any code

Best practices:

• Always start complex tasks in Plan Mode
• Read the entire plan carefully - look for potential issues or misunderstandings
• If the plan looks good, tell Claude "Go ahead and execute this plan"
• If not, say "No" and provide corrections: "Actually, let's modify the plan to..."

Generate a Claude.md File

How to use it:

• Type /init in Claude Code when starting a new project
• Claude will analyze your codebase and create a claude.md file
• This file contains project context, conventions, and rules

What to include:

• Project structure and architecture
• Coding conventions and style guides
• Important business logic rules
• Common patterns used in the project
• Dependencies and their purposes
• Any project-specific quirks or requirements

Updating the file:

• Tell Claude: "Remember to always use TypeScript strict mode - add this to claude.md"
• Or manually edit the file yourself
• Review and update it periodically as your project evolves

Commit Frequently with Git

How to use it:

• Before asking Claude to make changes: git add . && git commit -m "Checkpoint before adding feature X"
• After Claude makes changes you like: git add . && git commit -m "Added feature X"
• If something goes wrong: git reset --hard HEAD~1 or git checkout .

Workflow tips:

• Make micro-commits for each successful step
• Use descriptive commit messages like "Checkpoint: before refactoring auth"
• Consider creating a branch for experimental changes
• Use git stash for temporary saves

Use Screenshots

How to use it:

• Take screenshots using your OS screenshot tool
• Drag and drop the image directly into the Claude Code chat
• Add context with your message

Best use cases:

• Error messages: "Here's the error I'm getting [screenshot]"
• UI issues: "The button should look like this [design screenshot]"
• Expected behavior: "It should match this design [Figma screenshot]"
• Console outputs: "These are the network requests failing [DevTools screenshot]"

Tips:

• Crop screenshots to focus on relevant parts
• Include browser DevTools if showing web issues
• Annotate screenshots if needed before uploading

Drag in Entire Folders

How to use it:

• Locate the folder in your file explorer
• Drag the entire folder into Claude Code chat
• Specify why you're sharing it

Common scenarios:

• "Here's my backend folder [drag folder] - make sure the frontend API calls match these endpoints"
• "This is our shared types folder [drag folder] - use these TypeScript interfaces"
• "Here's a similar feature from another project [drag folder] - implement something similar"

Give URLs for Documentation

How to use it:

• Direct link method: "Use this API: https://docs.stripe.com/api/customers"
• Search request method: "Find and use the latest Next.js 14 App Router documentation"
• Multiple docs: "Reference both the React Query docs and the Axios docs for this implementation"

Effective documentation sharing:

• Share specific sections rather than entire doc sites when possible
• For complex APIs, provide multiple relevant pages
• Include version-specific docs if important

Use Sub-agents for Large Tasks

How to use it:

• Ask Claude to break down complex tasks: "This is a large refactor - can you break it down and use sub-agents?"
• Claude will identify parallelizable tasks
• Monitor the sub-agent progress in the interface

Ideal scenarios:

• Porting apps between platforms
• Large-scale refactoring
• Implementing multiple independent features
• Converting large codebases (e.g., JavaScript to TypeScript)

Ask Claude to Double-check Its Work

How to use it:

• After changes: "Can you verify that all existing tests still pass?"
• "Please check for any edge cases I might have missed"
• "Make sure this doesn't break any other parts of the app"
• "Run through common user flows to ensure everything works"

Specific checks to request:

• "Check that all TypeScript types are correct"
• "Verify error handling for all API calls"
• "Ensure mobile responsiveness wasn't affected"
• "Confirm all environment variables are properly used"
• "Check for any potential security issues"

Always Review Generated Code

How to review effectively:

• Read through each file changed in the file tree
• Look for:
  • Logic errors
  • Performance issues
  • Security vulnerabilities
  • Code style inconsistencies
  • Over-engineering or under-engineering

Review checklist:

• Does the code follow project conventions?
• Are there any obvious bugs?
• Is error handling appropriate?
• Are there performance implications?
• Is the code maintainable?
• Are there proper comments where needed?

How to provide feedback:

• "The logic looks good, but let's extract this into a separate function"
• "This works, but could you add error handling for the API call?"
• "Please add TypeScript types for these function parameters"