---
description: React component conventions
globs: src/components/**/*.tsx
alwaysApply: false
---

# React Component Rules

## Structure
- Use functional components with TypeScript
- Define props interface above the component
- Export components as named exports

## Styling
- Use the project design system tokens for spacing and colors
- Prefer utility classes over custom CSS
- Keep component-specific styles colocated

## Patterns
- Wrap async data in Suspense boundaries
- Use forwardRef for reusable interactive components
- Keep components under 150 lines; extract hooks for logic

## Accessibility
- All interactive elements need aria-labels
- Use semantic HTML elements (nav, main, section)
- Ensure keyboard navigation works for custom widgets

# Project Guidelines

## Language & Framework
- Kotlin with Spring Boot 3.x
- Gradle with Kotlin DSL
- JDK 21 with virtual threads

## Architecture
- Hexagonal architecture (ports & adapters)
- Domain events for cross-module communication
- CQRS for read-heavy endpoints

## Code Standards
- Follow Kotlin coding conventions
- Use data classes for DTOs
- Prefer sealed classes for domain errors
- Extension functions over utility classes

## Testing
- JUnit 5 with Kotest assertions
- Testcontainers for integration tests
- MockK for mocking (not Mockito)

## Build & Run
- Build: ./gradlew build
- Test: ./gradlew test
- Run: ./gradlew bootRun