kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-12 02:49:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
6ab99f7368
afv-library/skills/integrating-webapp-unsplash-images/SKILL.md
k-j-kim 6ab99f7368
Add webapp skills from template, sync script updates 
- Rename skill folders from salesforce-webapp-* to *-webapp-* convention
- Update sync-template-skills.js: set SKILL.md front matter name to dest folder
- Remove sync-template-skills workflow and pin-template-deps script
- Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill
- Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux

Made-with: Cursor
2026-03-18 15:06:58 -07:00

2.2 KiB
Raw Blame History

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.