Agent Skills in Claude Code and Visual Studio Code: Setup, Benefits, Risks, and a Step-by-Step Example

Image
 AI coding assistants are useful for one-off questions, but many development tasks are not one-off tasks. A team may follow the same testing procedure before every release, use a specific format for code reviews, or require certain checks whenever a database migration is created. Repeating those requirements in every prompt is inefficient. Putting all of them into a permanent instruction file is not always ideal either, because the assistant may receive irrelevant information for tasks that do not need it. This is the problem that Agent Skills are designed to solve. A skill packages reusable instructions, supporting files, examples, and optional scripts into a folder. Claude Code or GitHub Copilot in Visual Studio Code can discover that folder and load its contents when the current task matches the skill’s purpose. Both environments support the open Agent Skills format, which makes it possible to share some skills across tools. This guide explains what skills are, how they differ ...

How to Set Up Claude Code for Your First Project

 


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.

What You Will Learn

By the end of this guide, you should be able to:

  • prepare a clean Git repository for Claude Code;
  • confirm that your WSL terminal is in the correct project;
  • check the required runtime and package tools;
  • install Claude Code using the current official method;
  • authenticate with an approved Anthropic account or billing method;
  • start Claude Code from a project directory;
  • understand project access and permission prompts;
  • ask Claude Code to inspect before editing;
  • complete one small documentation task;
  • review all changes with Git before committing them;
  • stop or reject a task when the proposed actions are too broad.

This guide does not ask Claude Code to build a complete application. The first goal is learning the workflow safely.

Understand How Claude Code Fits the Tool Stack

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 repository

Claude 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-practice

Starting Claude Code there gives it the context of that project.

Starting it one level higher, inside:

/home/alex/projects

may expose a broader folder containing several projects.

The safest beginner habit is to move into one specific Git repository before launching a coding agent.

Claude Code Versus a Normal Chat Window

A normal AI chat can answer questions based on text you provide.

A project-level coding agent may also be able to:

  • inspect files directly;
  • search across the repository;
  • understand relationships between files;
  • propose multi-file changes;
  • create or delete files;
  • run development commands;
  • read test output;
  • revise the implementation based on results.

This creates a tighter feedback loop:

Inspect project
→ Plan change
→ Edit files
→ Run checks
→ Review result

It 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.

Prepare the Repository Before Installation

Open the WSL terminal.

Move into the practice repository:

cd ~/projects/vibe-coding-practice

Confirm the path:

pwd

The result should resemble:

/home/your-username/projects/vibe-coding-practice

Open the repository in VS Code:

code .

In the integrated terminal, verify the environment:

pwd
whoami
uname -a

The path should point to the project inside WSL, and uname -a should confirm a Linux environment.

Now inspect Git:

git status

The 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 diff

Do not start a new AI task until you understand whether those changes should be committed, kept unfinished, or removed.

Create a Starting Checkpoint

Even when git status is clean, review the recent history:

git log --oneline -5

This 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.

Check the Required Runtime

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 --version

Then:

npm --version

A 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 --version

Do not continue until both commands work in the same terminal where you plan to run Claude Code.

Install 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-code

This 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.

Avoid Using sudo Automatically

Some npm installations fail with a permissions error, leading beginners to retry with:

sudo npm install -g package-name

Do 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:

  • a user-level Node.js version manager;
  • a correctly configured npm global directory;
  • the current official Claude Code installation guidance.

Fix the underlying permission setup rather than repeatedly elevating npm.

Verify the Installation

After installation, run:

claude --version

A 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 claude

This should display a Linux path to the installed command.

If claude --version works, the command-line tool is available inside WSL.

Start Claude Code from the Correct Project

Before launching Claude Code, confirm the directory again:

pwd
git status

The path should be the practice repository, and the Git working tree should be clean.

Now start Claude Code:

claude

The first launch may begin an authentication or setup flow.

Depending on the current product configuration, the process may involve:

  • opening a browser;
  • signing in with an Anthropic account;
  • selecting an eligible subscription;
  • connecting an API billing method;
  • entering a device code;
  • approving local access.

Follow the current official flow.

Do not enter credentials into an unofficial website or paste API keys into project files.

Review Authentication and Billing Carefully

Claude Code access may depend on the current account type and usage arrangement.

Before completing authentication, confirm:

  • which Anthropic account is active;
  • whether the account is personal or organization-managed;
  • which subscription or billing method will be used;
  • whether usage limits or usage-based charges apply;
  • whether the project is appropriate for that account;
  • whether your organization permits the connection.

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.

Keep API Credentials Out of the Repository

When an API key is required, do not add it to:

README.md
app.js
package.json
CLAUDE.md

Do 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.

Understand Project Trust and Access

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:

pwd

Then inspect the top-level files:

ls -la

Make sure the folder is the intended repository.

Do not approve broad access when the terminal is accidentally inside:

/home/your-username

or:

/home/your-username/projects

Those locations may contain unrelated files or repositories.

The principle is simple:

Start Claude Code from the smallest directory that contains the project it needs.

Ask Claude Code to Inspect Before Editing

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:

  • inspect only;
  • do not edit;
  • report findings.

Review the response.

Compare it with the actual repository in VS Code.

Ask:

  • Did it identify the correct files?
  • Did it misunderstand the project’s purpose?
  • Did it mention files that do not exist?
  • Did it overlook an important document?
  • Did it propose changes even though the request was inspection only?

You are testing the working relationship before allowing edits.

Create Project Instructions Carefully

Claude Code may support a project instruction file, commonly named:

CLAUDE.md

The 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:

  • passwords;
  • API keys;
  • private URLs;
  • personal notes;
  • customer information;
  • temporary debugging data.

Also review any generated instruction file before committing it. An AI-created project guide may contain incorrect assumptions about the repository.

Choose a Safe First Task

A first task should be:

  • small;
  • easy to verify;
  • limited to one file;
  • reversible;
  • free of security-sensitive behavior;
  • independent of external services.

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:

  • the target file;
  • the requested content;
  • the scope limit;
  • a review requirement.

Before approving the edit, inspect the proposed change.

Check whether:

  • only README.md is affected;
  • the wording matches the project;
  • no unsupported claims were added;
  • existing content remains intact;
  • the section is placed logically.

Understand Permission Prompts

Claude Code may request permission before performing actions.

Possible actions include:

  • reading files;
  • editing files;
  • creating files;
  • deleting files;
  • running terminal commands;
  • installing packages;
  • accessing network resources;
  • executing tests or build scripts.

Read each request.

Do not approve a command only because the tool says it is necessary.

Before approving, ask:

  1. What does this command do?
  2. Which files or systems can it affect?
  3. Is it required for the current task?
  4. Does it match the project’s documented workflow?
  5. Can I reverse the result?
  6. Does it require network or administrative access?

Low-Risk Example

For a JavaScript file, Claude Code may propose:

node copilot-practice.js

This runs the local script.

You should still read the script before execution, but the command is limited and understandable.

Higher-Risk Example

Claude Code may propose:

npm install some-package

This changes project dependencies and may download code from the internet.

Before approving, ask:

  • Why is the package needed?
  • Is there an existing solution?
  • Is the package reputable and maintained?
  • Will package.json or a lock file change?
  • Does the project permit dependencies?
  • Is the package appropriate for the license and environment?

Destructive Example

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.

Review the Result with Git

After Claude Code completes the documentation task, leave or pause the session as appropriate and return to the terminal.

Run:

git status

The expected result should show only:

README.md

If other files changed, investigate them before continuing.

Review the actual difference:

git diff

Or:

git diff README.md

Compare the result with the original request.

Ask:

  • Did the new section mention the required workflow?
  • Did Claude Code change unrelated text?
  • Did it reformat the entire file?
  • Did it add incorrect commands?
  • Did it expose private information?
  • Is the tone consistent?

The coding agent’s summary is not a substitute for the Git diff.

Reject or Reverse an Unwanted Change

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.md

This 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 status

The 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.

Commit the Verified Change

When the README change is correct, stage it:

git add README.md

Review the staged version:

git diff --staged

Then commit:

git commit -m "Document AI-assisted development workflow"

Check the final state:

git status
git log --oneline -3

The working tree should be clean, and the new commit should appear at the top of the history.

Push it when ready:

git push

The verified change is now part of the project history.

Ask for a Change Summary

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 diff

The 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.

Keep the First Sessions Small

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:

  • context drift;
  • unnecessary file changes;
  • review difficulty;
  • debugging scope;
  • recovery cost.

The goal is not to minimize every prompt. It is to keep each change understandable.

Common Claude Code Setup Problems

The claude Command Is Not Recognized

Check:

claude --version
which claude
npm --version

Possible causes include:

  • installation did not complete;
  • npm’s global executable location is not in the shell path;
  • Claude Code was installed in Windows rather than WSL;
  • the terminal needs to be restarted;
  • the official installation method has changed.

Use the current official troubleshooting instructions rather than adding random path entries.

Node.js Works in PowerShell but Not in WSL

Windows and WSL are separate environments.

Install a supported Node.js version inside WSL and verify it from the WSL terminal.

Authentication Opens the Wrong Account

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.

Claude Code Cannot Find the Project

Check:

pwd
ls -la

You may have started the tool from the wrong directory.

Exit the session, move into the repository, and start again:

cd ~/projects/vibe-coding-practice
claude

Claude Code Proposes Too Many Changes

Stop 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.

A Command Requests Administrator Access

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.

The Agent Keeps Trying Different Fixes

Stop the loop.

Run:

git status
git diff

Return to the last known-good state when necessary.

Then reduce the task and provide the exact error or requirement.

An Unexpected File Appears

Inspect it before staging:

git status

Open the file and determine why it was created.

Do not use git add . until every listed file is understood.

A Safe Claude Code Workflow

Use this sequence for early tasks.

1. Enter the Project

cd ~/projects/vibe-coding-practice

2. Verify the Environment

pwd
git status

3. Start Claude Code

claude

4. Ask for Inspection

Inspect the project without making changes. Summarize the structure and identify the file relevant to my task.

5. Request One Small Change

State:

  • the target file;
  • expected behavior;
  • prohibited changes;
  • verification method.

6. Review Proposed Actions

Read file edits and commands before approval.

7. Inspect Git

git status
git diff

8. Run the Relevant Check

Use the project’s documented command.

9. Stage Specific Files

git add README.md

10. Review and Commit

git 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.

Verify Your Claude Code Setup

Before continuing to the next article, confirm that you can:

  • run Claude Code inside WSL;
  • verify the installed version;
  • start it from the intended repository;
  • identify the account used for authentication;
  • explain how billing or usage is handled for your account;
  • ask the agent to inspect without editing;
  • limit a task to one file;
  • review permission requests;
  • reject an unnecessary command;
  • inspect all changes with Git;
  • discard an uncommitted change when needed;
  • commit only a verified result.

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.

Conclusion

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.

Frequently Asked Questions

Does Claude Code require WSL on Windows?

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.

Is Claude Code the same as the Claude website?

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.

Should I allow Claude Code to run every command it suggests?

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

Popular posts from this blog

Claude Code Multi-Agent Setup for Beginners: Models, Roles, and Your First Project

The Limits and Future of Vibe Coding

How to Test and Deploy Your First Vibe-Coded App