vscode
VS Code integration for viewing diffs and comparing files. Use when showing file differences to the user.
Best use case
vscode is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
VS Code integration for viewing diffs and comparing files. Use when showing file differences to the user.
Teams using vscode should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vscode/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vscode Compares
| Feature / Agent | vscode | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
VS Code integration for viewing diffs and comparing files. Use when showing file differences to the user.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# VS Code CLI Tools Tools for integrating with VS Code, primarily for viewing diffs. ## Requirements VS Code must be installed with the `code` CLI available in PATH. ## Opening a Diff Compare two files side by side in VS Code: ```bash code -d <file1> <file2> ``` ## Git Diffs in VS Code ### Simple Approach (no config needed) Extract the old version to a temp file, then diff: ```bash # Compare with previous commit git show HEAD~1:path/to/file > /tmp/old && code -d /tmp/old path/to/file # Compare with specific commit git show abc123:path/to/file > /tmp/old && code -d /tmp/old path/to/file # Compare staged version with working tree git show :path/to/file > /tmp/staged && code -d /tmp/staged path/to/file ``` ### Gotchas - File must exist and have changes between the compared revisions - Use `git log --oneline -5 -- path/to/file` to verify file has history before diffing ## When to Use - Showing the user what changed in a file - Comparing two versions of code - Reviewing git changes visually
Related Skills
windows-path-rename
Sanitize Git paths that are invalid on Windows (for example :, ", |, ?, * and trailing dot/space) and commit safe renames. Use when clone or checkout on Windows fails with "error: invalid path".
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
browser-tools
Interactive browser automation via Chrome DevTools Protocol. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.
vscode-extension-guide-en
Guide for VS Code extension development from scaffolding to Marketplace publication
vscode-ext-localization
Guidelines for proper localization of VS Code extensions, following VS Code extension development guidelines, libraries and good practices
vscode-ext-commands
Guidelines for contributing commands in VS Code extensions. Indicates naming convention, visibility, localization and other relevant attributes, following VS Code extension development guidelines, libraries and good practices
vscode-sftp-config
This skill should be used when setting up SFTP deployment for static websites to production servers, including converting projects from Docker/Express to static hosting, deploying Vue/React/Angular builds, setting up Slidev presentations, or configuring Hugo/Jekyll/Gatsby sites. Use this when the user asks to "setup SFTP deployment", "deploy static site to server", "configure Nginx for static files", "convert from Docker to static hosting", "deploy Vue build to production", "setup subdomain hosting", or "configure SFTP in VS Code". Provides SFTP configuration templates and production-ready Nginx configurations with security headers and caching.
vscode-port-monitor-config
This skill should be used when configuring VS Code Port Monitor extension for development server monitoring. Use when the user asks to "set up port monitoring for Vite", "monitor my dev server ports", "configure port monitor for Next.js", "track which ports are running", "set up multi-port monitoring", "monitor frontend and backend ports", or "check port status in VS Code". Provides ready-to-use configuration templates for Vite (5173), Next.js (3000), and microservices architectures with troubleshooting guidance.
vscode-httpyac-config
Configure VSCode with httpYac for API testing and automation. This skill should be used specifically when converting API documentation to executable .http files (10+ endpoints), setting up authentication flows with pre-request scripts, implementing request chaining with response data, organizing multi-file collections with environment management, or establishing Git-based API testing workflows with CI/CD integration.
vscode-release-notes-writer
Guidelines for writing and reviewing Insiders and Stable release notes for Visual Studio Code.
vscode-playwright
VS Code screenshot capture using Playwright MCP with serve-web for slide decks and documentation - Brought to you by microsoft/hve-core