skills.rest
Rachit246-art
Rachit246-artCOMMUNITY
Explore all skills by this author →
GitHub

image-work

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

Updated May 1, 2026
Search Tags:#accessibility#react#images#tailwind#astro#placeholders#galleries
One-click install
npx skills add https://github.com/Rachit246-art/rvglobal1 --skill image-work-rachit246-art
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/Rachit246-art/rvglobal1/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/Rachit246-art/rvglobal1 --skill image-work-rachit246-art

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken, inconsistent, and inaccessible image handling by standardizing how you reference images, generate galleries, and fall back to deterministic placeholders.

Core Features & Use Cases

  • Consistent Image Component Usage: Always render images via the guaranteed Image component at @/components/ui/image.
  • Placeholder Strategy for Missing Images: Use the Wix placeholder URL with a unique, post-processing-friendly id to enable reliable downstream image replacement.
  • Gallery Rendering Patterns: Build grid, masonry, and featured gallery layouts while preserving placeholder discoverability.
  • Accessibility Guardrails: Enforce meaningful alt text, including correct handling for decorative images with alt="" and aria-hidden.

Quick Start

Use the Image component and supply either your real image URL, a CMS/API image URL, or a Wix placeholder URL with a unique id when no image is available.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I handle missing images and placeholder fallbacks in React?▼

Handle missing React images by routing them through a standardized Image component that supplies a Wix placeholder URL with a unique id parameter, ensuring reliable downstream replacement without broken UI.

What is the best way to build accessible image galleries in TypeScript?▼

Build accessible TypeScript galleries by enforcing meaningful alt text for profile avatars and card images, applying alt="" with aria-hidden for decorative images, and rendering grid or masonry layouts through a shared Image component.

Can I use this image rendering pattern with Astro and Tailwind?▼

Yes, this image rendering pattern supports React and TypeScript pages within environments using Astro and Tailwind, standardizing how you reference CMS or API image sources across your stack.

Do I need a specific component to standardize hero images in React?▼

Yes, you must use the Image component located at @/components/ui/image to render hero images, profile avatars, and card images, ensuring they display correctly and remain post-processable.

Why do my placeholder images fail downstream post-processing?▼

Placeholder images fail downstream post-processing when they lack a unique id query parameter matching the allowed detection pattern, which prevents reliable image replacement from user, CMS, or API sources.

Related Skills

Explore More Design & Creative Skills→
arborba100arborba100

image-work

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

Community
Intermediate
madmaxfarm105-huemadmaxfarm105-hue

image-work

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

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
gluestackgluestack
1

gluestack-ui-v4:performance

Optimize Gluestack UI v4 component rendering across native and web platforms.

Official
Intermediate