72e07dad3d
- Энциклопедия 20 видов грибов Крыма с детальными описаниями - Интерактивный календарь грибника по месяцам - Справочник: правила сбора, первая помощь, кулинария - Поиск и фильтрация по съедобности и сезону - Адаптивный дизайн, природная цветовая палитра - Docker-конфигурация для деплоя Tech: Next.js 15, TypeScript, Tailwind CSS 4, React 19 Co-authored-by: Cursor <cursoragent@cursor.com>
30 lines
764 B
Plaintext
30 lines
764 B
Plaintext
---
|
|
description: React component patterns for the project
|
|
globs: "**/*.tsx"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Component Patterns
|
|
|
|
## Structure
|
|
```tsx
|
|
// 1. Imports
|
|
// 2. Types/Interfaces
|
|
// 3. Component
|
|
// 4. Sub-components (if small)
|
|
```
|
|
|
|
## Rules
|
|
- Extract reusable logic into custom hooks (`src/hooks/`)
|
|
- Colocate component-specific types with the component
|
|
- Use `cn()` utility for conditional classNames
|
|
- Prefer composition over prop drilling
|
|
- Server Components by default, add `'use client'` only when needed
|
|
- Keep components under 150 lines — extract if larger
|
|
|
|
## Accessibility
|
|
- All images must have descriptive `alt` text
|
|
- Interactive elements must be keyboard-accessible
|
|
- Use proper heading hierarchy (h1 → h2 → h3)
|
|
- Color contrast ratio ≥ 4.5:1
|