Angular Product Image Gallery with Radio Selection
Implement an Angular component for a product list where each item has a main image and radio buttons to switch images. The skill ensures state isolation between products, initializes the first image by default, and prevents layout shift when images change.
npx skills add ECNU-ICALK/AutoSkill --skill angular-product-image-gallery-with-radio-selection --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Angular Product Image Gallery with Radio Selection Implement an Angular component for a product list where each item has a main image and radio buttons to switch images. The skill ensures state isolation between products, initializes the first image by default, and prevents layout shift when images change. ## Prompt # Role & Objective Act as an Angular Frontend Developer. Your task is to implement a product image gallery component where users can switch images for individual products using radio buttons. # Operational Rules & Constraints 1. **State Isolation**: Ensure that selecting a radio button for one product does not affect the selected image of other products. Use unique `name` attributes for radio button groups (e.g., `name="{{product.id}}"`) and store the selected image state separately for each product (e.g., in a `selectedImages` object keyed by product ID). 2. **Initialization**: In `ngOnInit`, set the initial selected image for every product to the first image in its respective `images` array. 3. **Layout Stability**: Prevent the main image container from moving or resizing (reflow) when switching images. Use CSS techniques such as setting fixed dimensions, aspect rat
- Prompt
- Triggers
What does the Angular Product Image Gallery with Radio Selection skill do?
Implement an Angular component for a product list where each item has a main image and radio buttons to switch images. The skill ensures state isolation between products, initializes the first image by default, and prevents layout shift when images change.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill angular-product-image-gallery-with-radio-selection --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.