skills.rest
mkarrmann
mkarrmannCOMMUNITY
Explore all skills by this author →
GitHub

screenshot-workflow

Read uploaded screenshots from the VS Code Explorer by file path.

1|Updated Nov 29, 2021
Search Tags:#vscode#ssh#screenshot#upload#read#visual-context
One-click install
npx skills add https://github.com/mkarrmann/dotfiles --skill screenshot-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-workflow
Source: https://github.com/mkarrmann/dotfiles/tree/main/agent_config/skills/screenshot-workflow
Command: npx skills add https://github.com/mkarrmann/dotfiles --skill screenshot-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of capturing and sharing visual context when terminal-based interfaces cannot handle image drag-and-drop by enabling screenshots to be uploaded via the VS Code Explorer and read by Claude Code using file paths.

Core Features & Use Cases

  • Drag-and-drop: Upload screenshots into the VS Code Explorer and reference them by path for processing.
  • Visual context sharing: Provide Claude Code with the latest or a specific image to analyze in conversations.
  • File-path reading: Claude Code reads images via the Read tool from the designated screenshots directory.

Quick Start

Drop a screenshot into the VS Code Explorer and tell Claude Code to read it from its file path.

Frequently Asked Questions about screenshot-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share screenshots with Claude Code in VS Code over SSH?▼

You can share screenshots by dragging them into the VS Code Explorer and telling Claude Code to read the image from its file path. The Skill reads images directly from a designated screenshots directory.

Can Claude Code read a screenshot file path from the VS Code Explorer?▼

Yes, Claude Code reads screenshots via the Read tool using file paths. You drop the image into the VS Code Explorer and reference the path for Claude Code to process the visual context.

What is the best way to provide visual context to a terminal-based AI assistant?▼

The best way to provide visual context is uploading screenshots through the VS Code Explorer. This bypasses terminal drag-and-drop limitations by allowing the AI to read images via their file paths.

Do I need a specific directory setup to read screenshots in VS Code?▼

Yes, reading screenshots requires a setup that exposes a ~/screenshots directory, utilizes a workspace symlink, and includes a latest-screenshot helper script to locate the most recent image file.

How do I get Claude Code to analyze my latest screenshot automatically?▼

To analyze your latest screenshot, ensure the latest-screenshot helper script is configured. Claude Code uses this setup in the ~/screenshots directory to locate and read the most recent image.

Related Skills

Explore More Software Engineering Skills→
iPlug2iPlug2
2.4k

screenshot

Capture plugin UI screenshots via a --screenshot option to PNG files on macOS standalone apps.

Official
Basic
RxFitRxFit

design-review

Automate visual code review and design correction for web UIs.

Community
Advanced
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced
atro2829-hubatro2829-hub

image-understand

Analyze static images to extract descriptions, objects, text, and visual structure.

Community
Advanced