ReddRadar
Agent skill
frontend-image-generation
Image sourcing for UI. Free first (DiceBear avatars, Unsplash photos, unDraw illustrations). AI generation only for custom needs.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-image-generation
SKILL.md
Image Assets
Strategy: FREE RESOURCES FIRST, AI generation for custom needs.
Decision Tree
AVATARS:
→ DiceBear, Boring Avatars (FREE)
PLACEHOLDER PHOTOS:
→ Unsplash, Picsum (FREE)
ILLUSTRATIONS:
→ unDraw, Storyset (FREE SVG)
BACKGROUNDS:
→ Haikei, CSS patterns (FREE)
CUSTOM/BRANDED:
→ AI generation (PAID) — only if needed
Free Avatar APIs
# DiceBear (many styles)
https://api.dicebear.com/7.x/lorelei/svg?seed=John
https://api.dicebear.com/7.x/avataaars/svg?seed=Jane
https://api.dicebear.com/7.x/initials/svg?seed=JD
# Boring Avatars
https://source.boringavatars.com/beam/120/John
# UI Avatars (initials)
https://ui-avatars.com/api/?name=John+Doe&background=6366f1&color=fff
// Avatar with fallback
function Avatar({ src, name }) {
const fallback = `https://api.dicebear.com/7.x/lorelei/svg?seed=${name}`;
return <img src={src || fallback} alt={name} onError={e => e.target.src = fallback} />;
}
Placeholder Photos
# Unsplash (by keyword)
https://source.unsplash.com/800x600/?technology
https://source.unsplash.com/1200x600/?office,workspace
# Picsum (random)
https://picsum.photos/800/600
https://picsum.photos/seed/hero/1200/600 # consistent
Free Illustrations
unDraw: https://undraw.co/illustrations
Storyset: https://storyset.com
Humaaans: https://humaaans.com
Open Peeps: https://openpeeps.com
HOW:
1. Go to site
2. Set brand color
3. Search (e.g., "empty", "error")
4. Download SVG
5. Place in public/illustrations/
Backgrounds
Haikei: https://haikei.app (blobs, waves, grids)
Hero Patterns: https://heropatterns.com (subtle patterns)
Cool Backgrounds: https://coolbackgrounds.io (gradients)
AI Generation (When Needed)
Only use when:
- Custom branded illustration required
- No suitable free resource exists
- User explicitly requests
// DALL-E 3
const response = await fetch('https://api.openai.com/v1/images/generations', {
method: 'POST',
headers: { 'Authorization': `Bearer ${OPENAI_API_KEY}` },
body: JSON.stringify({
model: 'dall-e-3',
prompt: 'Minimal 3D illustration of [concept], soft gradient background, no text',
size: '1792x1024',
quality: 'hd',
}),
});
Next.js Image Config
// next.config.js
images: {
remotePatterns: [
{ hostname: 'source.unsplash.com' },
{ hostname: 'picsum.photos' },
{ hostname: 'api.dicebear.com' },
{ hostname: 'ui-avatars.com' },
],
}
Quick Reference
ALWAYS FREE FIRST:
avatars: DiceBear, Boring Avatars
photos: Unsplash, Picsum
illustrations: unDraw, Storyset
backgrounds: Haikei, CSS
AI ONLY WHEN:
- Custom branded needed
- No free alternative
- User requests
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?