find-image
Find and suggest images for blog posts. Use when the user asks to find images, needs a picture, wants stock photos, or is looking for visuals for their blog post.
When & Why to Use This Skill
This Claude skill streamlines the process of sourcing and integrating visual content for blog posts. It helps users find high-quality stock images from platforms like Unsplash and Pexels, suggests SEO-optimized filenames, and automatically generates WCAG-compliant HTML markup with descriptive alt text to enhance web accessibility and search engine rankings.
Use Cases
- Sourcing relevant stock photography: Quickly find high-quality, free-to-use images from Unsplash, Pexels, and Pixabay tailored to specific blog topics like AI development or data security.
- SEO-optimized image integration: Generate descriptive, hyphenated filenames and standards-compliant HTML figure tags with accessible alt text to improve page load performance and search visibility.
- Technical diagram planning: Receive recommendations for specialized tools like Excalidraw or Mermaid to create professional architecture diagrams and flowcharts for technical documentation.
| name | find-image |
|---|---|
| description | Find and suggest images for blog posts. Use when the user asks to find images, needs a picture, wants stock photos, or is looking for visuals for their blog post. |
Find Image for Blog Post
Help the user find appropriate images for their blog posts and generate the proper HTML markup.
Instructions
Understand the context: Ask or determine what the blog post is about
Search for images: Use web search to find relevant free stock images from sources like:
- Unsplash (https://unsplash.com) - High-quality free photos
- Pexels (https://pexels.com) - Free stock photos and videos
- Pixabay (https://pixabay.com) - Free images and royalty-free stock
- Undraw (https://undraw.co) - Free illustrations for tech/business
Provide search links: Give the user direct search URLs to find images
Suggest filenames: Propose descriptive filenames following the convention:
- Use lowercase with hyphens
- Be descriptive (e.g.,
gdpr-logging-architecture-diagram.png) - Include the main topic
Generate HTML markup: Provide the complete figure HTML with:
- Proper alt text (descriptive, WCAG 2.1 AA compliant, under 125 chars)
- Standard figcaption
Image Guidelines (from project standards)
- Location:
/assets/images/ - Preferred formats: WebP (best compression), PNG (diagrams/screenshots), JPG (photos)
- Max size: < 500KB (images are auto-optimized via pre-commit hook)
- Alt text requirements:
- Be descriptive and specific
- Relate to surrounding content
- Aim for 125 characters or less
- Don't start with "Image of" or "Picture of"
- Include relevant keywords naturally
Output Format
When suggesting an image, provide:
- Search links for finding the image:
Unsplash: https://unsplash.com/s/photos/[search-term]
Pexels: https://www.pexels.com/search/[search-term]/
- Suggested filename:
[topic]-[description].webp
- HTML markup to use:
<figure>
<img src="/assets/images/[filename]" alt="[Descriptive alt text]">
<figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>
Examples
Example 1: AI Development Post
User asks for an image for a post about "Building AI Agents with Claude"
Search links:
- Unsplash: https://unsplash.com/s/photos/artificial-intelligence-robot
- Pexels: https://www.pexels.com/search/artificial%20intelligence/
Suggested filename: claude-ai-agent-development.webp
HTML markup:
<figure>
<img src="/assets/images/claude-ai-agent-development.webp" alt="Abstract visualization of AI neural network connections representing intelligent agent systems">
<figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>
Example 2: Python Security Post
User asks for an image for a post about "GDPR-Compliant Logging in Python"
Search links:
- Unsplash: https://unsplash.com/s/photos/data-security-privacy
- Pexels: https://www.pexels.com/search/data%20protection/
Suggested filename: gdpr-python-logging-security.webp
HTML markup:
<figure>
<img src="/assets/images/gdpr-python-logging-security.webp" alt="Secure data protection concept with lock symbol representing GDPR privacy compliance">
<figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>
Technical Diagrams
For technical content, also suggest tools to create diagrams:
- Excalidraw (https://excalidraw.com) - Hand-drawn style diagrams
- Draw.io (https://draw.io) - Professional flowcharts and architecture diagrams
- Mermaid (in markdown) - Code-based diagrams
For diagrams, use a specific figcaption describing what the diagram shows instead of the standard AI humor caption.