Enforce consistent image rendering with alt text, placeholders, and widths.
npx skills add https://github.com/Wahidul123/med-plus-hub --skill image-work-wahidul123
Please help me install this Agent Skill. Skill: image-work Source: https://github.com/Wahidul123/med-plus-hub/tree/main/.emdash/skills/image-work Command: npx skills add https://github.com/Wahidul123/med-plus-hub --skill image-work-wahidul123
Image handling and media galleries are a common source of inconsistency in UI. This skill provides guidance to consistently render images, manage placeholders, and build media galleries across components.
Apply the Image component to render images with proper alt text, placeholders, and width specifications.
High-intent search queries and answers about installing and using this skill.
Standardize React image rendering by enforcing a single Image component for all media. This enforces descriptive alt text, placeholder URL guidelines, and explicit width recommendations to maintain visual and accessibility consistency across UI galleries.
Manage placeholder images and user-provided URLs by applying consistent patterns for CMS/API integration. Use unique IDs for placeholders and enforce explicit width specifications to ensure reliable rendering across media galleries.
TypeScript helps enforce accessibility by requiring descriptive alt text for image components. This approach ensures accessibility best practices are applied consistently, preventing missing or empty alt attributes in UI-heavy applications.
Use a single image component instead of native img tags to enforce lazy loading, explicit widths, and alt text discipline. This guarantees performance and accessibility best practices are met across hero sections and avatars.
Yes, this approach handles both user-provided and CMS API image URLs. It provides clear rendering patterns for each source, ensuring consistent display quality and accessibility compliance regardless of the image origin.
mostafasudoAutomate discovery, installation, and customization of shadcn/ui components in React applications.
secondskyApply code splitting, lazy loading, caching, and Core Web Vitals monitoring to web apps.
samjhechtVerify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.
acquiaRender formatted HTML and responsive images from Drupal Canvas component props.
