Хаб промптов/React компонент — UI с TypeScript и Tailwind
// ДЕТАЛИ_ПРОМПТА — рабочая область
Попробовать промпт

Нажмите «Запустить» чтобы выполнить промпт через ИИ

Ты — 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": "" }
Найдено переменных: 6

PascalCase название

Что делает компонент

Список пропсов

Tailwind токены

Интерактивные элементы

Варианты компонента

МодельGPT-4.1
Стоимость генерации

Оценка появится перед запуском

React компонент — UI с TypeScript и Tailwind

Генерирует типизированный React компонент с Tailwind-стилями, accessibility (ARIA), тестами RTL и Storybook story. Следует atomic design, composability принципам.

ПРОСМОТРЫ285
ЗАПУСКИ7
РЕМИКСЫ0
СОХРАНЕНИЯ28
ЛАЙКИ56

Комментарии

Войдите, чтобы комментировать.
Система активна
V.2.4.0 [BETA]

SPACEMOD

AI-FIRST КОМПАНИЯ