---
globs: components/**/*.tsx
---

# Components Rules

1. UI components MUST be in components/ui/
2. Feature components MUST be in their feature folder
3. Components MUST use clients for data fetching
4. Components MUST be properly typed

Example of correct component:

```typescript
import { useMyClient } from '@/hooks/use-my-client';

export const MyComponent = () => {
  const { data } = useMyClient();
  return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>;
};
```

❌ FORBIDDEN:

- Direct service usage
- Direct database queries
- Direct fetch calls
- Untyped props