skills.rest
pschaart
pschaartCOMMUNITY
Explore all skills by this author →
GitHub

image-work

Enforce consistent Image component usage with placeholder URLs and accessibility guidelines.

Updated Mar 13, 2026
Search Tags:#accessibility#image#media#images#gallery#ui-patterns#placeholder
One-click install
npx skills add https://github.com/pschaart/la-herencia --skill image-work-pschaart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/pschaart/la-herencia/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/pschaart/la-herencia --skill image-work-pschaart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Image management in UI often leads to inconsistent rendering, broken placeholders, and accessibility gaps. This Skill establishes a unified approach to handling images, galleries, and placeholders across the application.

Core Features & Use Cases

  • Enforce use of a single Image component from the UI library for all images to ensure consistency and performance.
  • Provide clear patterns for user-provided URLs, CMS/external sources, and placeholder URLs with a unique ID query parameter.
  • Ensure accessibility with descriptive alt text and support decorative images with aria-hidden when appropriate.
  • Use placeholder URLs with validated IDs for post-processing and consistent rendering in galleries, avatars, and hero sections.
  • Guide patterns for grid, masonry, and featured gallery layouts with responsive sizing and aspect ratios.

Quick Start

Use the image-work skill to implement a standardized image rendering workflow across pages, including alt text strategy and placeholder handling.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I standardize image rendering components across a UI library?▼

Standardize image rendering by enforcing a single core Image component for all media sources, ensuring consistent visual output, performance, and unified rendering patterns across the application.

What is the best way to handle placeholder images in galleries and avatars?▼

Handle placeholder images by using URLs with a validated ID query parameter, which enables accurate post-processing and consistent rendering across galleries, avatars, and hero sections.

How do I implement responsive image sizing for masonry and grid gallery layouts?▼

Implement responsive image sizing by applying standardized aspect ratios and responsive dimension patterns to grid, masonry, and featured gallery layouts for uniform media presentation.

When do I need aria-hidden for decorative images in UI components?▼

Apply aria-hidden to decorative images when they do not convey informational context, and ensure all meaningful images have descriptive alt text to maintain strict UI accessibility guidelines.

Can I use external CMS image URLs with a standardized UI image component?▼

Yes, you can use external CMS image URLs alongside user-provided URLs, as the workflow provides clear patterns for integrating varied media sources into the standardized image component.

Related Skills

Explore More Design & Creative Skills→
mamu7211mamu7211

implement-ui

Implement Blazor WebAssembly UI pages using a shared component library.

Community
Intermediate
arborba100arborba100

image-work

Standardize image rendering, galleries, and placeholder URLs across UI components.

Community
Intermediate
Rachit246-artRachit246-art

image-work

Standardize React/TypeScript image rendering with placeholder fallbacks and gallery patterns.

Community
Basic
jiaiyanjiaiyan
21

el-image

Render images with lazy loading, placeholders, error handling, and previews in galleries.

Community
Intermediate