agent-park/src/components/AGENTS.md

Component System Architecture

Neo-Brutalism Design Principles

Visual Identity:

• Sharp corners (0px radius) - no rounded edges
• Bold borders (4px solid shadows) for depth
• High contrast colors with hard edges
• Gold (#FFD700) primary, Orange (#ff6f00) secondary
• Space Mono headings, Inter body text

Component Styling:

// Base button pattern - no border-radius, hard shadows
className="border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
           hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"

Component Organization

src/components/
├── layout/           # Layout primitives (Header, Footer, AnnouncementBar)
├── locale/           # I18n utilities (LocaleSwitcher)
├── project/          # Project-specific components (ProjectCard, ProjectDetail)
├── search/           # Search functionality (SearchBar)
└── ui/               # Base UI components (Button, Card, Badge)

Component Patterns

Composition Pattern

• Build complex components from small reusable primitives
• Example: ProjectCard = Card + Badge + ExternalLink

Server Components First

• Default to Server Components for data fetching
• Use Client Components ("use client") only for interactivity
• Pass server data via props to client components

Responsive Design

• Mobile-first Tailwind classes: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• Breakpoints: md (768px), lg (1024px)

Accessibility

• Semantic HTML elements
• Keyboard navigation support
• ARIA labels where needed

State Management

• Server state: Prisma queries in Server Components
• Client state: React hooks (useState, useEffect) for interactivity
• Global state: Context providers for locale, theme