skills.rest
vijethkumarmp
vijethkumarmpCOMMUNITY
Explore all skills by this author →
GitHub

image-work

Standardizes image handling with a reusable component, placeholders, and accessibility.

Updated Mar 15, 2026
Search Tags:#ui#accessibility#image#pattern#responsive#gallery#placeholders
One-click install
npx skills add https://github.com/vijethkumarmp/wellness-hub --skill image-work-vijethkumarmp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/vijethkumarmp/wellness-hub/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/vijethkumarmp/wellness-hub --skill image-work-vijethkumarmp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Image handling across web interfaces is error-prone: inconsistent usage of image sources, missing alt text, and ad-hoc placeholders lead to broken layouts and poor accessibility.

Core Features & Use Cases

  • Consistent Image Component: Always use the Image component from @/components/ui/image.
  • Accessible Imagery: Enforces descriptive alt text and decorative alternatives when appropriate.
  • Placeholder Handling & Galleries: Standardized placeholder URLs and ready-to-compose gallery patterns (grid, masonry, featured).
  • Layout & Performance: Support for aspect-ratio containers, lazy loading, and explicit width specs.

Quick Start

Integrate the Image component into your UI pages and follow the placeholder, accessibility, and responsive layout guidelines.

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 components for consistent UI placeholders?▼

Standardize image components by using a reusable Image component with consistent placeholder URLs, explicit alt text, and lazy-loading practices to prevent broken layouts and poor accessibility.

What's the best way to handle accessible alt text in web galleries?▼

Handle accessible alt text in web galleries by enforcing descriptive alternatives for imagery and decorative alternatives when appropriate within a standardized reusable Image component.

How do I implement responsive images with aspect-ratio containers?▼

Implement responsive images with aspect-ratio containers by integrating a reusable Image component that supports explicit width specs and aspect-ratio layouts for production web interfaces.

Does this image handling approach support masonry gallery patterns?▼

Yes, this image handling approach supports masonry gallery patterns, alongside grid and featured patterns, using standardized placeholder URLs and ready-to-compose gallery layouts.

Related Skills

Explore More Design & Creative Skills→
pragyaP17pragyaP17

scrape-webpage

Scrape webpage content, extract metadata, download images, and prepare for AEM Edge Delivery Services import.

Community
Advanced
aresbitaresbit
46

openai-image-gen

Generate images from sampled prompts via the OpenAI Images API and save them with a local HTML gallery.

Community
Intermediate
Wahidul123Wahidul123

image-work

Enforce consistent image rendering with alt text, placeholders, and widths.

Community
Advanced
arborba100arborba100

image-work

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

Community
Intermediate