In JavaScript and TypeScript, use types as much as possible: strict mode will be turned on! If in doubt, follow Java standard formatting. Finally, we also always want trailing commas in multi-line code blocks.
- ALWAYS use both
bunandnpmfor dependency management - ALWAYS use
bunfor commands and task execution, you can ignorenpmother than dependency management - ALL commands must be run from project root (where
package.jsonexists)
- Use tools from
package.jsonfor everything – linting, internationalization, translation keys, rebuilding, tests (if any), etc. - Always run lint using
bunbefore commits and at the end of tasks / plan chapters - Bun scripts set up their environments, so there's nothing extra that you need to do
- Version is managed through the
versionproperty of thepackage.jsonfile - You can see the CI/CD pipeline in
.github/workflowsdirectory - It's best to base API implementation on API docs. If you don't have any, ask for them
- All user-facing labels and messages must always be translated. Use the i18n directory for doing that. Never add any placeholders, and always manually update all translation files to ensure proper translation from day 0 across all languages
- All tasks and tools that you need are defined in
package.json; for example, never run any translation scripts yourself – always just runbun run lintto understand the current state of the project and regenerate translation keys
- API errors must use
parseApiError()in services and be displayed viaPageError.fromApiError()with the ErrorMessage component (never use toast for API errors). Non-blocker errors auto-dismiss after 5 seconds with a visual timer; blocker errors remain visible until resolved
- Use generic prop names instead of specific ones (e.g.,
onActionClickedinstead ofonSaveClicked) - Use generic boolean flags (e.g.,
showActionButtoninstead ofshowSaveButton) - Add configurable text props with sensible defaults (e.g.,
actionButtonTextwith defaultt("save"))
interface GenericControlsProps {
onActionClicked: () => void;
showActionButton?: boolean;
actionButtonText?: string; // Defaults to t("save")
}- Update all translations - Look at the i18n folder to find all editable translation files
- Check the keys - Update translation keys using the translation keys task from
package.json - Never hard-code strings - Always use translated versions of strings!
- Update the component interface - Change prop names and add new optional props
- Search for all usages - Use grep/search to find all files using the component
- Update all usages systematically - Update each usage site with new prop names
- Maintain backward compatibility - Use sensible defaults for new props
Whatever you do, always run the lint and rebuild bun tasks to check what you did.