agentsclimarketplace

Angular product image gallery with radio selection

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/angular-product-image-gallery-with-radio-selection

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill angular-product-image-gallery-with-radio-selection

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.7 KB, 413 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 327,132. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.