Shippable Studio

Getting started with Claude Code: A developer's guide

In our last post, we discussed why Claude Code is revolutionary. Now, let's examine the how.

This guide will walk you through the installation process and creating your first refactor with Claude Code.

Prerequisites

Before starting, run through this checklist:

  1. Node.js (v18 or higher) installed.
  2. An Anthropic API key (generate one from the Anthropic Console).
  3. A terminal (iTerm2, Terminal.app, or your VS Code terminal).

Installation

Claude Code is available as an npm package. Open your terminal and run:

bash
npm install -g @anthropic-ai/claude-code

After installation, verify your account:

bash
claude auth

This will launch a browser window. Log in, grant permissions, and paste the verification code back into your terminal.

Your first task: "Hello World" refactoring

Let's test it on an actual project. Navigate to a repository:

bash
cd ~/my-projects/awesome-app

Initialize Claude:

bash
claude
# or simply start typing a command
claude "Analyze this directory and tell me what the main tech stack is."

The magic of "Deep Context"

Unlike tools where you must copy-paste files, Claude Code executes ls, reads package.json, and inspects source files to provide an accurate answer.

Example output:

I see you're using Next.js 14 with TypeScript and Tailwind CSS. The main entry point appears to be app/layout.tsx.

A real workflow: creating a component

Let's assign it a useful task.

Prompt:

"Create a new React component called Button.tsx in the components/ui folder. It should take variant ('primary', 'secondary') and size props. Use Tailwind CSS for styling. Ensure it matches the design tokens found in tailwind.config.js."

Claude's actions:

  1. Reads tailwind.config.js to grasp your styling tokens.
  2. Checks if components/ui exists (and creates it if necessary).
  3. Writes the Button.tsx file.

You didn't write a single line of code. You merely stated your intent.

Best practices for prompts

To maximize Claude Code's potential, treat it like a junior developer:

  1. Be specific: Instead of "Fix the bug," try "The login page crashes when the password is empty. Improve validation in LoginForm.tsx."
  2. Feed context (optional): Guide it when necessary: "Using lib/utils.ts, refactor..."
  3. Review before committing: Claude Code often presents a diff before applying changes. READ IT. It's an agent, but it can make mistakes.

Safety first

Claude Code is powerful—it has write access to your file system.

  • Ensure a clean git state (git status should be clean).
  • Read proposed shell commands before authorizing them.
  • Use git diff after completion to verify changes.

Now that you understand the basics, how does this compare to tools like GitHub Copilot or Cursor? We'll analyze the differences in the next article.