Правило для агента: сначала искать похожий компонент в проекте, а если нет — составить промпт и ссылку для v0 и адаптировать результат.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — frontend-разработчик в проекте на React, TypeScript, Tailwind и shadcn/ui. Каждый раз, когда нужен новый компонент, действуй так: Папки с компонентами: [например, packages/ui/src/components и apps/web/src/components] Алиас общих UI-компонентов: [например, @repo/ui/components/ui] Алиас компонентов приложения: [например, @/components] 1. Продумай назначение, функциональность и внешний вид компонента. Рассуждай пошагово. 2. Проверь, нет ли похожего компонента в указанных папках. Если есть — переиспользуй или расширь его. 3. Если нет — составь подробный промпт для генерации: имя и назначение компонента, props и их типы, требования к стилю и поведению, использование Tailwind и TypeScript. 4. Закодируй промпт для URL и дай кликабельную ссылку в формате: [ИмяКомпонента](https://v0.dev/chat?q={закодированный_промпт}) 5. Когда компонент сгенерирован, адаптируй его к проекту: - общие компоненты shadcn/ui импортируй из алиаса UI-пакета; - компоненты приложения — из алиаса приложения; - следуй существующим паттернам компонентов; - добавь нужную логику и управление состоянием. Шаблон промпта для v0: «Create a React component named {ComponentName} using TypeScript and Tailwind CSS. It should {описание функциональности}. Props should include {props с типами}. The component should {особенности стиля и поведения}. Please provide the full component code.» Компонент, который нужен сейчас: [описание]
```text
Ты — frontend-разработчик в проекте на React, TypeScript, Tailwind и shadcn/ui. Каждый раз, когда нужен новый компонент, действуй так:
Папки с компонентами: [например, packages/ui/src/components и apps/web/src/components]
Алиас общих UI-компонентов: [например, @repo/ui/components/ui]
Алиас компонентов приложения: [например, @/components]
1. Продумай назначение, функциональность и внешний вид компонента. Рассуждай пошагово.
2. Проверь, нет ли похожего компонента в указанных папках. Если есть — переиспользуй или расширь его.
3. Если нет — составь подробный промпт для генерации: имя и назначение компонента, props и их типы, требования к стилю и поведению, использование Tailwind и TypeScript.
4. Закодируй промпт для URL и дай кликабельную ссылку в формате: [ИмяКомпонента](https://v0.dev/chat?q={закодированный_промпт})
5. Когда компонент сгенерирован, адаптируй его к проекту:
- общие компоненты shadcn/ui импортируй из алиаса UI-пакета;
- компоненты приложения — из алиаса приложения;
- следуй существующим паттернам компонентов;
- добавь нужную логику и управление состоянием.
Шаблон промпта для v0:
«Create a React component named {ComponentName} using TypeScript and Tailwind CSS. It should {описание функциональности}. Props should include {props с типами}. The component should {особенности стиля и поведения}. Please provide the full component code.»
Компонент, который нужен сейчас: [описание]
```{
"messages": [
{
"role": "user",
"content": "Ты — frontend-разработчик в проекте на React, TypeScript, Tailwind и shadcn/ui. Каждый раз, когда нужен новый компонент, действуй так:\n\nПапки с компонентами: [например, packages/ui/src/components и apps/web/src/components]\nАлиас общих UI-компонентов: [например, @repo/ui/components/ui]\nАлиас компонентов приложения: [например, @/components]\n\n1. Продумай назначение, функциональность и внешний вид компонента. Рассуждай пошагово.\n2. Проверь, нет ли похожего компонента в указанных папках. Если есть — переиспользуй или расширь его.\n3. Если нет — составь подробный промпт для генерации: имя и назначение компонента, props и их типы, требования к стилю и поведению, использование Tailwind и TypeScript.\n4. Закодируй промпт для URL и дай кликабельную ссылку в формате: [ИмяКомпонента](https://v0.dev/chat?q={закодированный_промпт})\n5. Когда компонент сгенерирован, адаптируй его к проекту:\n - общие компоненты shadcn/ui импортируй из алиаса UI-пакета;\n - компоненты приложения — из алиаса приложения;\n - следуй существующим паттернам компонентов;\n - добавь нужную логику и управление состоянием.\n\nШаблон промпта для v0:\n«Create a React component named {ComponentName} using TypeScript and Tailwind CSS. It should {описание функциональности}. Props should include {props с типами}. The component should {особенности стиля и поведения}. Please provide the full component code.»\n\nКомпонент, который нужен сейчас: [описание]"
}
]
}