semblance-dev/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

• Build: npm run build (use this for all testing and verification)
• Lint code: npm run lint
• Preview production build: npm run preview
• Python testing: When modifying Python files, activate the virtual environment with source backend/venv/bin/activate and test syntax by importing the module with python -c "import app.services.module_name"

Note: This project is hosted on a server. Always use npm run build instead of npm run dev for testing changes.

Python Testing: After modifying any Python files in the backend, ALWAYS activate the virtual environment and test for syntax errors by attempting to import the modified module. This catches syntax errors before deployment.

Code Style Guidelines

• Imports: Group imports by source (React, third-party, local)
• Types: Use TypeScript. Project allows nullable types (strictNullChecks: false)
• Components: Use functional components with hooks
• Naming: Use PascalCase for components, camelCase for variables/functions
• Formatting: Follow ESLint recommendations, focus on readability
• Error Handling: Use try/catch blocks with toast for user feedback
• CSS: Use Tailwind classes for styling, with component-specific CSS files when needed
• File Structure: Components in /src/components, pages in /src/pages, hooks in /src/hooks
• UI Components: Use shadcn-ui components from /src/components/ui
• State Management: React hooks for local state, context/props for sharing
• URL Construction: ALWAYS use import.meta.env.BASE_URL when constructing URLs for static assets, images, or links. This project uses base path /semblance/ in production. Example: ${import.meta.env.BASE_URL}image.png instead of /image.png

Project Stack

Vite, React, TypeScript, Tailwind CSS, shadcn-ui