Agent Skills in Claude Code and Visual Studio Code: Setup, Benefits, Risks, and a Step-by-Step Example
GitHub Copilot often assists from inside the editor. Claude Code takes a broader, project-oriented approach.
A coding agent can inspect multiple files, search the codebase, propose a plan, edit connected parts of the project, and help run commands. This makes it useful for tasks that involve more than completing one line or explaining one function.
The same capability also creates more risk.
When an AI tool can see an entire project and modify several files, you need to know which directory it can access, which commands it wants to run, and how you will review the result. Starting Claude Code in the wrong folder or approving every action without reading it can turn a small request into a difficult recovery exercise.
This guide establishes a controlled first workflow using the WSL development environment created earlier in the series.
Version note: Claude Code installation methods, supported operating systems, authentication options, account requirements, permission controls, model availability, and editor integrations can change. Before publication, verify all version-sensitive details against the current official Anthropic Claude Code documentation.
By the end of this guide, you should be able to:
This guide does not ask Claude Code to build a complete application. The first goal is learning the workflow safely.
The development environment in this series now contains several layers:
Visual Studio Code
├── Project file navigation
├── Code editing
├── Integrated terminal
└── Git change review
WSL
├── Linux file system
├── Linux shell
├── Git
├── Development runtimes
└── Claude Code
GitHub
└── Remote repositoryClaude Code runs from the terminal and operates on the project available from that terminal’s current directory.
That means the terminal location matters.
Suppose your terminal is currently inside:
/home/alex/projects/vibe-coding-practiceStarting Claude Code there gives it the context of that project.
Starting it one level higher, inside:
/home/alex/projectsmay expose a broader folder containing several projects.
The safest beginner habit is to move into one specific Git repository before launching a coding agent.
A normal AI chat can answer questions based on text you provide.
A project-level coding agent may also be able to:
This creates a tighter feedback loop:
Inspect project
→ Plan change
→ Edit files
→ Run checks
→ Review resultIt also means that your request is not the only thing controlling the outcome.
The project itself supplies context. Existing files, package scripts, configuration, documentation, and previous conventions can influence the agent’s decisions.
Before using Claude Code, make sure the project contains only material you are authorized to share with the service under the applicable terms and organizational policies.
Do not use a personal account to process confidential employer code without permission.
Open the WSL terminal.
Move into the practice repository:
cd ~/projects/vibe-coding-practiceConfirm the path:
pwdThe result should resemble:
/home/your-username/projects/vibe-coding-practiceOpen the repository in VS Code:
code .In the integrated terminal, verify the environment:
pwd
whoami
uname -aThe path should point to the project inside WSL, and uname -a should confirm a Linux environment.
Now inspect Git:
git statusThe best starting state is a clean working tree.
A clean repository gives you a clear baseline. After Claude Code makes changes, every difference shown by Git should be attributable to the new task.
If Git reports existing changes, inspect them:
git diffDo not start a new AI task until you understand whether those changes should be committed, kept unfinished, or removed.
Even when git status is clean, review the recent history:
git log --oneline -5This displays the five most recent commits in compact form.
You should see a recent known-good checkpoint.
When the project contains completed but uncommitted work, record it before using the coding agent:
git add path/to/verified-file
git diff --staged
git commit -m "Record project state before Claude Code setup"Do not create a meaningless empty commit only to say that a checkpoint exists. The existing latest commit already serves as a checkpoint when the working tree is clean.
The essential requirement is knowing which commit you can return to.
Claude Code installation has commonly depended on a supported Node.js and npm environment, although the official installation method may change.
Before using any installation command, check the current official requirements.
Inside WSL, run:
node --versionThen:
npm --versionA version number from each command confirms that Node.js and npm are available in the WSL environment.
Remember that Node.js installed on Windows is not automatically the same as Node.js installed inside WSL.
If the commands are not recognized, install a currently supported Node.js release inside WSL using the method recommended by the official Node.js and Claude Code documentation.
A Node version manager is often useful because it allows different Node.js versions to be installed and changed without modifying system packages directly. However, the installation instructions for version managers can also change, so follow their current official documentation rather than copying an old shell command.
After installation, close and reopen the WSL terminal if required, then verify again:
node --version
npm --versionDo not continue until both commands work in the same terminal where you plan to run Claude Code.
At the time this article is finalized, use only the installation method shown in the current official Anthropic documentation.
A commonly documented npm-based installation pattern has been:
npm install -g @anthropic-ai/claude-codeThis command asks npm to install the Claude Code package globally for the current environment.
The -g option makes the command-line tool available outside a single Node.js project.
Because package names and installation methods can change, verify this exact command before publication.
sudo AutomaticallySome npm installations fail with a permissions error, leading beginners to retry with:
sudo npm install -g package-nameDo not add sudo automatically.
Running npm package installation as a Linux administrator can create files owned by the wrong user and make later updates harder to manage.
A better approach is to use:
Fix the underlying permission setup rather than repeatedly elevating npm.
After installation, run:
claude --versionA successful result should display Claude Code version information.
The exact output may vary.
You can also check whether the shell can locate the executable:
which claudeThis should display a Linux path to the installed command.
If claude --version works, the command-line tool is available inside WSL.
Before launching Claude Code, confirm the directory again:
pwd
git statusThe path should be the practice repository, and the Git working tree should be clean.
Now start Claude Code:
claudeThe first launch may begin an authentication or setup flow.
Depending on the current product configuration, the process may involve:
Follow the current official flow.
Do not enter credentials into an unofficial website or paste API keys into project files.
Claude Code access may depend on the current account type and usage arrangement.
Before completing authentication, confirm:
Do not assume that access included in one Claude product automatically applies to every Claude Code feature.
Pricing, included usage, limits, and model access may change. Check the current official account and billing pages.
When an API key is required, do not add it to:
README.md
app.js
package.json
CLAUDE.mdDo not paste it into a prompt that may be saved in project history.
Use the authentication mechanism and environment configuration described in the current official documentation.
Never commit an API key to Git, even in a private repository.
A coding agent needs access to project files to work effectively.
Claude Code may ask you to confirm that you trust the current project or authorize access to the directory.
Before approving, check:
pwdThen inspect the top-level files:
ls -laMake sure the folder is the intended repository.
Do not approve broad access when the terminal is accidentally inside:
/home/your-usernameor:
/home/your-username/projectsThose locations may contain unrelated files or repositories.
The principle is simple:
Start Claude Code from the smallest directory that contains the project it needs.
Your first request should not be:
Improve this whole project.That request has no clear boundary.
Instead, begin with inspection.
Use a prompt similar to:
Inspect this repository without changing any files. Summarize the top-level files, explain the apparent purpose of the project, and identify anything I should review before making changes.This prompt sets three useful constraints:
Review the response.
Compare it with the actual repository in VS Code.
Ask:
You are testing the working relationship before allowing edits.
Claude Code may support a project instruction file, commonly named:
CLAUDE.mdThe current official tool may provide a command or workflow for generating or initializing this file.
Verify the current syntax before using it.
A project instruction file can contain durable guidance such as:
# Project Instructions
## Purpose
This repository is used for beginner Git and AI-assisted coding practice.
## Working Rules
- Make the smallest change that satisfies the request.
- Do not add dependencies without approval.
- Do not edit files unrelated to the task.
- Explain proposed commands before running them.
- Run available checks after code changes.
- Summarize all modified files.This file can help maintain consistency across sessions.
However, do not use it as a place for:
Also review any generated instruction file before committing it. An AI-created project guide may contain incorrect assumptions about the repository.
A first task should be:
A documentation edit is appropriate.
Ask Claude Code:
Review README.md and add a short “Development Workflow” section. Mention that changes should be reviewed with git diff, tested when applicable, and committed in small units. Do not modify any other file. Show me the proposed change before applying it.This prompt provides:
Before approving the edit, inspect the proposed change.
Check whether:
README.md is affected;Claude Code may request permission before performing actions.
Possible actions include:
Read each request.
Do not approve a command only because the tool says it is necessary.
Before approving, ask:
For a JavaScript file, Claude Code may propose:
node copilot-practice.jsThis runs the local script.
You should still read the script before execution, but the command is limited and understandable.
Claude Code may propose:
npm install some-packageThis changes project dependencies and may download code from the internet.
Before approving, ask:
package.json or a lock file change?A command involving recursive deletion, system configuration, or administrative permissions deserves exceptional caution.
Do not approve commands such as broad file deletion unless you fully understand the target path and consequences.
A coding agent should never replace your responsibility to read commands.
After Claude Code completes the documentation task, leave or pause the session as appropriate and return to the terminal.
Run:
git statusThe expected result should show only:
README.mdIf other files changed, investigate them before continuing.
Review the actual difference:
git diffOr:
git diff README.mdCompare the result with the original request.
Ask:
The coding agent’s summary is not a substitute for the Git diff.
When the change is poor, do not ask the agent to keep adding fixes indefinitely.
A small uncommitted change can be discarded using an appropriate Git restore command.
For example:
git restore README.mdThis restores the working file to the last committed version.
It permanently removes the uncommitted edits to that file, so review the diff first.
Confirm:
git statusThe working tree should be clean again.
For a partially useful result, you may edit the file manually in VS Code instead of asking for repeated automated revisions.
This is an important professional habit: AI assistance should reduce work, not trap the project in an endless repair loop.
When the README change is correct, stage it:
git add README.mdReview the staged version:
git diff --stagedThen commit:
git commit -m "Document AI-assisted development workflow"Check the final state:
git status
git log --oneline -3The working tree should be clean, and the new commit should appear at the top of the history.
Push it when ready:
git pushThe verified change is now part of the project history.
After any task, ask Claude Code for a concise summary such as:
Summarize what you changed, list every modified file, and describe how I can verify the result. Do not make additional changes.Compare the summary with:
git status
git diffThe Git output is the source of truth for tracked file changes.
The AI summary may still be useful for understanding intent, but it can omit a file or misdescribe an edit.
A beginner may be tempted to use the new tool immediately for a large request:
Turn this repository into a complete task management app with authentication, a database, and deployment.That request contains several independent systems.
A better sequence is:
1. Inspect the repository.
2. Create a basic static page.
3. Add one task input.
4. Display one task.
5. Add input validation.
6. Add local persistence.
7. Add tests.
8. Review and deploy.Each step can be inspected and committed separately.
Small tasks reduce:
The goal is not to minimize every prompt. It is to keep each change understandable.
claude Command Is Not RecognizedCheck:
claude --version
which claude
npm --versionPossible causes include:
Use the current official troubleshooting instructions rather than adding random path entries.
Windows and WSL are separate environments.
Install a supported Node.js version inside WSL and verify it from the WSL terminal.
Check the browser’s active Anthropic account before approving access.
Sign out of unintended accounts or use an appropriate browser profile.
Do not connect a personal Claude account to restricted company code without authorization.
Check:
pwd
ls -laYou may have started the tool from the wrong directory.
Exit the session, move into the repository, and start again:
cd ~/projects/vibe-coding-practice
claudeStop before approving.
Restate the task with tighter boundaries:
Modify only README.md. Do not create files, install packages, or run network commands. Show the proposed diff before applying it.Large unexpected scope is a reason to pause, not a reason to approve faster.
Ask why it is required.
Most project-level tasks should not need sudo.
Do not grant administrative access to solve an ordinary file-editing problem.
Stop the loop.
Run:
git status
git diffReturn to the last known-good state when necessary.
Then reduce the task and provide the exact error or requirement.
Inspect it before staging:
git statusOpen the file and determine why it was created.
Do not use git add . until every listed file is understood.
Use this sequence for early tasks.
cd ~/projects/vibe-coding-practicepwd
git statusclaudeInspect the project without making changes. Summarize the structure and identify the file relevant to my task.State:
Read file edits and commands before approval.
git status
git diffUse the project’s documented command.
git add README.mdgit diff --staged
git commit -m "Describe the verified change"This workflow places Claude Code between two Git checkpoints rather than giving it uncontrolled responsibility for the repository.
Before continuing to the next article, confirm that you can:
You should also be able to explain this principle:
Claude Code can act across a project, but the developer controls the directory, permissions, task scope, review, and final commit.
Claude Code can help with broader project tasks than a simple inline completion tool. It can inspect a repository, coordinate changes across files, and participate in a terminal-based development workflow.
That power is most useful when it operates inside clear boundaries.
Start from the correct project directory. Confirm a clean Git state. Ask for inspection before editing. Limit the first task to one small change. Read every permission request. Review the actual Git diff, run the relevant checks, and commit only after the result is verified.
The next article will focus entirely on reviewing and reversing AI-generated changes with Git. We will inspect modified files, compare staged and unstaged changes, identify unrelated edits, discard selected changes, and return safely to a known checkpoint.
The supported Windows setup may change over time.
For this series, WSL provides a Linux environment that works well with terminal-based development tools. Check the current official Claude Code system requirements before choosing between WSL and any supported native Windows option.
No.
The Claude website provides a conversational interface. Claude Code is designed for terminal-based work with project files and development commands.
The accounts or billing methods may be related, but current access rules should be verified through official documentation.
No.
Read each command, understand its effect, and approve it only when it is necessary for the task. Be especially cautious with package installation, file deletion, network access, administrator privileges, and commands that affect files outside the project.
Comments
Post a Comment