afv-library/samples/webapp-template-app-react-sample-b2e-experimental/.a4drules/react_image_processing.md

#Goal

• You are configuring image usage for React applications generated through Vibe Coding.
• Your goal is to ensure Unsplash is used as the default image source unless the developer provides their own images.

AI Customization Rule: React Image Processing

Image handling standards for React web apps (SFDX): CSP compliance, accessibility, and proper image sources.

Targets (File Pattern Matching)

• force-app/main/default/webapplications/*/**/*.tsx
• force-app/main/default/webapplications/*/**/*.ts
• force-app/main/default/webapplications/*/**/*.jsx
• force-app/main/default/webapplications/*/**/*.js
• force-app/main/default/webapplications/*/**/*.html

Core Rules

Default Image Source: Unsplash

Use Unsplash by default (pre-configured in CSP):

https://images.unsplash.com/photo-{PHOTO_ID}?w={WIDTH}&h={HEIGHT}&fit=crop&q=80

Sample Photo IDs: 1557683316-973673baf926 (tech), 1506905925346-21bda4d32df4 (nature)

Alternative Sources

If user requests another source (Pexels, custom):

• Use requested source
• Inform user: "Add CSP Trusted Site in Setup → Security → CSP Trusted Sites"

Accessibility (MANDATORY)

• Always include descriptive alt text
• Use alt="" for decorative images only

Avoid (CSP Violations)

• Avoid until requested placeholder.com, picsum.photos, via.placeholder.com
• Pre-configured: images.unsplash.com, source.unsplash.com, images.pexels.com