Synth is a Vite + React TypeScript project. Keep application logic inside src/, with main.tsx bootstrapping React and App.tsx arranging top-level layout. Reusable UI lives in src/components/ using PascalCase filenames, while shared styles stay in src/index.css and design tokens in tailwind.config.js. Serve static assets from public/; avoid committing anything generated under dist/.
Install dependencies with npm install (or bun install to respect bun.lockb). Use npm run dev for a hot-reloading development server. Run npm run build to compile a production bundle and surface TypeScript errors. Validate the built output locally via npm run preview. Keep the codebase lint-clean with npm run lint.
Use TypeScript throughout and prefer functional React components. Follow the existing two-space indentation and wrap JSX attributes to multiple lines when they exceed the formatter width. Name components and their files in PascalCase (Logo.tsx), hooks in camelCase (useFeatureFlag), and utility modules with kebab-case if added outside components/. Tailwind utility classes should describe layout-to-appearance order, matching current patterns. Linting is configured via eslint.config.js; fix or justify any warnings before opening a pull request.
No automated test harness ships yet, so rely on npm run lint and manual verification until tests are introduced. When adding tests, colocate them beside components using the Component.test.tsx pattern and prefer React Testing Library with Vitest for consistency with the Vite ecosystem. Document any new test commands in package.json and reference them here.
History favors concise, action-oriented commit messages (e.g., Update layout spacing). Write messages in the imperative mood and group related changes per commit. For pull requests, provide a summary of the user-facing effect, link any tracking issues, and attach screenshots or recordings when UI changes are involved. Note any follow-up tasks and ensure npm run build and npm run lint have been run before requesting review.