---
name: amariahak/Cursor rules for avoiding placeholder or broken image URLs, using stable visual
source: https://app.decimal.ai/s/amariahak-cursor-rules-for-avoiding-placeholder-or-broken-image-urls-using-stable-visual@1/SKILL.md
source_sha256: e9002f71d0da
---

# Cursor rules for avoiding placeholder or broken image URLs, using stable visual 

## When to use this skill
Cursor rules for avoiding placeholder or broken image URLs, using stable visual assets, and checking alt text, dimensions, licensing, and responsive behavior.

## Source
Synced from https://github.com/PatrickJS/awesome-cursorrules/tree/main/rules/landing-page-image-quality-cursorrules-prompt-file.mdc.

# Landing Page Image Quality

When generating or editing user-facing pages, use real, relevant visual assets instead of placeholder image services.

## Image Sources

- Do not commit `placehold.co`, `via.placeholder.com`, `dummyimage.com`, `picsum.photos`, random image URLs, or broken/deprecated image services.
- Prefer committed project assets, product screenshots, generated assets approved by the user, or stable URLs from an approved image provider.
- Before using a third-party image, confirm the license and attribution requirements are compatible with the project.
- Avoid hotlinking images from arbitrary websites.

## Asset Quality

- Match images to the actual content, product, place, object, or user state they represent.
- Do not use vague atmospheric images when the user needs to inspect a product, feature, workflow, or interface.
- Use consistent aspect ratios for repeated cards or gallery items.
- Provide explicit `width` and `height` attributes or CSS aspect-ratio constraints to prevent layout shift.
- Use optimized formats and sizes appropriate for the target framework.

## Accessibility

- Every informative image must have specific `alt` text that describes the image's purpose in context.
- Decorative images must use empty alt text and should not be announced to assistive technology.
- Do not put essential text only inside an image.

## Implementation Checks

- Ensure image paths resolve in the built application.
- Check responsive behavior at mobile and desktop widths.
- Verify that loading, error, and empty states do not leave broken image icons in production UI.