gemini-image
johnlindquist/claude
Analyze images using Gemini's vision capabilities for OCR, UI analysis, and visual understanding.
What is gemini-image?
Leverages Google's Gemini Pro vision model to analyze images, extract text from screenshots, and understand visual content. Use this when you need to process images programmatically—extracting code from screenshots, analyzing UI layouts, debugging with visual context, or performing OCR.
- Analyze images and describe content in detail
- Extract text from screenshots and documents (OCR)
- Extract code from code screenshots with proper formatting
- Analyze UI layouts, components, and user flows
- Debug issues by analyzing error screenshots and logs
- Extract data from charts, diagrams, and visual representations
How to install gemini-image
npx skills add https://github.com/johnlindquist/claude --skill gemini-image- Python with google-generativeai package installed
- Google Gemini API key (set as GEMINI_API_KEY environment variable)
How to use gemini-image
- 1.Install the skill and set your GEMINI_API_KEY environment variable
- 2.Capture or prepare the image you want to analyze
- 3.Run gemini command with -f flag pointing to your image file
- 4.Provide a specific prompt describing what you need (e.g., 'Extract all text', 'Analyze this error', 'Describe the UI')
- 5.Review the analysis output and use it in your workflow
Use cases
- Extract code from a screenshot to quickly copy working examples
- Analyze an error message screenshot to understand and fix bugs
- Convert a UI design mockup into React component code
- Extract structured data from charts and graphs
- Create bug reports automatically from screenshots with context
- Developers debugging issues with visual context
- Engineers extracting code or data from images
- Designers getting feedback on mockups and prototypes
- QA testers documenting bugs with screenshots
- Technical writers creating documentation from UI screenshots
gemini-image FAQ
PNG, JPEG, GIF, and WebP formats are supported, including screenshots, photos, diagrams, charts, UI mockups, and documents.
Yes, use multiple -f flags to pass multiple images (e.g., gemini -m pro -f image1.png -f image2.png) for comparison or combined analysis.
Gemini's OCR is generally reliable for clear, well-formatted text, but you should verify extracted text, especially for complex layouts or poor image quality.
Yes, you can ask it to generate React, HTML, or other code that recreates a UI shown in a screenshot, including styling with Tailwind CSS.
Use high-quality, cropped images focused on the relevant area, ask specific questions rather than vague prompts, and provide context about what you're trying to accomplish.
Full instructions (SKILL.md)
Source of truth, from johnlindquist/claude.
name: gemini-image description: Analyze images using Gemini's vision capabilities. Use for image analysis, text extraction from screenshots, and visual content understanding.
Gemini Image Analysis
Analyze images using Gemini Pro's vision capabilities.
Prerequisites
pip install google-generativeai
export GEMINI_API_KEY=your_api_key
CLI Reference
Basic Image Analysis
# Analyze an image
gemini -m pro -f /path/to/image.png "Describe this image in detail"
# With specific question
gemini -m pro -f screenshot.png "What error message is shown?"
# Multiple images
gemini -m pro -f image1.png -f image2.png "Compare these two images"
Analysis Operations
General Description
gemini -m pro -f image.png "Describe this image comprehensively:
1. Main subject/content
2. Colors and composition
3. Text visible (if any)
4. Context and purpose
5. Notable details"
Extract Text (OCR)
gemini -m pro -f screenshot.png "Extract all text from this image.
Format as plain text, preserving layout where possible.
Include any text in buttons, labels, or UI elements."
Code from Screenshot
gemini -m pro -f code-screenshot.png "Extract the code from this screenshot.
Provide as properly formatted code with correct indentation.
Note any parts that are unclear or partially visible."
UI Analysis
gemini -m pro -f ui-screenshot.png "Analyze this UI:
1. What application/website is this?
2. What page/screen is shown?
3. Main UI elements and their purpose
4. User flow/actions available
5. Any UX issues or suggestions"
Error Analysis
gemini -m pro -f error-screenshot.png "Analyze this error:
1. What error is shown?
2. What is the likely cause?
3. How to fix it?
4. Any related information visible?"
Diagram Understanding
gemini -m pro -f diagram.png "Explain this diagram:
1. What type of diagram is this?
2. Main components and their relationships
3. Data/process flow
4. Key takeaways"
Specific Use Cases
Debug Screenshot
gemini -m pro -f debug-screen.png "I'm debugging an issue. From this screenshot:
1. What is the current state?
2. What errors or warnings are visible?
3. What should I look at?
4. Suggested next steps"
Compare Before/After
gemini -m pro -f before.png -f after.png "Compare these before and after images:
1. What changed?
2. Is this an improvement?
3. Any issues in the 'after' version?
4. Anything missing?"
Design Feedback
gemini -m pro -f design.png "Provide design feedback:
1. Visual hierarchy
2. Color usage
3. Typography
4. Spacing and alignment
5. Accessibility concerns
6. Suggestions for improvement"
Data Extraction
gemini -m pro -f chart.png "Extract data from this chart:
1. Chart type
2. Data series and values
3. Axes labels and ranges
4. Key trends or insights
5. Output as structured data if possible"
Form Analysis
gemini -m pro -f form.png "Analyze this form:
1. Form purpose
2. Fields and their types
3. Required vs optional
4. Validation rules visible
5. UX suggestions"
Workflow Patterns
Screenshot to Issue
# Capture screenshot (macOS)
screencapture -i /tmp/bug.png
# Analyze and format as issue
gemini -m pro -f /tmp/bug.png "Create a bug report from this screenshot:
## Summary
[One-line description]
## Steps to Reproduce
[Inferred from screenshot]
## Expected Behavior
[What should happen]
## Actual Behavior
[What the screenshot shows]
## Environment
[Any visible system info]"
UI to Code
gemini -m pro -f ui-design.png "Generate React component code that recreates this UI:
- Use Tailwind CSS for styling
- Make it responsive
- Include proper TypeScript types
- Add appropriate accessibility attributes"
Documentation
gemini -m pro -f app-screen.png "Write user documentation for this screen:
- What this screen is for
- How to use each feature
- Common tasks
- Tips and notes"
Image Types Supported
- PNG, JPEG, GIF, WebP
- Screenshots
- Photos
- Diagrams and charts
- UI mockups
- Code snippets
- Documents
Best Practices
- Use clear images - Higher quality = better analysis
- Crop to relevant area - Remove unnecessary context
- Ask specific questions - Vague prompts get vague answers
- Provide context - Tell Gemini what you're looking for
- Verify extracted text - OCR isn't perfect
- Multiple angles - Use multiple images for complex subjects
Related skills
More from johnlindquist/claude and the wider catalog.
swift-style
Swift code style conventions for clean, readable, idiomatic code.
casely
>
docker-best-practices
|
tailwindcss-advanced-layouts
Master CSS Grid, Flexbox, container queries, and advanced positioning with Tailwind CSS.
tailwindcss-animations
Tailwind CSS animations, transitions, and transforms with custom keyframes and accessibility support.
tailwindcss-mobile-first
Mobile-first responsive design patterns with Tailwind CSS v4 breakpoints, container queries, and touch-safe layouts.