Copilot instructions

1---
2applyTo: 'src/components/**/*.{tsx,ts}'
3---
4# Component-Specific Guidelines
5 
6## COMPONENT ARCHITECTURE RULES
7 
8### UI Components (`src/components/ui/`)
9- **READ-ONLY**: Never modify shadcn/ui components directly
10- **EXTEND**: Create wrapper components in `src/components/common/`
11- **COMPOSE**: Build complex UI by combining multiple ui components
12 
13### Common Components (`src/components/common/`)
14- **REUSABLE**: Components used across multiple features
15- **GENERIC**: Should accept flexible props for different use cases
16- **DOCUMENTED**: Include clear prop interfaces and examples
17 
18### Feature Components (`src/components/features/`)
19- **SPECIFIC**: Components tied to particular business features
20- **COMPOSED**: Build from smaller ui and common components
21- **SINGLE PURPOSE**: One feature concern per component
22 
23## Component Size Limits
24```tsx
25// GOOD: Focused, single-purpose component (20-80 lines)
26const UserCard = ({ user, onEdit }: UserCardProps) => (
27  <Card className="p-4">
28    <Avatar src={user.avatar} />
29    <div>
30      <h3>{user.name}</h3>
31      <p>{user.email}</p>
32      <Button onClick={() => onEdit(user.id)}>Edit</Button>
33    </div>
34  </Card>
35)
36 
37// BAD: Monolithic component over 100 lines
38const UserManagement = () => {
39  // 200+ lines mixing multiple concerns
40}
41```
42 
43## Component Composition Patterns
44```tsx
45// PERFECT: Composition over monoliths
46const DashboardPage = () => (
47  <PageLayout>
48    <DashboardHeader />
49    <DashboardMetrics />
50    <DashboardCharts />
51    <DashboardActivity />
52  </PageLayout>
53)
54 
55// Each sub-component is 20-80 lines and focused
56```
57