skills.rest
mayankbisht689-code
mayankbisht689-codeCOMMUNITY
Explore all skills by this author →
GitHub

image-work

Standardize image rendering, placeholders, and gallery layouts across UI components.

Updated Aug 23, 2026
Search Tags:#ui#accessibility#image#pattern#gallery#placeholder
One-click install
npx skills add https://github.com/mayankbisht689-code/himalaya-quest --skill image-work-mayankbisht689-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/mayankbisht689-code/himalaya-quest/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/mayankbisht689-code/himalaya-quest --skill image-work-mayankbisht689-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides consistent, accessible image handling patterns for UI components, galleries, and placeholders, reducing manual boilerplate and errors.

Core Features & Use Cases

  • Centralized guidance on using the Image component for rendering images, managing placeholders, and building media galleries.
  • Accessibility and performance best practices, including alt text and explicit width/height guidance.
  • Real-world patterns for hero images, avatars, cards, and grid/gallery layouts, with placeholder URL conventions and responsive behavior.

Quick Start

Use the image-work skill to ensure your images render with consistent components and placeholder handling across your UI.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I handle image rendering and placeholder management for UI galleries?▼

Image rendering and placeholder management for UI galleries are handled by applying a required Image component, standardizing placeholder URL conventions, and defining consistent layout patterns for cards and grids.

What is the best way to manage responsive hero images and avatars in a UI component?▼

Managing responsive hero images and avatars requires explicit width and height guidance alongside a required Image component to ensure consistent visual behavior across external URLs and CMS sources.

How do I add alt text accessibility rules to my image gallery layouts?▼

Alt text accessibility rules are applied by enforcing required accessibility attributes within the Image component, ensuring media galleries remain compliant while rendering external URLs or placeholders.

Does this image handling pattern support external URLs and CMS sources?▼

Yes, image handling patterns support external URLs and CMS sources by standardizing the required Image component usage, ensuring consistent loading behavior and placeholder management across all media inputs.

How do I optimize image loading and size for performance in grid layouts?▼

Optimizing image loading and size for grid layouts involves applying explicit width and height guidance and standardized loading rules to the Image component to prevent layout shifts and maintain performance.

Related Skills

Explore More Design & Creative Skills→
pschaartpschaart

image-work

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

Community
Advanced
Bhanuprakash2580Bhanuprakash2580

image-work

Standardize image handling in React apps with a single Image component.

Community
Intermediate
AmirNikFinanceAmirNikFinance

image-work

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

Community
Intermediate
arborba100arborba100

image-work

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

Community
Intermediate