CLAUDE.md

1# UI Components Library - LLM Development Guide
2 
3## 📖 Component Inventory & Documentation
4 
5**SEE `README.md` in this directory for complete component documentation**
6 
7The README.md file contains comprehensive documentation of all available UI components including:
8 
9- Component interfaces and props
10- Usage examples
11- Features and capabilities
12- Development guidelines
13 
14## 🎯 Key Guidelines for LLMs
15 
16### 1. Always Use Existing Components First
17 
18- **Check the README.md inventory before creating new components**
19- Prefer composition and extension over duplication
20- 40+ components available covering most UI needs
21 
22### 2. Import Paths
23 
24```svelte
25// UI components import ComponentName from '$lib/desktop/components/ui/ComponentName.svelte'; //
26Utilities import {handleBirdImageError} from '$lib/desktop/components/ui/image-utils.js';
27```
28 
29### 3. Common Component Categories Available
30 
31- **Layout**: Card, CollapsibleCard, CollapsibleSection
32- **Forms**: Input, Select, DatePicker
33- **Feedback**: Badge, ProgressBar, LoadingSpinner, ErrorAlert, EmptyState
34- **Navigation**: Modal, Pagination, ActionMenu
35- **Data Display**: ProcessTable, SystemInfoCard, SettingsCard
36- **Media**: AudioLevelIndicator, ThemeToggle, TimeOfDayIcon
37- **Advanced**: MultiStageOperation, NotificationBell, SearchBox
38 
39### 4. Required for New Components
40 
41If you must create a new component:
42 
431. Add TypeScript interface
442. Follow Svelte 5 patterns ($state, $derived, snippets)
453. Include accessibility features
464. Add entry to README.md with full documentation
475. Create `.test.ts` file
486. Use Tailwind CSS utility classes
49 
50### 5. Component Patterns
51 
52- Use `className` prop for customization
53- Support HTML attribute spreading with `{...rest}`
54- Include `children` snippet for flexible content
55- Define proper TypeScript interfaces
56 
57## 🚨 Important
58 
59**Always refer to README.md in this directory for complete component documentation and usage examples before implementing any UI functionality.**
60