Cursor rule

1---
2description: Component development patterns and composition rules
3globs: ["src/components/**/*.{tsx,ts}", "src/pages/**/*.{tsx,ts}"]
4alwaysApply: false
5---
6 
7# Component Development Rules
8 
9## Component Patterns
10 
11### GOOD Component Structure
12```tsx
13// Single responsibility, 20-80 lines
14interface UserCardProps {
15  user: User
16  onEdit: (id: string) => void
17  className?: string
18}
19 
20export const UserCard = ({ user, onEdit, className }: UserCardProps) => {
21  return (
22    <Card className={cn("p-4", className)}>
23      <Avatar src={user.avatar} />
24      <div>
25        <h3 className="font-semibold">{user.name}</h3>
26        <p className="text-muted-foreground">{user.email}</p>
27        <Button onClick={() => onEdit(user.id)}>Edit</Button>
28      </div>
29    </Card>
30  )
31}
32```
33 
34### AVOID: Monolithic Components
35```tsx
36// DON'T: 300+ lines mixing concerns
37const UserManagement = () => {
38  // Massive component with multiple responsibilities
39}
40```
41 
42### Component Composition Pattern
43```tsx
44// Build complex UI from smaller components
45const Dashboard = () => (
46  <PageLayout>
47    <DashboardHeader />
48    <DashboardMetrics />
49    <DashboardCharts />
50    <DashboardActivity />
51  </PageLayout>
52)
53```
54 
55## UI Component Rules
56 
57### shadcn/ui Components
58- **NEVER** modify files in `src/components/ui/` directly
59- **EXTEND** by creating wrappers in `src/components/common/`
60- **COMPOSE** multiple ui components to build features
61 
62### Form Components
63```tsx
64// Use React Hook Form + Zod pattern
65export const UserForm = ({ onSubmit, initialData }: UserFormProps) => {
66  const form = useForm<UserFormData>({
67    resolver: zodResolver(userSchema),
68    defaultValues: initialData
69  })
70 
71  return (
72    <Form {...form}>
73      <form onSubmit={form.handleSubmit(onSubmit)}>
74        <FormField
75          control={form.control}
76          name="name"
77          render={({ field }) => (
78            <FormItem>
79              <FormLabel>Name</FormLabel>
80              <FormControl>
81                <Input {...field} />
82              </FormControl>
83              <FormMessage />
84            </FormItem>
85          )}
86        />
87      </form>
88    </Form>
89  )
90}
91```
92 
93## Page Component Rules
94 
95### Pages = Composition Only
96```tsx
97// PERFECT: Thin orchestration layer (10-30 lines max)
98const DashboardPage = () => {
99  const { data: user, isLoading } = useCurrentUser()
100  
101  if (isLoading) return <PageSkeleton />
102  
103  return (
104    <PageLayout>
105      <DashboardHeader user={user} />
106      <DashboardMetrics />
107      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
108        <DashboardCharts />
109        <DashboardActivity />
110      </div>
111    </PageLayout>
112  )
113}
114```
115 
116### NEVER in Pages
117- Business logic (extract to hooks)
118- API calls (use service layer)
119- Complex state management
120- Inline event handlers
121 
122## Reusable Component Patterns
123 
124### Compound Components
125```tsx
126const DataTable = ({ children }) => (
127  <div className="border rounded-lg overflow-hidden">{children}</div>
128)
129 
130const DataTableHeader = ({ children }) => (
131  <div className="bg-muted p-4 border-b">{children}</div>
132)
133 
134// Usage
135<DataTable>
136  <DataTableHeader>
137    <h3>Users</h3>
138  </DataTableHeader>
139  <DataTableBody>
140    {users.map(user => <UserRow key={user.id} user={user} />)}
141  </DataTableBody>
142</DataTable>
143```
144