The Vibecoding Voyage with Claude Code

Now, @name, we set sail on a real voyage. Captain Redbeard will show you how professional crews actually use Claude Code to build features - the genuine workflow, no false maps.

The Vibecoding Workflow

Building with Claude Code follows a steady current. Five stages, every time:

1. /init

   - generate a

   CLAUDE.md

   so Claude knows your ship
2. Describe the feature - for big tasks, switch on Plan Mode first
3. Claude implements - it reads files, edits code, and runs your tests
4. Review the diff - you read what changed and iterate
5. Level up - add hooks, subagents, MCP, and skills

Let's chart each leg of the journey.

Stage 1: Chart the Map with /init

Before anything else, give your first mate a map of the ship:

1# Inside the Claude Code REPL
2/init

Claude scans your project and writes a

CLAUDE.md

describing your structure, conventions, and key commands. Every future session reads it automatically.

Stage 2: Plan Mode for the Big Treasures

This is one of the newest and most powerful features. For large changes, you do not want Claude editing blindly. Plan Mode makes Claude propose a plan first - you approve it, then it executes.

There are two ways to enter Plan Mode:

1# Launch directly in plan mode
2claude \
3  --permission-mode plan

Or, inside the REPL, press Shift+Tab to cycle through permission modes until you reach plan. The permission modes are:

• default

  - asks before risky actions

• plan

  - proposes a plan before touching files

• acceptEdits

  - auto-accepts file edits

• bypassPermissions

  - runs without prompts (use with care, like loose cannon)

A typical big-feature command:

1# Ask for a plan before any edits
2claude \
3  --permission-mode plan \
4  "Add a likes feature to the Post component, with optimistic UI and tests"

Claude lays out the plan like a treasure map. You approve, and only then does it start digging.

Stage 3: Let the Crew Work

Once approved, Claude implements the feature itself. It reads the relevant files, edits multiple files, and runs your test suite. You don't paste code around - Claude edits directly. You watch the deck and steer.

To point Claude at specific files in your request, use

@

:

1claude "Refactor @src/components/Post.tsx to extract the like button into its own component"

Stage 4: Review the Diff and Iterate

A good captain inspects the cargo. Review what changed, then ask for adjustments in plain language:

1# Inside the REPL, review the changes
2/review

Then iterate: "the like count should be a number, not a string" - and Claude fixes it. Repeat until the treasure shines.

Stage 5: Reading Code from the Command Line

Claude Code shines for reading and reviewing code straight from the terminal. Use

-p

for one-shot answers and

@

to point at files:

1# Review a single file
2claude -p "review @src/auth.ts for security issues"
3
4# Pipe a diff in for a quick check
5git diff | claude -p "find potential bugs in this diff"
6
7# Pipe a whole file through for a summary
8cat src/api/users.ts | claude -p "summarize what this module does"

Notice: no made-up file or glob flags. Just

@

references and good old Unix pipes (

|

).

Generating Code and Docs

To create new files, simply ask. Claude writes them directly to disk:

1# Claude creates the file itself - no output flag needed
2claude "Create a LoginForm component in src/components with email and password fields and tests"

1# Ask Claude to generate documentation and write it
2claude "Read the code in src/api and write a README.md documenting the endpoints"

Headless Mode for Automation

For scripts and CI, run Claude headless with

-p

and a structured output format:

1# Print JSON so a script can parse the result
2claude -p "review @src/payment.ts and list issues" --output-format json

The

--output-format

flag accepts

text

,

json

, or

stream-json

. This is how crews wire Claude into GitHub Actions and other CI pipelines.

A Simple Automation Script

Here is a real, honest review script - it uses a pipe and

-p

, the genuine way:

1#!/bin/bash
2# review-staged.sh - review staged files with Claude Code
3
4# Collect staged code files
5STAGED=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(ts|tsx|js|jsx)$')
6
7if [ -z "$STAGED" ]; then
8  echo "Nothing to review"
9  exit 0
10fi
11
12# Pipe the staged diff straight into Claude
13git diff --cached | claude -p "Review this diff for bugs and security issues. Be concise."

Where Claude Code Runs

Your first mate sails on many seas:

• Terminal - the native home (REPL or

  -p

  )
• VS Code and JetBrains - IDE integrations
• Desktop and web - at

  claude.ai/code

• CI - headless with

  -p

  and

  --output-format json

  , e.g. GitHub Actions

Try It Yourself

Open the sandpack and read the real review script. Every Claude call uses a pipe or

@

- the honest way to give Claude context.

Summary 🎓

✅ Workflow -

/init

→ describe (Plan Mode for big tasks) → implement → review → level up ✅ Plan Mode - Shift+Tab or

--permission-mode plan

; Claude proposes a plan before editing ✅ Permission modes -

default

,

plan

,

acceptEdits

,

bypassPermissions

✅ Reading code -

claude -p "review @file"

and Unix pipes (

git diff | claude -p ...

) ✅ Generating - just ask; Claude writes files directly (no output flag) ✅ Headless/CI -

claude -p ... --output-format json

, GitHub Actions ✅ Everywhere - terminal, VS Code, JetBrains, desktop, web

Next up: the newest, most powerful features - subagents, skills, MCP, and hooks!

See you on deck! 🚀