docs: 生成层次化 AGENTS.md 文档系统

2026-02-01 14:57:43 +08:00
parent e1f250d397
commit 53e1faab89
5 changed files with 479 additions and 0 deletions
@@ -0,0 +1,60 @@
+# 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:**
+
+```tsx
+// 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