claude-photo-manager

This skill provides comprehensive photo and image handling capabilities for Claude Code, enabling users to upload, analyze, process, and manage visual content efficiently.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "claude-photo-manager" with this command: npx skills add hiizzzo/steeb/hiizzzo-steeb-claude-photo-manager

Claude Photo Manager

This skill provides comprehensive photo and image handling capabilities for Claude Code, enabling users to upload, analyze, process, and manage visual content efficiently.

When to Use This Skill

Use this skill when:

  • User wants to upload photos/images for analysis

  • Processing screenshots for debugging

  • Analyzing UI mockups or designs

  • Working with visual content for development

  • Converting between image formats

  • Extracting text from images (OCR)

  • Comparing visual designs

  • Documenting visual issues or bugs

Supported Image Operations

  1. Image Upload and Analysis

  • Accept PNG, JPG, JPEG, GIF, WebP, BMP, TIFF formats

  • Analyze screenshots for debugging purposes

  • Examine UI mockups and designs

  • Review code documentation images

  • Process photographs with context

  1. Image Processing and Enhancement

  • Resize images for different use cases

  • Optimize image file sizes

  • Convert between image formats

  • Apply filters and adjustments

  • Crop and edit images programmatically

  1. Visual Content Analysis

  • Extract text from images (OCR)

  • Identify UI components in screenshots

  • Analyze color palettes and design elements

  • Compare two images for differences

  • Detect objects and features in photos

Upload Methods

Method 1: Direct Upload (Recommended)

User can simply drag and drop or select image files

Claude Code will automatically accept and analyze them

Method 2: File Path Reference

Reference local files for Claude to read

"Por favor analizá esta imagen: /path/to/image.png"

Method 3: Base64 Encoding (for small images)

Provide base64 encoded image data

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."

Common Use Cases and Solutions

Use Case 1: UI Bug Analysis

When users report visual bugs:

Input: Screenshots of the issue Analysis Steps:

  • Identify UI components involved

  • Analyze layout and positioning

  • Check for visual inconsistencies

  • Suggest CSS/React Native fixes

  • Compare with expected design

Example Response: "Analizando el screenshot que subiste, veo que hay un problema de alineación en el componente de tareas. El botón de eliminar está cortado y el texto no tiene suficiente espacio de padding. Te sugiero ajustar el CSS así:"

Use Case 2: Design Review

When users want feedback on designs:

Input: Mockups, wireframes, or UI designs Analysis Steps:

  • Evaluate visual hierarchy

  • Check spacing and proportions

  • Analyze color contrast and accessibility

  • Suggest improvements

  • Verify consistency with design system

Use Case 3: Error Debugging

When users share error screenshots:

Input: Error messages, console logs, or crash reports Analysis Steps:

  • Extract and transcribe error text

  • Identify error type and source

  • Search for related code issues

  • Provide specific fixes

  • Suggest debugging approaches

Use Case 4: Code Documentation

When users share code screenshots:

Input: Code snippets, documentation images Analysis Steps:

  • Transcribe text from images

  • Analyze code structure

  • Identify potential issues

  • Suggest improvements

  • Convert to editable text format

Image Processing Scripts

Image Optimization Script

Optimize images for web use

python .claude/skills/claude-photo-manager/scripts/optimize_image.py input.jpg output.jpg --quality 80 --max-width 1200

Screenshot Analyzer

Analyze UI components in screenshots

python .claude/skills/claude-photo-manager/scripts/analyze_screenshot.py screenshot.png

Image Format Converter

Convert between image formats

python .claude/skills/claude-photo-manager/scripts/convert_image.py input.png output.webp

OCR Text Extractor

Extract text from images

python .claude/skills/claude-photo-manager/scripts/extract_text.py image.png --output extracted_text.txt

Best Practices for Image Analysis

For Screenshots:

  • High Resolution: Ensure screenshots are clear and readable

  • Context Included: Show enough surrounding context

  • Multiple Views: Include before/after when relevant

  • Annotations: Mark specific areas of concern if possible

For Designs:

  • Actual Size: Use real dimensions when possible

  • Multiple States: Show different UI states (hover, active, disabled)

  • Responsive Views: Include mobile and desktop versions

  • Color References: Include hex codes or color values

For Bug Reports:

  • Reproduction Steps: Include screenshots of each step

  • Expected vs Actual: Show both states

  • Browser/Device Info: Include environment details

  • Console Errors: Include relevant error messages

Integration with Development Workflow

STEEB App Integration:

When analyzing STEEB app images:

  • Check for component consistency

  • Verify dark/light mode compatibility

  • Analyze task list performance

  • Review social feed layouts

  • Examine settings panel organization

Code Review Integration:

When reviewing code-related images:

  • Extract and format code snippets

  • Check for syntax errors

  • Suggest optimizations

  • Verify coding standards compliance

Documentation Enhancement:

When processing documentation images:

  • Extract text for searchable content

  • Convert diagrams to code equivalents

  • Create markdown documentation

  • Generate alt text for accessibility

Error Handling and Troubleshooting

Common Issues:

  • File Size Too Large: Compress or optimize images

  • Unsupported Format: Convert to supported format

  • Corrupted Files: Attempt repair or request new files

  • Poor Quality: Request higher resolution images

  • Privacy Concerns: Redact sensitive information

Error Recovery:

Validate image files

python .claude/skills/claude-photo-manager/scripts/validate_image.py image.png

Attempt image repair

python .claude/skills/claude-photo-manager/scripts/repair_image.py corrupted_image.jpg

Performance Considerations

For Large Images:

  • Implement progressive loading

  • Use image compression

  • Consider tiling for very large images

  • Cache processed results

For Batch Processing:

  • Process images in parallel when possible

  • Implement queuing for multiple uploads

  • Use memory-efficient algorithms

  • Provide progress feedback

References and Resources

  • Image format specifications and best practices

  • Claude Code file upload limitations

  • UI/UX design principles and guidelines

  • Accessibility standards for visual content

  • Privacy and security considerations for images

Assets and Templates

Analysis Templates:

  • UI bug report template

  • Design review checklist

  • Error analysis framework

  • Performance audit template

Processing Tools:

  • Image comparison utilities

  • Color palette extractors

  • Component detection scripts

  • Text extraction tools

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Coding

obsidian-notes

Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.

Archived SourceRecently Updated
--164149043
Coding

mcporter-cli

Use the mcporter CLI to list, configure, auth, and call MCP servers/tools directly (HTTP or stdio), including ad-hoc servers, config edits, and CLI/type generation.

Archived SourceRecently Updated
--164149043
Coding

github-tools

Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.

Archived SourceRecently Updated
--164149043
Coding

bili-rs

Development skill for bili-rs, a Rust CLI tool for Bilibili (B站). Use when implementing features, fixing bugs, or extending the bilibili-cli-rust codebase. Provides architecture conventions, API endpoints, coding patterns, and project-specific constraints. Triggers on tasks involving adding CLI commands, calling Bilibili APIs, handling authentication, implementing output formatting, or working with the layered cli/commands/client/payloads architecture.

Archived SourceRecently Updated
--18621063286