---
name: product-detail
description: "Build a product page with accurate variant selection. Use for product, variants, gallery."
---

# Карточка товара

Build a product page with accurate variant selection.

## Implementation decisions

1. Give products stable routes and explicit SKU selection.
2. Derive price and stock from the selected variant and prevent unavailable choices.
3. Use meaningful factual alternative text and keyboard-accessible media controls.
4. Keep essential product information in semantic DOM when adding 3D.

## Working source

Read [components/templates.tsx](../webcraft-shared/source/components/templates.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- The selected SKU survives add-to-cart.
- Out-of-stock variants cannot be ordered.
- The product URL opens directly.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/catalog

Version 2.0.0 · Original WEBCRAFT content · MIT