skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

unsplash-integration

Search and fetch free professional photography from the Unsplash API for web and app interfaces.

1|Updated Aug 17, 2025
Search Tags:#api#ui design#stock photos#image search#image optimization#unsplash#photography
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill unsplash-integration-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unsplash-integration
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/unsplash-integration
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill unsplash-integration-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Sourcing high-quality imagery for websites, apps, and marketing materials often leads to generic placeholders or cliché stock photos that weaken visual design. This Skill provides a workflow for finding and integrating professional, free-to-use photography from Unsplash directly into UI projects. ## Core Features & Use Cases - Intentional Image Search: Guides the use of descriptive, artistic keywords to find thematic imagery instead of generic stock photos. - API-Based Fetching: Sources images via the Unsplash API or direct URLs for hero sections, editorial layouts, and product galleries. - Dynamic Resizing: Uses Unsplash URL parameters (e.g., width, quality, crop) to deliver optimized images that fit layouts without performance loss. - Use Case: When building a landing page hero section, use this Skill to search for a thematic background image, filter by orientation and color, and embed an appropriately sized version via URL parameters. ## Quick Start Use the Unsplash integration to find a minimalist architecture photo and add it as the hero background of my landing page, sized to 1600px wide.

Frequently Asked Questions about unsplash-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I search for images on Unsplash for my website?▼

Search Unsplash using highly descriptive, artistic keywords such as "minimalist brutalist architecture texture" rather than generic terms like "meeting room". Filter results by orientation and color to match your UI palette before downloading via the API or direct URL.

How to resize Unsplash images using URL parameters?▼

Append dynamic parameters to the Unsplash image URL, such as ?w=1600&q=85&fit=crop, to control width, quality, and cropping. This delivers an appropriately sized, optimized image instead of a large raw file, improving page performance.

Are Unsplash photos free to use in commercial projects?▼

Unsplash provides an open collection of high-quality photos that are free to use, making them suitable for websites, apps, and marketing materials. The Skill is designed specifically to source this imagery for professional visual design.

When should I avoid using stock photography in UI design?▼

Avoid generic, cliché, or corporate-looking stock photos that weaken visual impact. Choose artistic, thematic imagery that conveys emotion and quality, and never fall back to plain colored placeholder boxes when a relevant photo is available.

Related Skills

Explore More Design & Creative Skills→
yashs33244yashs33244
1

theme-factory

Apply predefined color palettes and typography themes to documents and HTML pages.

Community
Basic
JeffallanJeffallan
10.9k

nextjs-developer

Build Next.js 14+ apps with App Router, server components, and server actions.

Community
Advanced
oborchersoborchers
28

visual-interest-expression

Calibrate visual expression in digital design to align with brand personality.

Community
Intermediate
fabioc-alohafabioc-aloha
1

flux-brand-finetune

Train custom FLUX LoRA fine-tunes on Replicate from curated image datasets.

Community
Advanced