CLAUDE.md

1# Claude AI Assistant Guidelines
2 
3## Project Context
4 
5This is a React + Vite project with TypeScript, TailwindCSS, and shadcn/ui components. When working on this codebase, you must adhere to the established conventions and patterns.
6 
7## Important Instructions
8 
9### 0. Follow this Standard Styling
10 
11**CRITICAL:** For ANY change related to the UI/UX, you **MUST** first refer to `rules/design-system.md`. This file contains the "Creator's Campus" aesthetic, approved component patterns, color usage, typography, and animation guidelines.
12 
13**Do not invent new styles.** Use the existing patterns defined in the design system.
14 
15Page Container Padding & Spacing:
16 
17- Mobile: px-3 py-4 (12px/16px)
18- Small: sm:px-4 sm:py-5 (16px/20px)
19- Medium: md:px-6 md:py-6 (24px/24px)
20- Large: lg:px-8 lg:py-8 (32px/32px)
21 
22Card Component Padding:
23 
24- Mobile: p-3 (12px)
25- Medium: md:p-4 (16px)
26- Large: lg:p-6 (24px)
27 
28Grid Gaps:
29 
30- Mobile: gap-3 (12px)
31- Medium: md:gap-4 (16px)
32- Large: lg:gap-6 (24px)
33 
34Internal Spacing (space-y/space-x):
35 
36- Mobile: space-y-2 (8px)
37- Medium: md:space-y-3 (12px)
38 
39Important: Implement Text Responsiveness in every UI development!
40 
41### 1. Project Structure Compliance
42 
43**ALWAYS** follow the structure and conventions defined in `README.project-structure.md` when:
44 
45- Creating new files or folders
46- Organizing code modules
47- Naming files, folders, functions, types, etc.
48- Implementing features or routes
49 
50### 2. Rules and Patterns
51 
52**ALWAYS** check the `rules/` folder for specific implementation patterns before:
53 
54- Creating query hooks → See `rules/query-hooks.md`
55- Creating mutation hooks → See `rules/mutation-hooks.md`
56- Creating Zustand stores → See `rules/zustand-store.md`
57- Implementing data access → See `rules/data-access-via-api.md`
58- Creating service layers → See `rules/service-layer.md`
59- Styling components → See `rules/styling.md`
60- Implementing any feature that might have established patterns
61 
62### 3. Code Generation Guidelines
63 
64When generating or modifying code:
65 
661. First, understand the existing patterns in the codebase
672. Check if there are similar implementations to reference
683. Follow the established naming conventions strictly
694. Place files in the correct folders according to the project structure
705. Use appropriate patterns based on complexity and requirements
71 
72### 4. Key Conventions Summary
73 
74- **File/Folder naming**: `kebab-case` (use `_kebab-case` for feature domains, `-kebab-case` for route domains)
75- **Types/Classes**: `PascalCase`
76- **Functions/Variables/Zod Schemas**: `camelCase`
77- **Database**: `snake_case` for tables and columns
78- **Package Manager**: Always use `pnpm`
79- **State Management**: Zustand
80- **Data Fetching**: TanStack Query
81- **Routing**: TanStack Router (file-based)
82- **Forms**: React Hook Form + Zod
83- **Styling**: TailwindCSS + shadcn/ui
84- **Testing**: Vitest + Testing Library
85 
86### 5. Before Making Changes
87 
88Always:
89 
901. Read the relevant documentation in `README.project-structure.md`
912. Check for existing patterns in `rules/` folder
923. Look for similar implementations in the codebase
934. Maintain consistency with existing code style
945. Run type checking: `pnpm check:types`
956. Run linting: `pnpm lint`
96 
97### 6. When Creating New Features
98 
99Follow this checklist:
100 
101- [ ] Determine if it's a shared module, route domain, or feature domain
102- [ ] Create the appropriate folder structure as defined in the project structure
103- [ ] Follow the naming conventions for all files and exports
104- [ ] Check rules folder for implementation patterns
105- [ ] Use existing utilities and shared modules when possible
106- [ ] Only create service layers when business logic is complex
107- [ ] Write type-safe code using TypeScript
108- [ ] Follow TailwindCSS conventions for styling
109- [ ] Ensure proper error handling in data fetching
110 
111### 7. Checks Commands
112 
113- `pnpm build` - Build for production
114- `pnpm test` - Run tests
115- `pnpm format` - Format code with Prettier
116- `pnpm check:all` - Run all checks concurrently for TypeScript, Lint and Check Spell
117 
118Remember: Consistency and adherence to established patterns is crucial for maintaining a clean, scalable codebase.
119