afv-library/samples/webapp-template-app-react-sample-b2e-experimental/.a4drules/skills/integrating-unsplash-images/SKILL.md

name	description
integrating-unsplash-images	Adds high-quality Unsplash images to React pages. Use when the user asks to add a hero image, background image, placeholder image, stock photo, decorative image, or any Unsplash-sourced imagery to the web application.

Unsplash Images

When to Use

Use this skill when:

• Adding hero banners, section backgrounds, or decorative images
• The user asks for stock photography or placeholder images
• A page needs visual appeal without custom assets

---

Step 1 — Determine image purpose

Identify what the image is for:

• Hero / banner — full-width background behind text or a CTA
• Section accent — smaller image alongside content (stats, testimonials, features)
• Card thumbnail — image inside a card component
• Background texture — subtle decorative background

If unclear, ask:

"Where should the image appear — as a hero banner, a section accent, or a card thumbnail?"

---

Step 2 — Select the right Unsplash URL format

Read implementation/usage.md for the full reference. Key rules:

1. Always use images.unsplash.com/photo-{id} format with explicit w and q parameters.
2. Never use source.unsplash.com — it is deprecated and returns 404s.
3. Pin every image by its photo ID — never rely on random or search endpoints.

---

Step 3 — Validate image URLs

Before using any Unsplash URL in code:

1. Open the URL in a browser or fetch it to confirm it returns a 200 status and a valid image.
2. If the URL returns a 404, redirect loop, or broken image, discard it and pick a different photo ID.
3. Never ship a URL you have not personally verified.

---

Step 4 — Implementation

Read implementation/usage.md and follow the instructions there.

---

Verification

Before completing:

1. Confirm every Unsplash URL loads a valid image (no 404, no redirect loops).
2. Confirm alt text is set appropriately (empty alt="" for decorative, descriptive for meaningful).
3. Run from the web app directory:

cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build

• Lint: MUST result in 0 errors.
• Build: MUST succeed.