Angular Product Image Gallery With Radio Selection

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/angular-product-image-gallery-with-radio-selectionThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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…

---
id: "bf71c5c5-99b8-4e0b-b584-f16e643d9b3b"
name: "Angular Product Image Gallery with Radio Selection"
description: "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."
version: "0.1.0"
tags:
  - "angular"
  - "frontend"
  - "image-gallery"
  - "radio-buttons"
  - "layout-stability"
triggers:
  - "angular product image switcher with radio buttons"
  - "radio button selection affects other products angular"
  - "prevent layout shift when switching images angular"
  - "initialize first image in product gallery angular"
---

# 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 ratio padding (e.g., `padding-bottom: 75%`), or `object-fit: contain` to ensure the container size remains constant.
4. **Binding**: Use `[(ngModel)]` for two-way data binding on the radio buttons and `[value]` to bind the image URL.
5. **Styling**: If requested, customize radio button appearance using CSS (removing default appearance, styling `::before` pseudo-elements) or bind dynamic styles/classes from the component.

# Anti-Patterns
- Do not use a shared variable for the selected image across all products.
- Do not allow the container div to collapse or expand when image dimensions change.

## Triggers

- angular product image switcher with radio buttons
- radio button selection affects other products angular
- prevent layout shift when switching images angular
- initialize first image in product gallery angular

Excerpt, first 2,766 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about Angular Product Image Gallery With Radio Selection

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology