skills.rest
arborba100
arborba100COMMUNITY
Explore all skills by this author →
GitHub

image-work

Implements image components, galleries, and placeholder URLs in React and Astro projects.

Updated Mar 26, 2026
Search Tags:#accessibility#React#images#tailwind#astro#gallery#placeholder
One-click install
npx skills add https://github.com/arborba100/command-hub --skill image-work-arborba100
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/arborba100/command-hub/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/arborba100/command-hub --skill image-work-arborba100

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It standardizes how images, media galleries, and placeholder images are added to a Wix Astro site so that post-processing can replace placeholders and every image stays accessible and performant. ## Core Features & Use Cases - Standard Image Component: Enforces use of the shared Image component from @/components/ui/image with proper width, alt text, and loading attributes. - Placeholder System: Provides a Wix placeholder URL format with unique IDs that a post-processing step can detect and replace with real images. - Gallery Patterns: Supplies ready-made grid, masonry, and featured-image gallery layouts built with Tailwind CSS. - Use Case: When building a team page, define team member data with placeholder image URLs in the data array, then render avatars in a loop so the post-processor can swap in real photos later. ## Quick Start Add a hero section with a placeholder background image and a three-column photo gallery to my landing page.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I add placeholder images in a React component?▼

Use the Wix placeholder URL with a unique ID query parameter, such as ?id=hero-main, passed to the Image component's src prop. IDs must be descriptive, hyphen-separated, and match the pattern \w+(-\w+)* so post-processing can find them.

How to build an image gallery with Tailwind CSS?▼

Define gallery image data with placeholder URLs in an array, then map over it inside a grid or columns layout. Use aspect-square or aspect-video containers with absolute positioning and object-cover for consistent image sizing.

Why are my placeholder images not being replaced after generation?▼

Placeholder URLs generated dynamically inside a JSX loop cannot be detected by the post-processor. Put the full placeholder URLs with unique IDs directly in the data array so they appear statically in the source code.

Can I use Unsplash or Pexels images in my Wix Astro site?▼

No, external stock sources like Unsplash, Pexels, Pixabay, and Lorem Picsum are prohibited. Only user-provided URLs, CMS image URLs, or the official Wix placeholder URL are allowed.

What alt text should images have for accessibility?▼

Every image must have a meaningful, descriptive alt attribute such as "Chef preparing fresh pasta in a modern kitchen". Purely decorative images should use an empty alt with aria-hidden="true".

Related Skills

Explore More Software Engineering Skills→
AmirNikFinanceAmirNikFinance

image-work

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

Community
Intermediate
UnicomAIUnicomAI
2.5k

frontend-dev

Builds complete frontend pages with generated media assets, animations, and conversion copy.

Community
Advanced
ZiadNagarZiadNagar

features-page

Guide teams in designing cohesive product feature pages with Tailwind-based layouts.

Community
Advanced
vipulj226-designvipulj226-design

image-work

Automate image handling with the Image component, placeholder URLs, and alt text.

Community
Advanced