lovable-boilerplate components.instructions.md

Component-Specific Guidelines

COMPONENT ARCHITECTURE RULES

UI Components (src/components/ui/)

• READ-ONLY: Never modify shadcn/ui components directly
• EXTEND: Create wrapper components in src/components/common/
• COMPOSE: Build complex UI by combining multiple ui components

Common Components (src/components/common/)

• REUSABLE: Components used across multiple features
• GENERIC: Should accept flexible props for different use cases
• DOCUMENTED: Include clear prop interfaces and examples

Feature Components (src/components/features/)

• SPECIFIC: Components tied to particular business features
• COMPOSED: Build from smaller ui and common components
• SINGLE PURPOSE: One feature concern per component

Component Size Limits

// GOOD: Focused, single-purpose component (20-80 lines)
const UserCard = ({ user, onEdit }: UserCardProps) => (
  <Card className="p-4">
    <Avatar src={user.avatar} />
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <Button onClick={() => onEdit(user.id)}>Edit</Button>
    </div>
  </Card>
)

// BAD: Monolithic component over 100 lines
const UserManagement = () => {
  // 200+ lines mixing multiple concerns
}

Component Composition Patterns

// PERFECT: Composition over monoliths
const DashboardPage = () => (
  <PageLayout>
    <DashboardHeader />
    <DashboardMetrics />
    <DashboardCharts />
    <DashboardActivity />
  </PageLayout>
)

// Each sub-component is 20-80 lines and focused