skills.rest
madmaxfarm105-hue
madmaxfarm105-hueCOMMUNITY
Explore all skills by this author →
GitHub

image-work

Standardize image and gallery rendering with the shared Image component and Wix placeholder URLs.

Updated Mar 27, 2026
Search Tags:#accessibility#react#image#tailwind#placeholders#galleries
One-click install
npx skills add https://github.com/madmaxfarm105-hue/Comando --skill image-work-madmaxfarm105-hue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/madmaxfarm105-hue/Comando/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/madmaxfarm105-hue/Comando --skill image-work-madmaxfarm105-hue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken or inconsistent image rendering by standardizing how images, galleries, and the Wix placeholder workflow are authored.

Core Features & Use Cases

  • Consistent Image Component Usage: Enforces using the guaranteed Image component from @/components/ui/image for all image rendering.
  • Correct Placeholder Strategy for Post-Processing: Defines the Wix placeholder URL format and requires unique, regex-compliant IDs so the post-processor can detect images.
  • Reliable Gallery Rendering Patterns: Provides grid, masonry, and featured-image layout patterns that work with the placeholder system and accessibility rules.

Quick Start

Implement hero, gallery, or avatar images by rendering the Image component with either a real user/CMS URL or the Wix placeholder URL including a unique ?id= identifier.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I implement accessible image placeholders in React?▼

To implement accessible image placeholders in React, use a shared Image component and embed the Wix placeholder URL with a unique regex-compliant ID in your static data. Ensure every image includes meaningful alt text for accessibility.

Why do my gallery images break when source URLs are missing?▼

Gallery images break because dynamic JSX loops cannot generate valid placeholder URLs. Define the Wix placeholder URL with unique IDs in static data so the post-processor can detect and render missing media correctly.

What is the best way to structure masonry and grid galleries with Tailwind?▼

The best way to structure galleries with Tailwind is using standardized grid and masonry layout patterns that integrate with the Image component, ensuring reliable rendering and accessibility compliance across all devices.

Can I use dynamic JSX loops to generate Wix placeholder URLs for post-processing?▼

No, you cannot use dynamic JSX loops to generate Wix placeholder URLs. You must embed the placeholder URL with unique regex-compliant IDs directly in static data for the post-processing workflow to detect images successfully.

Does this image component pattern work for hero images and avatars?▼

Yes, this image component pattern works for hero images, cards, and avatars. It standardizes media rendering across all layout types by requiring the shared Image component and meaningful alt text for every image instance.

Related Skills

Explore More Design & Creative Skills→
pingqLINpingqLIN

tanstack-start-shadcn-tailwind

Guide TanStack Start, Shadcn/ui, and Tailwind CSS application development.

Community
Intermediate
Rachit246-artRachit246-art

image-work

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

Community
Basic
FAeN399FAeN399

css-layout-builder

Create responsive CSS layouts using Grid, Flexbox, and container queries.

Community
Advanced
acquiaacquia
16

canvas-component-utils

Render formatted HTML and responsive images from Drupal Canvas component props.

Official
Basic