skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

component-img

Generate an accessible fpkit-style React Img component with alt handling and responsive delivery.

Updated Apr 21, 2026
Search Tags:#accessibility#react#wcag#lazy loading#responsive images#scss#image component
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-img
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-img
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/component-img
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-img

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the repetitive, error-prone work of creating accessible React image components with correct alt behavior, layout stability, and performance-friendly defaults.

Core Features & Use Cases

  • Accessible Img component generation: creates an fpkit-style Img wrapper that enforces required alt usage for informative images and supports alt="" for decorative images.
  • Layout shift prevention: scaffolds width/height handling and SCSS defaults that reserve space and keep images contained.
  • Performance-ready image delivery: supports lazy/eager loading, decoding, fetchpriority hints, and responsive srcSet/sizes.

Quick Start

Use the component-img skill to generate an Img for your project by providing the image src, the alt text (or marking it decorative), the aspect ratio via width/height, and whether it should load lazily or eagerly.

Frequently Asked Questions about component-img

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

FAQPage Schema
How do I create an accessible React image component with proper alt text handling?▼

An accessible React image component enforces required alt usage for informative images and supports alt="" for decorative images. It renders a native img element while satisfying WCAG compliance through correct alt handling.

What's the best way to prevent layout shift when loading responsive images in React?▼

Preventing layout shift in responsive images requires scaffolding width and height handling alongside SCSS defaults that reserve space. This keeps images contained and maintains layout stability during image loading.

How do I configure lazy loading and responsive srcSet for React images?▼

Configuring lazy loading and responsive srcSet involves applying loading and decoding controls, fetchpriority hints, and responsive sizes attributes. These performance-ready defaults enable efficient image delivery in React projects.

Can I use SCSS modules to style a responsive image component in React?▼

Yes, you can use SCSS modules to style a responsive image component. The generated component emits an img.module.scss file with defaults that reserve space and keep images contained, integrating with project-level SCSS styling.

How do I handle image load errors and fallback behavior in React?▼

Handling image load errors requires safe fallback behavior on load errors within the Img component. The generated wrapper implements error handling that provides graceful degradation when images fail to load.

Does this image component generation work with existing React projects or does it need a new setup?▼

It works with existing React projects by initializing the project UI foundation when needed. The component verifies integration with project-level checks, emitting img.tsx and img.module.scss files into your current setup.

Related Skills

Explore More Design & Creative Skills→
Ard2pArd2p

aif

Analyze a project tech stack, install skills from skills.sh, and configure MCP servers.

Community
Advanced
tahatms12tahatms12

seo-images

Analyze image alt text, formats, sizes, and loading behavior on web pages.

Community
Advanced
rakibulismrakibulism
2

shadcn-ui

Implement shadcn/ui components with Radix primitives, Tailwind styling, and CVA variants.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate