skills.rest
AmirNikFinance
AmirNikFinanceCOMMUNITY
Explore all skills by this author →
GitHub

image-work

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

Updated Dec 9, 2025
Search Tags:#ui#accessibility#image#component#responsive#gallery
One-click install
npx skills add https://github.com/AmirNikFinance/nik-financewix --skill image-work-amirnikfinance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-work
Source: https://github.com/AmirNikFinance/nik-financewix/tree/main/.emdash/skills/image-work
Command: npx skills add https://github.com/AmirNikFinance/nik-financewix --skill image-work-amirnikfinance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines image handling for UI development, gallery creation, and media placeholder management, reducing boilerplate and preventing inconsistent image usage.

Core Features & Use Cases

  • Image component discipline: Enforces using the canonical Image component from '@/components/ui/image' for all visuals.
  • Versatile sources: Supports user-provided URLs, CMS/external data, and Wix placeholder placeholders with proper alt text and sizing.
  • Gallery patterns: Provides ready-to-use grid, masonry, and featured layouts with accessible imagery and responsive behavior.
  • Accessibility practices: Ensures meaningful alt text and optional decorative images via aria-hidden when appropriate.

Quick Start

Finalize your first media gallery by integrating the Image component in a sample page and render a responsive grid with at least three images.

Frequently Asked Questions about image-work

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

FAQPage Schema
How do I standardize image rendering across UI components?▼

Standardize image rendering by enforcing a single canonical Image component for all visuals, ensuring consistent alt text and explicit width handling across user URLs, CMS sources, and placeholders. This approach streamlines UI development and reduces boilerplate.

What is the best way to build a responsive image gallery?▼

Build a responsive image gallery by integrating the canonical Image component into ready-to-use grid and masonry layouts. This method supports accessible imagery, explicit width handling, and responsive behavior across screen sizes.

How do I handle decorative images for accessibility compliance?▼

Handle decorative images for accessibility compliance by applying aria-hidden attributes when appropriate. The canonical Image component enforces meaningful alt text for content images while allowing decorative visuals to be hidden from screen readers.

Can I use external CMS image URLs with a single UI component?▼

Yes, you can use external CMS image URLs with the single canonical Image component. It supports user-provided URLs, external data sources, and Wix placeholder images, applying consistent alt text and explicit width handling.

Why does my UI layout break when using multiple image components?▼

Your UI layout breaks when using multiple image components because inconsistent image usage causes variable sizing and alt text behavior. Enforcing a single canonical Image component standardizes explicit width handling and accessibility practices.

Related Skills

Explore More Software Engineering Skills→
alyamenfactoryalyamenfactory

mockup-extract

Extract UI components into a mockup sandbox and rewrite imports.

Community
Advanced
aresbitaresbit
46

openai-image-gen

Generate images from sampled prompts via the OpenAI Images API and save them with a local HTML gallery.

Community
Intermediate
madmaxfarm105-huemadmaxfarm105-hue

image-work

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

Community
Intermediate
zcacereszcaceres
7

nano-banana-generator

Generate custom graphic assets via Google's Gemini image generation API.

Community
Intermediate