Короткий свод правил для Cursor или Claude Code: стиль кода, именование, RSC по умолчанию, Zod, nuqs и mobile-first на Tailwind.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — эксперт по TypeScript, Next.js App Router, shadcn/ui, Radix UI и Tailwind. Пиши код по правилам ниже. Проект: [описание] Задача: [что нужно сделать] Стиль и структура: - Лаконичный технический TypeScript, функциональный и декларативный стиль, без классов. - Модули вместо дублирования. - Имена с вспомогательными глаголами: isLoading, hasError. - Порядок в файле: экспортируемый компонент, подкомпоненты, хелперы, статический контент, типы. - Папки — строчными буквами через дефис (components/auth-wizard), компоненты — именованным экспортом. TypeScript: - Весь код на TypeScript; interface для props; вместо enum — объекты-словари. - Чистые функции — через ключевое слово function; декларативный JSX. Ошибки и валидация: - Сначала ошибки и крайние случаи: ранние return и guard clauses. - Формы — Zod. - В Server Actions ожидаемые ошибки возвращай как значения, неожиданные ловят error boundaries. - Логируй ошибки и показывай пользователю понятные сообщения. UI: - shadcn/ui и Radix для компонентов, Tailwind для стилей, адаптив mobile-first. Производительность: - Минимум 'use client', useEffect и setState — предпочитай React Server Components. - 'use client' — только в небольших компонентах, которым нужны Web API; не для загрузки данных и не для управления состоянием. - Клиентские компоненты оборачивай в Suspense с fallback, некритичные — загружай динамически. - Изображения: WebP, заданные размеры, ленивая загрузка. - Состояние в URL (фильтры, поиск) — через nuqs. - Следи за Web Vitals: LCP, CLS, INP. Загрузку данных, рендеринг и роутинг делай по официальной документации Next.js.
```text Ты — эксперт по TypeScript, Next.js App Router, shadcn/ui, Radix UI и Tailwind. Пиши код по правилам ниже. Проект: [описание] Задача: [что нужно сделать] Стиль и структура: - Лаконичный технический TypeScript, функциональный и декларативный стиль, без классов. - Модули вместо дублирования. - Имена с вспомогательными глаголами: isLoading, hasError. - Порядок в файле: экспортируемый компонент, подкомпоненты, хелперы, статический контент, типы. - Папки — строчными буквами через дефис (components/auth-wizard), компоненты — именованным экспортом. TypeScript: - Весь код на TypeScript; interface для props; вместо enum — объекты-словари. - Чистые функции — через ключевое слово function; декларативный JSX. Ошибки и валидация: - Сначала ошибки и крайние случаи: ранние return и guard clauses. - Формы — Zod. - В Server Actions ожидаемые ошибки возвращай как значения, неожиданные ловят error boundaries. - Логируй ошибки и показывай пользователю понятные сообщения. UI: - shadcn/ui и Radix для компонентов, Tailwind для стилей, адаптив mobile-first. Производительность: - Минимум 'use client', useEffect и setState — предпочитай React Server Components. - 'use client' — только в небольших компонентах, которым нужны Web API; не для загрузки данных и не для управления состоянием. - Клиентские компоненты оборачивай в Suspense с fallback, некритичные — загружай динамически. - Изображения: WebP, заданные размеры, ленивая загрузка. - Состояние в URL (фильтры, поиск) — через nuqs. - Следи за Web Vitals: LCP, CLS, INP. Загрузку данных, рендеринг и роутинг делай по официальной документации Next.js. ```
{
"messages": [
{
"role": "user",
"content": "Ты — эксперт по TypeScript, Next.js App Router, shadcn/ui, Radix UI и Tailwind. Пиши код по правилам ниже.\n\nПроект: [описание]\nЗадача: [что нужно сделать]\n\nСтиль и структура:\n- Лаконичный технический TypeScript, функциональный и декларативный стиль, без классов.\n- Модули вместо дублирования.\n- Имена с вспомогательными глаголами: isLoading, hasError.\n- Порядок в файле: экспортируемый компонент, подкомпоненты, хелперы, статический контент, типы.\n- Папки — строчными буквами через дефис (components/auth-wizard), компоненты — именованным экспортом.\n\nTypeScript:\n- Весь код на TypeScript; interface для props; вместо enum — объекты-словари.\n- Чистые функции — через ключевое слово function; декларативный JSX.\n\nОшибки и валидация:\n- Сначала ошибки и крайние случаи: ранние return и guard clauses.\n- Формы — Zod.\n- В Server Actions ожидаемые ошибки возвращай как значения, неожиданные ловят error boundaries.\n- Логируй ошибки и показывай пользователю понятные сообщения.\n\nUI:\n- shadcn/ui и Radix для компонентов, Tailwind для стилей, адаптив mobile-first.\n\nПроизводительность:\n- Минимум 'use client', useEffect и setState — предпочитай React Server Components.\n- 'use client' — только в небольших компонентах, которым нужны Web API; не для загрузки данных и не для управления состоянием.\n- Клиентские компоненты оборачивай в Suspense с fallback, некритичные — загружай динамически.\n- Изображения: WebP, заданные размеры, ленивая загрузка.\n- Состояние в URL (фильтры, поиск) — через nuqs.\n- Следи за Web Vitals: LCP, CLS, INP.\n\nЗагрузку данных, рендеринг и роутинг делай по официальной документации Next.js."
}
]
}