CLAUDE.md

1# Component Development Guide
2 
3## Component Inventory
4 
5See [README.md](./README.md) for complete component inventory organized by category.
6 
7## Component Guidelines
8 
9- **Reuse existing components** - Always check the inventory first before creating new components
10- **Extend existing components** - If new requirements can be met with non-breaking changes, prefer extending existing components over creating new ones
11- **Document new components** - Any new components must be added to [README.md](./README.md) inventory
12- Follow Svelte 5 patterns (runes, snippets)
13- Use TypeScript for all components
14- Include comprehensive tests for each component
15- Use proper accessibility attributes
16- Follow naming conventions: PascalCase for components
17- Organize by functionality in subdirectories
18 
19## Component Structure
20 
21```
22components/
23├── charts/     # Chart-related components
24├── data/       # Data display components
25├── forms/      # Form inputs and controls
26├── layout/     # Layout and navigation
27├── media/      # Media playback components
28├── modals/     # Modal dialogs
29└── ui/         # Generic UI components
30```
31 
32## Testing
33 
34Each component should have corresponding test files:
35 
36- Unit tests: `.test.ts`
37- Component tests: `.test.svelte`
38 
39Run tests with: `npm test`
40