The full curriculum

Learn the workflow.

Everything from your first ten minutes to what to do when something breaks. Jump to any section.

1. Setup — your first ten minutes

Five steps from a blank laptop to a working conversation with Claude.

  1. Run the installerDouble-click Install-VSCode.cmd on the USB stick.
  2. Open your folderFile › Open Folder, then choose "Yes, I trust the authors."
  3. Open ClaudeOpen any file, then click the Spark (✻) icon at the top right of the editor.
  4. Sign inYour browser opens. Use your own Claude account.
  5. Ask somethingTry: "Explain what this folder is for."
Open the project folder, not your whole drive. Claude Code does not run in Restricted Mode, so clicking "trust the authors" matters. Sign-in needs a paid Claude plan (Pro, Max, Team or Enterprise) or a Console account — the USB stick doesn't carry a login.

2. Why VS Code

You can see everything Claude does. That's the whole pitch.

Every file in view

The Explorer lists each file Claude creates or changes. Nothing happens out of sight.

Review before it lands

Claude shows each proposed change next to the original. You accept it or reject it.

One window for all of it

Files, chat, terminal and version history sit together — no juggling apps.

A quick tour of the window

PartWhat it does
Activity BarSwitch between Explorer, Search, Source Control. The Spark icon here lists your Claude sessions.
ExplorerThe files and folders in what you opened.
EditorWhere files open. The Spark icon sits at its top right.
PanelTerminal, Problems and Output.
Claude Code panelThe chat with Claude. Drag it to either sidebar or into an editor tab.
Status barGit branch, error count, and the ✻ Claude Code button — works even with no file open.

Two shortcuts to learn first

ShortcutDoesShortcutDoes
Ctrl+Shift+PCommand Palette — run any command by typing a few wordsCtrl+PQuick Open — jump to any file by name
Ctrl+SSave (or turn on Auto Save)Ctrl+EscSwitch editor ↔ Claude
Alt+KSend selected lines to ClaudeShift+EnterNew line in your prompt
Ctrl+`Open the terminalCtrl+Shift+EscClaude in a new tab

3. Why one folder

Claude's world is the folder you open. Everything it can see, remember and undo is tied to that one folder — like giving a contractor the keys to one room.

What Claude can see and edit

Files inside the folder are fair game. Files anywhere else are invisible to it.

What Claude remembers

Project notes (CLAUDE.md) and past chats belong to the folder.

What you can undo

Checkpoints and version history (Git) track this folder and nothing else.

Where your work ends up

Everything Claude makes lands here, so you always know where to look.

One folder becomes one project online

Your folder → its Git history → a Mosaic project → a live address. Mosaic looks at the files in the folder to decide how to build it: an index.html means a website, a requirements.txt means a Python app. Mix two projects in one folder and Mosaic gets mixed signals.

The habit in practice

Do

  • Make a new folder for each project, with a clear name like "bake-sale".
  • Open it with File › Open Folder before you start Claude.
  • Keep every file for that project inside it, including source material.

Don't

  • Open your whole Documents folder or C: drive.
  • Put two projects in one folder, like a website and an unrelated script.
  • Leave project files on the desktop "for now" — Claude can't see them.

4. Working with Claude

Choose how much freedom Claude has, review everything, and know how to undo.

ModeClaude asks you first →→ Claude acts on its own
Plan start hereClaude writes a plan and changes nothing until you approve it.
Manual then thisClaude asks before each file edit and most commands.
Edit automatically laterClaude edits files in your folder without asking.
Auto laterA safety check reviews actions instead of asking you each time.

Switch by clicking the mode name under the prompt box, or type /plan followed by a task. Newer versions may start new conversations in Auto — check the indicator.

Review changes, and know how to undo

In Manual mode Claude shows old and new side by side, then waits for you to accept or reject. For undo, hover over one of your messages and click rewind:

Rewind optionEffect
Fork conversationNew chat branch. Files stay as they are.
Rewind codeFiles go back to this point. Chat history is kept.
Fork and rewindBoth — new chat branch and files go back together.
Checkpoints only track Claude's own file edits — not shell commands it ran or edits you made yourself. Ask Claude to commit before big tasks; that's your real save point.

A workflow that works

  1. Describe the goalIn Plan mode, say what you want and why.
  2. Review the planComment, adjust, then approve.
  3. Let Claude buildManual mode, so you see each step.
  4. Review the changesAccept what's right, reject what isn't.
  5. CommitSay "commit my changes." Then start the next task.

Small steps with a commit after each are much easier to fix than one giant request.

Ask the way you'd brief a colleague

Vague

"Make a website."

Claude has to guess the purpose, content and style.

Clear

"Build a one-page site for our bake sale on [date]. Show the time, place and a short menu, plus a sign-up form. Keep it simple and readable on a phone. Plan first and wait for my OK."

Purpose, content, constraints, and a checkpoint — all in one ask.

Point at files with @ (like @menu.txt), paste a screenshot with Ctrl+V, and ask plain questions too — "What does this file do?"

Handy slash commands

CommandWhat it does
/planSwitch to Plan mode, e.g. "/plan add a contact form"
/compactShrinks a long conversation so Claude stays sharp
/btwAsk a side question without cluttering the chat
/modelChange the model or how hard Claude thinks
/usageSee how much of your plan you've used
/skillsSee the skills Claude can use
/exportSave the conversation to a file

5. Mosaic

Where your project lives online. You don't learn its controls — Claude does, through the mosaic-platform skill.

What every project gets

Website hosting

Live at its own address.

Database

Stores sign-ups, orders, notes.

File storage

Holds uploads like photos and PDFs.

User sign-in

Password, magic link, Google or GitHub.

Your own address

Attach a nicer web address.

Email Pro

Send invites or confirmations.

Version history

Every deploy saved; roll back anytime.

Archive

Take a project offline without losing anything.

See Capabilities for how each of these actually looks and works.

What you'd actually say to Claude

When you want to…Ask Claude
Put your site online"Deploy this folder to Mosaic as a new project."
Save form entries"Store the sign-up form entries in the Mosaic database."
Let people upload photos"Save uploaded photos to Mosaic storage."
Add a login"Add sign-in with Google using Mosaic's built-in sign-in."
Check it worked"Check the deploy status and give me the live link."
Undo a bad update"Roll back to the last version that worked."
Retire a project"Archive this Mosaic project." (not delete)

What happens when you say "put it live"

  1. Creates the projectPicks a name and sets up its database and history.
  2. Sends your filesCopies the folder's files up to Mosaic.
  3. Mosaic builds itWorks out the kind of project from the files.
  4. Claude checksWaits until it's running, or reads the error log.
  5. It's liveUsually within a minute, at its web address.

Putting a project on a custom domain

A nicer address doesn't mean a new project — every project keeps its mosaic.site address, and you attach an extra one to the same project. Just say: "Attach bake-sale.cruxosai.com to this project." If Mosaic says a domain is "managed by another account," ask the domain owner to add your email — don't try to claim it yourself.

6. Staying safe

Four rules that prevent nearly every problem we've seen.

Never paste your Mosaic key into chat

It starts with mk_. If one ever lands in a chat, ask Claude to regenerate it.

Archive, don't delete

Archiving can be undone. Deleting wipes the database, files and history for good.

Read before you approve

Especially anything that deletes, deploys, or changes settings.

Give updates five minutes

Pages update at once, but styling and images can look old for a few minutes.

7. Putting it together

From empty folder to live site — swap "bake sale" for whatever fits your project.

  1. Make a folderDocuments\bake-sale
  2. Open it in VS CodeFile › Open Folder, trust it, open Claude.
  3. Plan it"Plan a one-page bake sale site with a volunteer sign-up form."
  4. Build and reviewApprove the plan, check each change, then commit.
  5. Put it live"Deploy this to Mosaic and give me the link."
  6. Give it a nicer address"Attach bake-sale.cruxosai.com to this project."
  7. Change it, safelyEdit, commit, redeploy. If it breaks: "Roll back to the last working version."

8. Troubleshooting

Covers most of what goes wrong in a first session.

You seeTry
No Spark iconOpen a file, or click ✻ Claude Code in the status bar. Check you trusted the folder.
Asked to sign in againCtrl+Shift+P › Developer: Reload Window, then sign in.
Claude can't find a fileIt's probably outside the open folder. Move it in.
Site looks old after a changeWait up to five minutes for styling and images to catch up.
Deploy failed"Check the Mosaic deploy logs and fix the problem."
"Managed by another account"Ask the domain owner to add your email to the team domain.
Anything else in VS CodeCtrl+Shift+P › Claude Code: Show Logs, then ask for help.

9. Wrapping up

If you only remember three things:

  1. One project, one folder.
  2. Plan first, and read before you approve.
  3. Never paste your Mosaic key into chat.

Learn more: code.claude.com/docs/en/vs-code · Mosaic dashboard: mosaic.site/dashboard · the Cheat Sheet has the short version of all of this.