---
name: react-patterns
description: React patterns I should follow in this project
---
 
# React Patterns
 
## Components
 
- Use functional components, never class components
- Extract complex logic to custom hooks
- Keep components under 150 lines
 
## State
 
- Use useState for simple local state
- Use useReducer for complex state
- Use context only for truly global data
 
## Styling
 
- Use Tailwind CSS
- Avoid inline CSS except for dynamic values
- Follow conditional class pattern with cn()
 
## Examples
 
### Simple Component
```tsx
export function UserCard({ user }: { user: User }) {
  return (
    <div className="p-4 border rounded">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  )
}

function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    fetchUser(id).then(setUser).finally(() => setLoading(false))
  }, [id])
 
  return { user, loading }
}

---
name: code-style
description: Code style and project conventions
---
 
# Code Style
 
## TypeScript
- Use explicit types, no `any`
- Prefer interfaces over types for objects
- Export types alongside their functions
 
## Naming
- Components: PascalCase
- Functions: camelCase
- Constants: UPPER_SNAKE_CASE
- Component files: PascalCase.tsx
- Util files: camelCase.ts
 
## Imports
- Absolute first, relative second
- Sort alphabetically within each group
- One empty line between groups
 
## Comments
- Only when code isn't self-explanatory
- JSDoc for public functions
- TODO: only if there's a plan to resolve it

---
name: testing-strategy
description: Testing strategy for this project
---
 
# Testing Strategy
 
## Unit Tests
- Test business logic, not implementation
- One test file per module
- Name: `[module].test.ts`
 
## Integration Tests
- Test complete flows
- Use mocks only for external services
- Database setup/teardown
 
## E2E Tests
- Only for critical user flows
- Run in CI before merge
- Use Playwright
 
## Coverage
- Minimum 80% on new code
- Don't test: types, constants, config

---
name: api-patterns
description: Patterns for creating REST APIs
---
 
# API Patterns
 
## Response Format
```json
{
  "data": {},
  "meta": {},
  "error": null
}

---
description: React patterns with hooks, styled-components, and TypeScript for UI components
---