- Prefer types over interfaces for simple data structures
- Use interfaces and class OOP for more complex components
- Comments should be used to explain "why" decisions were made with possible source references
- Avoid magic numbers or strings - use constants instead, and if they feel like configuration values, move them to a configuration file
- Avoid default parameter values especially in method signatures since this can lead to unexpected behavior. For example if a method signature has three arguments, then a caller is required to pass in exactly three arguments.
- Avoid null coalescing (??) or fallbacks. All values should always be explicitly set.
- Avoid default parameters / default fallbacks / etc. since this silently obfuscates errors. Errors should always propagate so we can discover potential issues.
- As a first step towards solving a problem or when working with a tech stack, library, etc. always check for any related documentation under the ./docs directory.
- Remember to account for both mobile and desktop views since there may be different visual components for each.
- Always use both visual and DOM inspection: When diagnosing frontend issues, take a visual screenshot AND run JavaScript to inspect/check the DOM (e.g.,
browser_evaluateto check computed styles, element dimensions, classes). - Check the dev tools console for errors or warnings that may indicate issues with rendering, assets, or scripts.
- No layout shifts: Buttons and UI elements must maintain consistent dimensions when their content changes (e.g., "Solve" → "Solving...", "Stop"). Use fixed widths, min-width, or reserve space for the longest possible text.
Whenever a change or addition is made, you are required to add comprehensive new unit, integration, and E2E tests to ensure code quality and prevent regressions. Adding E2E should use playwright. Whenever you finish fixing a bug you must also write an accompanying unit, integration, or E2E test that would have caught the bug.
Whenever you finish a task you must perform the following in order:
- Run the tests to ensure all new and existing tests pass.
- Run
pnpm run checkto ensure code is properly formatted and linted. - Run
pnpm run buildto ensure the project builds successfully.