npx claudepluginhub sacredvoid/skillkit --plugin skillkitThis skill is limited to using the following tools:
Fetch relevant, free-to-use images from the web for any project context.
Searches Unsplash for images, downloads them, and adds optional title/subtitle text overlays. Useful for stock photos, image searches, or generating titled visuals.
Fetches icons (1.5M+ across 116 styles), illustrations, and photos (500K+) from Icons8 via API key or free CDN. Scans project files for context if no query given.
Integrates Unsplash to search, fetch, and optimize high-quality photos for hero sections, galleries, backgrounds, and UI elements in websites and apps.
Share bugs, ideas, or general feedback.
Fetch relevant, free-to-use images from the web for any project context.
Read config from ~/.claude/skills/image-fetcher/config.json:
{
"unsplash_key": "",
"pexels_key": "",
"pixabay_key": "",
"default_count": 5,
"output_dir": "assets/images"
}
All fields are optional. The skill works with zero configuration via the WebSearch fallback.
Load config silently at the start of every invocation:
cat ~/.claude/skills/image-fetcher/config.json 2>/dev/null || echo '{}'
If the user provided input (argument after the skill name), use that directly as the search context. Skip to Phase 2.
If no input was provided, scan the current directory for context signals:
| Source | What to extract |
|---|---|
README.md / README | Project name, description, purpose |
package.json / Cargo.toml / pyproject.toml | Name, description, keywords |
CLAUDE.md | Project conventions, domain |
| HTML/CSS files (first 3) | Page titles, headings, color themes |
Existing images in assets/, public/, static/, images/ | What already exists (to avoid duplicates) |
Use Glob and Read to scan. Build a brief internal context summary:
CONTEXT:
project: [name or "unknown"]
domain: [web app / game / docs / CLI / etc.]
keywords: [extracted keywords]
existing_images: [list of what's already there]
If the directory scan yields nothing useful (empty dir, no descriptive files), use AskUserQuestion:
"What kind of images are you looking for?"
Options:
- Hero/banner images
- Product photos
- Abstract/background textures
- Icons/illustrations
- Other (describe)
Then ask a follow-up for specifics: subject, mood, color preference.
From the context, generate 1-3 concise search queries (e.g., "minimalist coffee shop interior", "abstract tech gradient background").
Present the queries to the user:
Based on your project context, I'll search for:
- "minimalist coffee shop interior"
- "coffee beans close-up warm tones"
- "cozy cafe atmosphere"
Want me to adjust any of these?
Proceed when the user confirms (or adjust if they give feedback).
Use the first available source from this priority chain:
unsplash_key is set and non-empty)curl -s "https://api.unsplash.com/search/photos?query=QUERY&per_page=COUNT&orientation=landscape" \
-H "Authorization: Client-ID UNSPLASH_KEY"
Extract from JSON response:
results[].urls.regular — download URL (good quality, ~1080px wide)results[].alt_description — image descriptionresults[].width, results[].height — dimensionsresults[].user.name — photographer nameresults[].links.html — source page URLpexels_key is set and non-empty)curl -s "https://api.pexels.com/v1/search?query=QUERY&per_page=COUNT&orientation=landscape" \
-H "Authorization: PEXELS_KEY"
Extract from JSON response:
results[].src.large — download URLresults[].alt — image descriptionresults[].width, results[].height — dimensionsresults[].photographer — photographer nameresults[].url — source page URLpixabay_key is set and non-empty)curl -s "https://pixabay.com/api/?key=PIXABAY_KEY&q=QUERY&per_page=COUNT&image_type=photo&orientation=horizontal"
Extract from JSON response:
hits[].largeImageURL — download URLhits[].tags — image descriptionhits[].imageWidth, hits[].imageHeight — dimensionshits[].user — photographer namehits[].pageURL — source page URLIf no API keys are configured, use WebSearch:
WebSearch: "free stock photo {QUERY} site:unsplash.com OR site:pexels.com OR site:pixabay.com"
From the search results, extract individual photo page URLs (e.g., pexels.com/photo/TITLE-ID/).
Important: Stock sites block WebFetch scraping (return 403). Do NOT attempt to WebFetch individual photo pages. Instead, use known CDN URL patterns to construct direct download URLs:
Extract the numeric photo ID from the Pexels URL (e.g., 417074 from /photo/lake-and-mountain-417074/), then construct:
https://images.pexels.com/photos/{ID}/pexels-photo-{ID}.jpeg?auto=compress&cs=tinysrgb&w=1920
Extract the photo slug from the Unsplash URL (e.g., abc123 from /photos/abc123), then construct:
https://images.unsplash.com/photo-{SLUG}?w=1920&q=80
Note: Unsplash slugs can be complex. If the direct CDN URL doesn't work, search for individual photo pages on Pexels instead — their CDN pattern is more reliable.
Pixabay CDN URLs are not predictable without the API. If only Pixabay results are found, suggest the user configure a free API key.
If no individual photo URLs are found, try a second search:
WebSearch: "pexels free stock photo {QUERY}"
Collect up to default_count (default 5) image candidates from whatever source was used.
Present the fetched images to the user in a clear table:
Found 5 images for "minimalist coffee shop interior":
| # | Description | Size | Source | Photographer |
|---|-------------|------|--------|-------------|
| 1 | Cozy cafe with wooden tables and warm lighting | 1920x1280 | Unsplash | John Doe |
| 2 | Modern coffee bar with espresso machine | 1800x1200 | Unsplash | Jane Smith |
| 3 | Minimalist white cafe interior | 2000x1333 | Unsplash | Alex Chen |
| 4 | Coffee shop window seat with natural light | 1920x1080 | Unsplash | Maria Garcia |
| 5 | Rustic coffee house with brick walls | 1600x1067 | Unsplash | Sam Wilson |
Then ask:
AskUserQuestion: "Which images would you like to download?"
Options:
- All of them
- Pick specific ones (enter numbers like 1, 3, 5)
- None — search again with different terms
For each selected image:
mkdir -p ./OUTPUT_DIR
Generate a descriptive filename from the image description:
.jpg, .png, .webp)cozy-cafe-warm-lighting-01.jpgDownload with curl:
curl -sL "IMAGE_URL" -o "./OUTPUT_DIR/FILENAME"
file "./OUTPUT_DIR/FILENAME"
Confirm it's a valid image file (not an HTML error page).
Print a final summary:
Downloaded 3 images to ./assets/images/:
1. assets/images/cozy-cafe-warm-lighting-01.jpg (1920x1280, 245 KB)
Source: unsplash.com/photos/abc123 | Photo by John Doe
2. assets/images/modern-coffee-bar-02.jpg (1800x1200, 198 KB)
Source: unsplash.com/photos/def456 | Photo by Jane Smith
3. assets/images/minimalist-white-cafe-03.jpg (2000x1333, 312 KB)
Source: unsplash.com/photos/ghi789 | Photo by Alex Chen
License: Free to use (Unsplash License)
If using Pexels or Pixabay, note attribution requirements:
Note: Pexels license requires attribution. Consider adding credit in your project.
~/.claude/skills/image-fetcher/config.json for better results. Offer to help them get a free key (link to signup pages).