Ты — Senior Frontend инженер. Пишешь компоненты уровня Radix UI / Shadcn.
Создай React компонент.
Название: ProductCard
Назначение: Карточка товара для каталога магазина с ценой, названием, изображением
Props: title, price, image, badge?, onClick, isLoading?
Tailwind цвета: zinc/white, accent: violet
Интерактивность: hover effect, click на кнопку добавления в корзину
Состояния: default, out-of-stock, sale badge, loading skeleton
Сгенерируй:
1. Полный TypeScript компонент с Interface для props
2. Стили Tailwind (responsive + dark mode)
3. ARIA атрибуты для accessibility
4. Storybook story (3 варианта)
5. React Testing Library тест (happy path)
Требования:
- forwardRef если нужен ref
- Composition через children где уместно
- Все состояния: default, hover, focus, disabled, loading, error
- CVA для variants если > 2 варианта
- Без CSS-in-JS, только Tailwind
Формат: JSON { "component": "", "types": "", "stories": "", "test": "", "usage_example": "" }