skills.rest
shipiit
shipiitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

images-and-media

Enforce image format, layout stability, and loading policies in UI components.

Updated May 6, 2026
Search Tags:#accessibility#images#media optimization#photo treatment#responsive art direction#CLS prevention#next.js image
One-click install
npx skills add https://github.com/shipiit/shipit-ui-design --skill images-and-media
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: images-and-media
Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/images-and-media
Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill images-and-media

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents low-quality, inconsistent, and inaccessible image/media implementations by enforcing senior decisions for format, layout stability, loading, art direction, and photo treatment.

Core Features & Use Cases

  • Image format and rendering strategy: Chooses between raster, SVG, CSS gradients, and other media types based on the content and intent (e.g., icons as SVG, photographs as raster).
  • CLS-safe layout and responsive art direction: Applies aspect ratio reservation with width/height or aspect-ratio, and uses breakpoint-specific crops via picture/source for better composition.
  • Performance and accessibility defaults: Recommends correct loading strategy (eager for LCP, lazy for below-the-fold) and ensures alt text or aria-hidden for every image, plus dark-mode parity and reduced-motion compliance.

Quick Start

Use images-and-media to review and upgrade the media handling in your UI component where you currently render images with <img> or next/image, including aspect ratio, loading behavior, responsive cropping, alt text, and photo treatment.

Frequently Asked Questions about images-and-media

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent CLS with responsive images in Next.js?▼

Prevent CLS by reserving space using explicit width and height attributes or CSS aspect-ratio properties, ensuring stable layout during media loading.

What is the correct loading strategy for above-the-fold versus below-the-fold images?▼

The correct loading strategy uses eager loading for above-the-fold LCP images and lazy loading for below-the-fold images, optimizing user-facing performance and page speed.

How do I implement responsive art direction with breakpoint-specific image crops?▼

Implement responsive art direction using the picture element with source tags to apply breakpoint-specific crops, ensuring better composition across different screen sizes.

When should I use SVG versus raster formats for UI media components?▼

Use SVG for icons and vector graphics, and raster formats for photographs, matching the image format and rendering strategy to the specific content and UI intent.

How do I ensure dark mode parity and reduced-motion compliance for media elements?▼

Ensure dark mode parity and reduced-motion compliance by enforcing accessible alt or aria handling and applying theme-safe visual output for every image and media component.

Related Skills

Explore More Design & Creative Skills→
TechsioCZTechsioCZ
2

component-usage-ux

Select and load the correct UI-kit component usage skill for a given component.

Official
Intermediate
mits-plmits-pl
40

seo-images

Audit website images for accessibility and performance optimization.

Community
Intermediate
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

cumulative-layout-shift-mitigation

Reserve space and optimize assets to prevent Cumulative Layout Shift.

Official
Intermediate