skills.rest
Akhil-Naik-9
Akhil-Naik-9COMMUNITY
Explore all skills by this author →
GitHub

image-work

Standardizes image rendering with a single Image component, placeholder URLs, and alt text.

1|Updated Nov 16, 2025
Search Tags:#ui#accessibility#react#image#responsive#gallery#placeholders
One-click install
npx skills add https://github.com/Akhil-Naik-9/wixMade-Portfolio --skill image-work-akhil-naik-9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/Akhil-Naik-9/wixMade-Portfolio/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/Akhil-Naik-9/wixMade-Portfolio --skill image-work-akhil-naik-9

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Image handling for UI is inconsistent; this skill standardizes image rendering using a single Image component, ensures accessible alt text, and provides a placeholder system for missing images.

Core Features & Use Cases

  • Enforces a single Image component from the UI library and guarantees placeholder handling.
  • Supports user-provided URLs, CMS/external image URLs, and Wix placeholder-driven post-processing.
  • Provides patterns for common layouts: hero sections, grids, masonry, and avatar images with responsive sizing and aspect ratios.
  • Ensures accessibility by enforcing descriptive alt text and optional decorative images with aria-hidden.

Quick Start

Create a responsive image gallery using the Image component with placeholder support and accessible alt text.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I build a responsive image gallery in React with placeholder support?▼

A single Image component standardizes UI image handling by providing responsive sizing, placeholder URLs for missing sources, and enforced alt text. It replaces inconsistent rendering logic across galleries, hero sections, and media-heavy pages.

How do I handle missing images from dynamic CMS sources in a UI gallery?▼

Handle missing CMS images using a placeholder URL scheme that intercepts unavailable sources. The system injects fallback visuals automatically, ensuring your gallery layout never breaks when user-provided or external URLs fail to load.

Does this approach work for masonry and grid layouts with varying aspect ratios?▼

Yes, the approach supports masonry and grid layouts by applying responsive sizing and aspect ratios. The Image component patterns adjust dynamically to different layout structures, maintaining visual consistency across various gallery configurations.

How do I ensure accessibility for images in a media-heavy React application?▼

Ensure image accessibility by enforcing descriptive alt text for all content images. For decorative images, apply aria-hidden attributes to prevent screen reader interference while maintaining compliance across your gallery components.

What's the best way to standardize image rendering across hero and background sections?▼

Standardize hero and background rendering by routing all images through a single authoritative Image component. This enforces consistent responsive sizing, placeholder handling, and accessibility rules across all site sections.

Related Skills

Explore More Software Engineering Skills→
AmirNikFinanceAmirNikFinance

image-work

Enforce a single Image component for consistent rendering across UI components.

Community
Intermediate
VuNguyenVietTienVuNguyenVietTien

react-best-practices

Optimize React and Next.js applications for faster load times and reduced bundle sizes.

Community
Intermediate
flitzrrrflitzrrr
4

ui-design

Define responsive web layouts with 12-column grids and 8px spacing.

Community
Intermediate
guia-matthieuguia-matthieu
145

image-batch

Automate batch image resizing, compression, background removal, watermarking, and format conversion with Python.

Community
Intermediate