landing page image quality
via PatrickJS/awesome-cursorrules
Use real, optimized images with proper alt text and dimensions instead of placeholders on landing pages.
What is landing page image quality?
This rule ensures landing pages use stable, relevant visual assets rather than placeholder services, with proper accessibility attributes and responsive behavior. Apply it when generating or editing user-facing pages to maintain quality, prevent layout shift, and meet accessibility standards.
- Replace placeholder image services (placehold.co, picsum.photos, etc.) with committed project assets or approved stable URLs
- Add explicit width, height attributes or CSS aspect-ratio to prevent layout shift
- Write specific alt text for informative images and empty alt for decorative images
- Verify image paths resolve in the built application and check responsive behavior at mobile and desktop widths
- Match images to actual content and avoid vague atmospheric images when product or feature inspection is needed
- Confirm third-party image licenses are compatible with the project before use
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
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
widthandheightattributes 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
alttext 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.
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.