Vision

Vision Image Processing Skill

Overview

This skill leverages Claude's multimodal vision capabilities to analyze, process, and extract insights from images. It supports a wide range of visual understanding tasks including optical character recognition (OCR), image classification, diagram analysis, chart interpretation, and visual comparison.

When to Use This Skill

Activate this skill when users need to:

• Extract text from images, screenshots, or scanned documents (OCR)
• Classify or categorize images based on visual content
• Analyze charts, graphs, or data visualizations to extract insights
• Compare multiple images (diagrams, screenshots, designs)
• Describe or caption images in detail
• Answer questions about visual content
• Detect objects, people, or elements within images
• Analyze UI/UX from screenshots or mockups
• Read handwritten text or notes
• Process receipts, invoices, or forms for data extraction

Core Capabilities

1. Optical Character Recognition (OCR)

Extract text from images with high accuracy:

Instructions:

• Use the Read tool to load the image file
• Analyze the image and extract all visible text
• Preserve formatting, layout, and structure when possible
• Handle multiple languages and fonts
• Identify and extract text from challenging contexts (handwriting, artistic fonts, rotated text)

Output Format:

• Provide extracted text in markdown format
• Include confidence notes for challenging sections
• Maintain document structure (headings, paragraphs, lists)

Example Use Cases:

• Screenshot text extraction
• Scanned document digitization
• Receipt and invoice processing
• Handwritten note transcription
• Sign and label reading

2. Image Classification and Categorization

Identify and classify image content:

Instructions:

• Analyze the overall subject and context
• Identify primary objects, scenes, or themes
• Provide classification labels with confidence levels
• Detect style, mood, and artistic elements
• Categorize by industry-relevant taxonomies when applicable

Output Format:

## Primary Classification
- Category: [main category]
- Confidence: [High/Medium/Low]

## Detected Elements
- Object 1: [description]
- Object 2: [description]
...

## Additional Attributes
- Style: [style description]
- Setting: [environment/context]
- Colors: [dominant colors]

3. Chart and Graph Analysis

Extract insights from data visualizations:

Instructions:

• Identify chart type (bar, line, pie, scatter, etc.)
• Extract data points, values, and trends
• Read axes labels, legends, and annotations
• Summarize key insights and patterns
• Flag anomalies or notable data points

Output Format:

## Chart Analysis

**Type:** [Chart Type]

**Data Summary:**
[Extracted data in table or structured format]

**Key Insights:**
1. [Insight 1]
2. [Insight 2]
3. [Insight 3]

**Trends:**
- [Trend description]

**Notable Points:**
- [Anomalies or important observations]

4. Diagram and Visual Comparison

Compare multiple images or diagrams:

Instructions:

• Load all images to be compared
• Identify similarities and differences
• Highlight structural, content, and style variations
• Create side-by-side comparison tables
• Note additions, deletions, or modifications

Output Format:

## Visual Comparison

**Image 1:** [description]
**Image 2:** [description]

### Similarities
- [Similarity 1]
- [Similarity 2]

### Differences
| Aspect | Image 1 | Image 2 |
|--------|---------|---------|
| [Aspect] | [Description] | [Description] |

### Overall Assessment
[Summary of comparison]

5. Detailed Image Description

Generate comprehensive image descriptions:

Instructions:

• Describe the overall scene or subject
• Identify and describe all visible elements
• Note spatial relationships and composition
• Describe colors, lighting, and atmosphere
• Mention text, logos, or symbols if present
• Consider accessibility (generate alt-text compatible descriptions)

Output Format:

• Natural language description (paragraph form)
• Structured element list (bulleted)
• Technical details (dimensions, format, quality notes)

6. Visual Question Answering

Answer specific questions about image content:

Instructions:

• Carefully read the user's question
• Examine the relevant areas of the image
• Provide accurate, specific answers
• Reference visual evidence when answering
• Acknowledge uncertainty if details are unclear

Best Practices:

• Be precise and factual
• Avoid assumptions beyond what's visible
• Describe what you see, not what you infer (unless asked)
• Use spatial language (top-left, center, background, etc.)

7. UI/UX and Design Analysis

Analyze user interfaces and design elements:

Instructions:

• Identify UI components (buttons, forms, navigation)
• Assess layout and visual hierarchy
• Note design patterns and conventions
• Evaluate accessibility considerations
• Compare against design best practices
• Extract color schemes and typography

Output Format:

## UI/UX Analysis

**Component Inventory:**
- [List of UI elements]

**Layout Assessment:**
- [Layout description and grid analysis]

**Design Patterns:**
- [Identified patterns]

**Accessibility Notes:**
- [Contrast, readability, touch targets]

**Recommendations:**
- [Improvement suggestions]

8. Document and Form Processing

Extract structured data from forms, receipts, and documents:

Instructions:

• Identify document type and structure
• Extract field names and values
• Organize data into structured format (JSON, CSV, tables)
• Handle multi-column layouts
• Preserve data relationships and hierarchies

Output Format:

{
  "document_type": "invoice",
  "fields": {
    "invoice_number": "value",
    "date": "value",
    "total": "value"
  },
  "line_items": [...]
}

Workflow and Best Practices

Standard Vision Processing Workflow

1. Load the Image(s)

• Use the Read tool to access image files
• Support formats: PNG, JPG, JPEG, GIF, WebP, PDF (single page)

2. Understand the Request

• Identify the specific task (OCR, classification, analysis, etc.)
• Note any special requirements or focus areas

3. Analyze the Visual Content

• Apply Claude's vision capabilities to examine the image
• Extract relevant information based on the task

4. Structure the Output

• Format results according to the task type
• Use markdown for readability
• Include confidence indicators where appropriate

5. Validate and Refine

• Check for completeness
• Verify accuracy of extracted data
• Provide follow-up options if needed

Quality Guidelines

• Accuracy First: Prioritize correct information over comprehensive coverage
• Structured Output: Use consistent formatting for similar tasks
• Confidence Indicators: Note when details are unclear or ambiguous
• Context Awareness: Consider the user's domain and use case
• Accessibility: Generate descriptions suitable for screen readers when appropriate

Limitations and Considerations

• Image Quality: Low resolution or blurry images may reduce accuracy
• Supported Formats: Primarily raster images; vector graphics may need conversion
• Privacy: Be cautious with sensitive information (PII, credentials, etc.)
• Complex Diagrams: Highly technical diagrams may require domain expertise clarification
• Real-Time Data: Cannot access live data or external resources not in the image

Advanced Features

Batch Processing

For multiple images:

Processing images in batch:
1. [Image1.png] - [Task result]
2. [Image2.png] - [Task result]
3. [Image3.png] - [Task result]

Summary: [Overall findings]

Multi-Modal Context

Combine visual analysis with code, documents, or data:

• Cross-reference image content with codebase files
• Validate design implementations against mockups
• Extract data and populate code templates
• Generate code from UI screenshots

Helper Script Integration

For advanced processing, the skill includes a Python helper script at scripts/image_processor.py:

• Image format conversion
• Metadata extraction
• Batch file operations
• Image preprocessing (resize, enhance, crop)

Usage:

python .claude/skills/vision/scripts/image_processor.py --operation [convert|metadata|batch] --input [path]

Examples

Example 1: OCR from Screenshot

User Request: "Extract the text from this screenshot"

Process: 1. Load image with Read tool 2. Identify all text regions 3. Extract and format text 4. Preserve structure

Output:

## Extracted Text

### Heading
Main paragraph text goes here...

### List Items
- Item 1
- Item 2
- Item 3

---
Note: Text extracted with high confidence. Minor formatting adjustments made for readability.

Example 2: Chart Analysis

User Request: "Analyze this sales chart and tell me the key trends"

Process: 1. Load chart image 2. Identify chart type and data 3. Extract values and labels 4. Analyze trends

Output:

## Sales Chart Analysis

**Chart Type:** Line graph with 3 series (2023-2025)

**Data Points:**
| Month | 2023 | 2024 | 2025 |
|-------|------|------|------|
| Jan   | 120K | 145K | 180K |
| Feb   | 135K | 150K | 195K |
...

**Key Insights:**
1. Consistent year-over-year growth of ~20%
2. Seasonal peak in Q4 across all years
3. 2025 showing accelerated growth trend

**Recommendation:** Prepare for continued high demand in Q4 2025

Example 3: UI Component Comparison

User Request: "Compare these two design mockups and highlight the differences"

Process: 1. Load both images 2. Identify UI components in each 3. Compare layouts and elements 4. Document changes

Output:

## Design Mockup Comparison

### Added Elements (Mockup 2)
- Search bar in header
- User avatar in top-right corner
- Breadcrumb navigation

### Removed Elements
- Sidebar menu (replaced with top navigation)

### Modified Elements
| Component | Mockup 1 | Mockup 2 |
|-----------|----------|----------|
| Primary Button | Blue (#007AFF) | Green (#34C759) |
| Typography | Roboto 16px | SF Pro 15px |
| Card Spacing | 16px | 24px |

### Layout Changes
- Shifted from sidebar to top navigation
- Increased content area width by ~30%
- Changed from 3-column to 4-column grid

Integration with Claude Code

This skill works seamlessly with other Claude Code features:

• Read Tool: Load images from the filesystem
• Write Tool: Save processed results or extracted data
• Bash Tool: Run helper scripts for preprocessing
• Task Tool: Coordinate complex multi-image workflows

Quick Reference

Tips for Best Results

1. Provide Context: Mention the domain or purpose (e.g., "medical diagram," "e-commerce UI") 2. Be Specific: Request specific information rather than general analysis 3. Multiple Angles: For complex images, ask follow-up questions 4. File Paths: Use absolute or relative paths correctly 5. Batch Operations: Process multiple similar images together for consistency

Support and Troubleshooting

Common Issues:

• "Cannot read image" → Verify file path and format
• "Low confidence extraction" → Image may be too low resolution
• "Unable to detect chart data" → Chart may be too complex or stylized

Getting Better Results:

• Use high-resolution images (300+ DPI for documents)
• Ensure good contrast and lighting
• Crop images to focus on relevant areas
• Provide context about the image content

---

License

This skill is licensed under Apache-2.0.

Version

Version: 1.0.0 Last Updated: 2025-11-18 Compatible with: Claude Code (all versions with vision support)

Vision Skill - Quick Reference Card

Common Commands

OCR / Text Extraction

"Extract text from screenshot.png"
"Read the text in this image"
"Transcribe this handwritten note"

Image Classification

"What type of image is this?"
"Classify the objects in photo.jpg"
"Identify the content of this picture"

Chart & Graph Analysis

"Analyze this chart and extract the data"
"What trends do you see in sales_graph.png?"
"Convert this chart to CSV format"

Image Comparison

"Compare design_v1.png and design_v2.png"
"What changed between these screenshots?"
"Find differences in these two diagrams"

Detailed Description

"Describe this image in detail"
"What's in this photo?"
"Generate an alt-text description for accessibility"

UI/UX Analysis

"Analyze this UI screenshot"
"List all interactive elements in this mockup"
"Review this design for accessibility issues"

Document Processing

"Extract data from this receipt"
"Process this invoice and output JSON"
"Parse this form and extract field values"

Helper Script Quick Commands

Metadata

python .claude/skills/vision/scripts/image_processor.py \
  --operation metadata --input image.jpg --json

Convert Format

python .claude/skills/vision/scripts/image_processor.py \
  --operation convert --input image.png --format jpg

Resize

python .claude/skills/vision/scripts/image_processor.py \
  --operation resize --input large.jpg --width 1024

Batch Process

python .claude/skills/vision/scripts/image_processor.py \
  --operation batch --input ./images/ --task resize --width 800

Supported Image Formats

✅ PNG, JPEG/JPG, GIF, WebP, BMP, TIFF ✅ PDF (single page images) ❌ Multi-page PDFs (extract pages first) ❌ Raw formats (RAW, CR2, NEF) - convert first

Best Practices

For Best OCR Results

• Use 300 DPI or higher
• Ensure high contrast
• Keep text straight (not rotated)
• Use PNG for screenshots with text

For Chart Analysis

• Minimum 800×600 resolution
• Clear labels and legends
• Avoid overlapping elements
• Use solid colors

For UI Analysis

• Full-resolution screenshots
• Capture complete viewport
• Include context (browser chrome if relevant)
• Multiple device sizes if responsive

Output Formats

Privacy Reminders

⚠️ Before analyzing images:

• Redact personal information (PII)
• Remove passwords, API keys, tokens
• Check for confidential business data
• Review company policies on cloud processing

Troubleshooting

File Locations

• Skill Definition: .claude/skills/vision/SKILL.md
• Helper Script: .claude/skills/vision/scripts/image_processor.py
• Full Documentation: .claude/skills/vision/references/README.md
• This Reference: .claude/skills/vision/references/QUICK_REFERENCE.md

Examples By Industry

E-commerce

• Product photo analysis
• UI screenshot testing
• Receipt processing

Healthcare

• Medical chart review
• Form digitization
• Report analysis

Finance

• Invoice processing
• Chart analysis
• Document extraction

Development

• UI bug reporting
• Design comparison
• Code screenshot extraction

Marketing

• Design review
• A/B test comparison
• Asset categorization

Legal

• Document scanning
• Contract review
• Evidence analysis

Version

Vision Skill v1.0.0 | Updated: 2025-11-18

---

For detailed documentation, see README.md in the references folder.

Vision Skill - Reference Documentation

Overview

This reference guide provides detailed examples, use cases, and best practices for the Vision skill in Claude Code.

Table of Contents

1. Quick Start 2. Common Use Cases 3. Advanced Examples 4. Helper Script Reference 5. Tips and Best Practices 6. Troubleshooting

---

Quick Start

Activating the Vision Skill

The vision skill is automatically available in Claude Code. Simply provide an image and request analysis:

User: "Analyze this screenshot: /path/to/screenshot.png"

Claude will automatically read and analyze the image using vision capabilities.

Basic Operations

Extract Text (OCR):

"Extract all text from screenshot.png"
"Read the text in this receipt image"
"What does this sign say?"

Classify Images:

"What type of image is this?"
"Classify the content of diagram.png"
"Identify the objects in this photo"

Analyze Charts:

"Analyze the data in this chart"
"Extract values from this graph"
"What trends do you see in sales_chart.png?"

Compare Images:

"Compare design_v1.png and design_v2.png"
"What changed between these two screenshots?"
"Find differences in these diagrams"

---

Common Use Cases

1. Screenshot Documentation

Scenario: You need to document UI elements from screenshots for testing or documentation.

Example:

User: "Analyze this UI screenshot and list all the interactive elements"

Claude: (After loading the image)

## UI Element Analysis

**Interactive Elements Detected:**

1. **Navigation Bar** (Top)
   - Logo (top-left)
   - Search bar (center)
   - User menu dropdown (top-right)

2. **Primary Content Area**
   - Submit button (blue, center-right)
   - Cancel button (gray, center-left)
   - 3 input fields (Name, Email, Phone)

3. **Sidebar** (Left)
   - Dashboard link
   - Reports link
   - Settings link

**Accessibility Notes:**
- All buttons have visible labels
- Good color contrast (WCAG AA compliant)
- Touch targets appear to be 44px minimum

2. Receipt and Invoice Processing

Scenario: Extract structured data from receipts for expense tracking.

Example:

User: "Extract the data from this receipt and format it as JSON"

Claude: (After analyzing the receipt)

{ "merchant": "Coffee Shop", "date": "2025-11-18", "time": "09:45 AM", "items": [ { "description": "Latte", "quantity": 2, "unit_price": 4.50, "total": 9.00 }, { "description": "Croissant", "quantity": 1, "unit_price": 3.25, "total": 3.25 } ], "subtotal": 12.25, "tax": 1.23, "total": 13.48, "payment_method": "Credit Card ending in 4242" }

3. Chart Data Extraction

Scenario: Convert chart visualizations back into raw data for analysis.

Example:

User: "Extract the data points from this line chart as a CSV table"

Claude: (After analyzing the chart)

## Extracted Chart Data

Month,Revenue,Expenses,Profit January,45000,32000,13000 February,48000,33500,14500 March,52000,35000,17000 April,49000,34000,15000 May,55000,36500,18500 June,58000,37000,21000

**Chart Type:** Multi-series line chart
**Time Period:** January - June 2025
**Series:** 3 (Revenue, Expenses, Profit)

**Key Observation:** Consistent upward trend in all metrics, with profit margin improving from 28.9% in January to 36.2% in June.

4. Design Comparison and Review

Scenario: Review design iterations and identify changes.

Example:

User: "Compare mockup_before.png and mockup_after.png and create a change summary"

Claude: (After analyzing both images)

## Design Revision Summary

### Layout Changes
- **Header height:** Reduced from 80px to 64px
- **Grid system:** Changed from 12-column to 16-column layout
- **Card spacing:** Increased from 16px to 24px

### Color Updates
| Element | Before | After | Change |
|---------|--------|-------|--------|
| Primary Button | #0066CC | #0052A3 | Darker blue |
| Background | #F5F5F5 | #FFFFFF | Pure white |
| Text | #333333 | #1A1A1A | Darker gray |

### Typography Changes
- Body font size: 16px → 15px
- Heading font: Roboto → Inter
- Line height: 1.5 → 1.6

### New Components
- Breadcrumb navigation (below header)
- Filter panel (left sidebar)
- Pagination controls (bottom)

### Removed Components
- Legacy sidebar menu
- Footer quick links

### Overall Assessment
This revision modernizes the design with improved spacing and a cleaner color palette. The typography changes enhance readability. The addition of breadcrumbs and filters improves navigation.

5. Handwritten Note Transcription

Scenario: Digitize handwritten meeting notes.

Example:

User: "Transcribe the handwritten notes from this meeting photo"

Claude: (After analyzing the image)

## Meeting Notes - Transcription

**Date:** Nov 18, 2025
**Topic:** Q4 Planning

**Action Items:**
1. Review budget proposals by Friday
2. Schedule team workshop for Dec 5th
3. Update project timeline (Sarah)
4. Prepare client presentation (Mike)

**Key Decisions:**
- Approved hiring 2 new developers
- Postponed feature X to Q1 2026
- Increased marketing budget by 15%

**Next Steps:**
- Follow-up meeting: Nov 25, 2:00 PM
- Send calendar invites to all attendees

**Notes:**
- Some text in bottom-right corner partially obscured
- Bullet point symbols interpreted as dashes
- Underlined text indicates priority items

6. Code Screenshot to Code

Scenario: Extract code from screenshots or images.

Example:

User: "Extract the code from this screenshot and save it to a file"

Claude: (After analyzing the code screenshot)

I'll extract the code and save it:

def calculate_fibonacci(n: int) -> list[int]: """ Calculate Fibonacci sequence up to n terms.

Args: n: Number of terms to generate

Returns: List of Fibonacci numbers """ if n <= 0: return [] elif n == 1: return [0]

fib = [0, 1] for i in range(2, n): fib.append(fib[i-1] + fib[i-2])

return fib

Example usage

result = calculate_fibonacci(10) print(f"First 10 Fibonacci numbers: {result}")

**Saving to file...**

(Uses Write tool to save the extracted code)

✓ Code extracted and saved to `fibonacci.py`

**Note:** Formatting and indentation preserved from the original screenshot.

---

Advanced Examples

Multi-Image Analysis Workflow

Process multiple related images:

User: "I have 5 product photos. Analyze each and create a comparison table of features visible in each image."

Claude: (After loading all 5 images)

## Product Photo Analysis - Comparison

| Feature | Photo 1 | Photo 2 | Photo 3 | Photo 4 | Photo 5 |
|---------|---------|---------|---------|---------|---------|
| View Angle | Front | Side | Top | Back | Detail |
| USB Ports | 2 visible | 1 visible | - | 3 visible | Close-up |
| Color | Silver | Silver | Silver | Silver | Silver |
| Screen Size | 15" display | - | - | - | - |
| Keyboard | Full-size | Partial | Full view | - | Keys detail |
| Logo Position | Center lid | - | Top-right | Center | - |
| Dimensions | ~ 14" × 10" | ~ 1" thick | Full footprint | - | - |

**Overall Observations:**
- Consistent silver/aluminum finish across all views
- Modern minimalist design
- Multiple connectivity options (USB, likely Thunderbolt)
- Standard laptop form factor, ~15" class

**Recommendation:** These images provide comprehensive coverage for a product listing or documentation.

Diagram to Code Generation

Convert flowcharts or diagrams into code:

User: "Convert this flowchart to Python code"

Claude: (After analyzing flowchart image)

Based on the flowchart, here's the Python implementation:

def process_order(order_amount: float, customer_type: str) -> dict: """ Process order based on flowchart logic.

Args: order_amount: Total order amount in dollars customer_type: 'new' or 'existing'

Returns: dict with final_amount and discount_applied """ discount = 0.0

Check customer type

if customer_type == 'new': discount = 0.10 # 10% discount for new customers elif customer_type == 'existing':

Check order amount threshold

if order_amount > 100: discount = 0.15 # 15% discount for orders over $100 else: discount = 0.05 # 5% discount for existing customers

Calculate final amount

discount_amount = order_amount * discount final_amount = order_amount - discount_amount

return { 'original_amount': order_amount, 'discount_percentage': discount * 100, 'discount_amount': discount_amount, 'final_amount': final_amount, 'customer_type': customer_type }

Example usage

result = process_order(150, 'existing') print(f"Final amount: ${result['final_amount']:.2f}") print(f"You saved: ${result['discount_amount']:.2f} ({result['discount_percentage']}%)")

**Flowchart Logic Mapped:**
- Diamond 1: Customer Type check → if/elif branches
- Diamond 2: Order Amount > $100 → nested condition
- Rectangles: Discount calculations → variable assignments
- Arrows: Control flow → sequential execution

Visual Bug Reporting

Document visual bugs with detailed analysis:

User: "Analyze this screenshot of a layout bug and describe what's wrong"

Claude: (After analyzing the buggy screenshot)

## Visual Bug Analysis

### Issue Summary
**Severity:** High - Layout breaking bug
**Component:** Product grid layout
**Browser:** Appears to be Chrome/modern browser

### Identified Problems

**1. Card Overlap (Critical)**
- **Location:** Row 2, Column 3
- **Description:** Product card overlapping with adjacent card
- **Expected:** 16px margin between cards
- **Actual:** ~8px negative margin causing overlap

**2. Image Aspect Ratio Distortion**
- **Location:** Row 1, Column 2
- **Description:** Product image stretched vertically
- **Expected:** 4:3 aspect ratio
- **Actual:** Approximately 4:5 (squeezed)

**3. Text Truncation**
- **Location:** Multiple cards
- **Description:** Product titles cut off without ellipsis
- **Expected:** "..." after max 2 lines
- **Actual:** Hard cut at container boundary

**4. Button Misalignment**
- **Location:** All cards
- **Description:** "Add to Cart" buttons not bottom-aligned
- **Expected:** Aligned to bottom of card container
- **Actual:** Floating based on content height

### Suspected Root Causes

/ Likely problematic CSS: / .product-card { / Missing: / box-sizing: border-box;

/ Incorrect: / margin: calc(-8px); / Should be positive value / }

.product-image { / Missing: / object-fit: cover; aspect-ratio: 4/3; }

.product-title { / Missing: / overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

### Recommended Fixes

1. **Fix card spacing:** Remove negative margin, ensure consistent gap
2. **Fix image aspect:** Add `object-fit: cover` and explicit aspect ratio
3. **Fix text truncation:** Implement multi-line ellipsis with line-clamp
4. **Fix button alignment:** Use flexbox with `margin-top: auto`

### Testing Checklist
- [ ] Test on Chrome, Firefox, Safari
- [ ] Verify at 1920×1080, 1366×768, 768×1024
- [ ] Check with varying content lengths
- [ ] Validate with long product names (50+ chars)

---

Helper Script Reference

Installation

Ensure Python and Pillow are installed:

# Install Pillow for image processing
pip install Pillow

# Verify installation
python .claude/skills/vision/scripts/image_processor.py --help

Script Operations

1. Extract Metadata

# Get image metadata
python .claude/skills/vision/scripts/image_processor.py \
  --operation metadata \
  --input photo.jpg \
  --json

# Output:
# {
#   "filename": "photo.jpg",
#   "format": "JPEG",
#   "width": 1920,
#   "height": 1080,
#   "size": "1920x1080",
#   "size_bytes": 245678,
#   "exif": {...}
# }

2. Convert Image Format

# Convert PNG to JPEG
python .claude/skills/vision/scripts/image_processor.py \
  --operation convert \
  --input image.png \
  --output image.jpg \
  --quality 95

# Convert to WebP
python .claude/skills/vision/scripts/image_processor.py \
  --operation convert \
  --input photo.jpg \
  --format webp

3. Resize Images

# Resize maintaining aspect ratio (width only)
python .claude/skills/vision/scripts/image_processor.py \
  --operation resize \
  --input large.jpg \
  --width 800

# Resize to exact dimensions (no aspect ratio preservation)
python .claude/skills/vision/scripts/image_processor.py \
  --operation resize \
  --input image.jpg \
  --width 1024 \
  --height 768 \
  --no-aspect

4. Batch Processing

# Convert all images in directory to JPG
python .claude/skills/vision/scripts/image_processor.py \
  --operation batch \
  --input ./images/ \
  --task convert \
  --format jpg \
  --quality 90

# Resize all images in directory
python .claude/skills/vision/scripts/image_processor.py \
  --operation batch \
  --input ./photos/ \
  --task resize \
  --width 1024 \
  --output ./photos/resized/

# Extract metadata for all images
python .claude/skills/vision/scripts/image_processor.py \
  --operation batch \
  --input ./screenshots/ \
  --task metadata \
  --json > metadata.json

---

Tips and Best Practices

Image Quality Guidelines

For OCR (Text Extraction):

• Minimum 150 DPI, preferably 300 DPI
• High contrast between text and background
• Minimal compression artifacts
• Straight orientation (not rotated)

For Chart Analysis:

• Clear axis labels and legends
• Sufficient resolution (min 800×600)
• Avoid overlapping elements
• Use solid colors rather than patterns

For UI/UX Analysis:

• Full-resolution screenshots
• Capture complete viewport
• Include browser chrome if relevant
• Consider multiple device sizes

Optimization Tips

1. Crop Before Analysis: Focus on relevant areas to improve accuracy 2. Enhance Contrast: For poor quality scans, enhance before OCR 3. Multiple Angles: Provide different views for complex objects 4. Context Matters: Mention the domain (medical, legal, technical)

Privacy and Security

⚠️ Important Considerations:

• Redact sensitive info before analysis (PII, passwords, API keys)
• Don't share screenshots containing confidential data
• Be aware of metadata in images (GPS, timestamps)
• Consider company policies on cloud image processing

File Format Recommendations

---

Troubleshooting

Common Issues

Issue: "Cannot read image file"

• Cause: File path incorrect or file corrupted
• Solution: Verify path, check file integrity, try re-saving

Issue: "Low confidence text extraction"

• Cause: Poor image quality, low resolution, or bad lighting
• Solution: Rescan at higher DPI, improve lighting, enhance contrast

Issue: "Unable to detect chart data"

• Cause: Chart too stylized, low contrast, or complex overlay
• Solution: Simplify chart, increase size, remove background patterns

Issue: "Image dimensions too large"

• Cause: Very high resolution image exceeding limits
• Solution: Resize using helper script before analysis

Performance Tips

Large Images:

# Resize before analysis
python .claude/skills/vision/scripts/image_processor.py \
  --operation resize \
  --input huge_image.jpg \
  --width 2048 \
  --output optimized.jpg

# Then analyze
"Analyze optimized.jpg..."

Batch Operations:

• Process in smaller groups (10-20 images)
• Use batch script for preprocessing
• Save results incrementally

Getting Help

If you encounter issues:

1. Check image format compatibility 2. Verify file permissions 3. Review error messages carefully 4. Try with a simpler test image 5. Consult Claude Code documentation

---

Version History

• v1.0.0 (2025-11-18): Initial release
• Core vision capabilities
• Helper script implementation
• Comprehensive documentation

---

License

This skill is licensed under Apache-2.0.

Contributing

To improve this skill:

1. Test with various image types 2. Document edge cases 3. Share effective prompts 4. Report issues and suggestions

---

Questions or feedback? The vision skill is designed to evolve based on real-world usage. Experiment with different prompts and image types to discover what works best for your use case.