skills.rest
ngocnhanvo
ngocnhanvoCOMMUNITY
Explore all skills by this author →
GitHub

image-work

Provide image handling and gallery creation patterns for HTML and CSS web projects.

Updated May 26, 2026
Search Tags:#web development#image handling#image best practices#media galleries#image placeholders
One-click install
npx skills add https://github.com/ngocnhanvo/temp-03-xehoihonda --skill image-work-ngocnhanvo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/ngocnhanvo/temp-03-xehoihonda/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/ngocnhanvo/temp-03-xehoihonda --skill image-work-ngocnhanvo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of adding, managing, and working with images and media galleries across various web projects.

Core Features & Use Cases

  • Image Handling: Offers patterns for image sources, placeholders, and lists with images.
  • Gallery Patterns: Supports grid and masonry galleries with featured images.
  • Accessibility: Ensures all images have meaningful alt text, and decorative images are marked as such.
  • Width Specification: Encourages pixel-based width specification for performance.
  • Common Patterns: Provides patterns for hero images, profile avatars, card images, and background images.
  • Prohibited Sources: Restricts the use of external image sources, promoting user-provided and CMS image URLs.
  • Image Loading Best Practices: Offers guidance on lazy loading and priority image loading.
  • Aspect Ratios: Utilizes aspect ratio utilities for consistent image containers.

Quick Start

Use the image-work skill to add a hero image to your website with the following code snippet:

const IMAGE_PLACEHOLDER = "https://static.wixstatic.com/media/12d367_71ebdd7141d041e4be3d91d80d4578dd~mv2.png";
<Image 
  src={`${IMAGE_PLACEHOLDER}?id=hero-background`}
  alt="Beautiful landscape background"
  width={1920}
  className="w-full h-full object-cover"
/>

Frequently Asked Questions about image-work

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

FAQPage Schema
What is the best way to handle image placeholders in web development?▼

Image placeholders in web development provide patterns for image sources using static URLs and query parameters to render temporary media. This approach ensures layout stability before final assets are available.

How do I create a responsive masonry gallery using HTML and CSS?▼

Create a responsive masonry gallery by applying provided grid and masonry patterns with featured images using HTML and CSS. This structure supports consistent media presentation and layout optimization.

Why should I specify pixel-based width for image embedding?▼

Specify pixel-based width for image embedding to improve web performance and prevent layout shifts. This practice encourages consistent aspect ratio containers and optimizes loading behavior.

Can I use external image sources for my media galleries?▼

External image sources are prohibited for media galleries to promote user-provided and CMS image URLs. This restriction ensures secure and controlled image management within your project.

How do I ensure accessibility when adding a hero image to my website?▼

Ensure hero image accessibility by providing meaningful alt text for content images and marking decorative images as such. This practice guarantees screen readers properly convey visual context.

Do I need HTML and CSS knowledge to implement lazy loading for images?▼

HTML and CSS knowledge is required to implement lazy loading and priority image loading effectively. Understanding these languages enables proper image embedding, styling, and aspect ratio utilization.

Related Skills

Explore More Design & Creative Skills→
besoeasybesoeasy
128

user-ask-for-report

Generate a static HTML report page with Tailwind CSS and deploy it to Originless.

Community
Intermediate
Akhil-Naik-9Akhil-Naik-9
1

image-work

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

Community
Intermediate
ThedouglerThedougler

tailwindcss-development

Style web applications using Tailwind CSS v4 utilities and CSS-first configuration.

Community
Intermediate
arborba100arborba100

image-work

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

Community
Intermediate