solid-react

# SOLID React - Component Architecture

## Current Date (CRITICAL)

**Today: January 2026** - ALWAYS use the current year for searches.
Search with "2025" or "2026", NEVER with past years.

## MANDATORY: Research Before Coding

**CRITICAL: Check today's date first, then search documentation BEFORE writing any code.**

1. **Use Context7** to query React official documentation
2. **Use Exa web search** with current year for latest trends
3. **Verify package versions** for React 19 compatibility

```text
WORKFLOW:
1. Check date → 2. Research docs + web (current year) → 3. Apply latest patterns → 4. Code
```

---

## Codebase Analysis (MANDATORY)

**Before ANY implementation:**
1. Explore project structure to understand architecture
2. Read existing related files to follow established patterns
3. Identify naming conventions, coding style, and patterns used

---

## Absolute Rules (MANDATORY)

### 1. Files < 100 lines

- **Split at 90 lines** - Never exceed 100
- Components < 50 lines (use composition)
- Hooks < 30 lines each
- Services < 40 lines each

### 2. Modular Architecture

```text
src/
├── modules/                    # ALL modules here
│   ├── cores/                  # Shared (global to app)
│   │   ├── components/         # Shared UI (Button, Modal)
│   │   ├── lib/                # Utilities
│   │   └── stores/             # Global state
│   │
│   ├── auth/                   # Feature module
│   │   ├── components/
│   │   └── src/
│   │       ├── interfaces/
│   │       ├── services/
│   │       ├── hooks/
│   │       └── stores/
│   │
│   └── [feature]/              # Other feature modules
│
├── routes/                     # TanStack Router routes
└── main.tsx
```

### 3. JSDoc Mandatory

```typescript
/**
 * Fetch user by ID from API.
 *
 * @param id - User unique identifier
 * @returns User object or null if not found
 */
export async function getUserById(id: string): Promise<User | null>
```

### 4. Interfaces Separated

```text
modules/[feature]/src/inte