Checkpoint

AGENTS.md

@@ -10,13 +10,13 @@ Bootstrap core component gets its own file under `src/styles/components`.
 
 **SCSS convention:**:
 - Use modern `@use` and single-source SASS maps
-- Component code should prefer compile-time SASS colors when using Sass functions, and read emitted 
+- Component code should prefer compile-time SASS colors when using Sass functions, and read emitted
   CSS custom properties (`--color-variant-*`, `--cyberduck-void-*`, `--cyberduck-font-display`) for
   runtime theming.
 - Order `@use` statements to include sass-builtins first, then bootstrap includes, then local includes
 
 **Fonts:**
-- Google fonts are included in `index.html`; the display font is referenced via `--cyberduck-font-display` 
+- Google fonts are included in `index.html`; the display font is referenced via `--cyberduck-font-display`
   and `$cyberduck-font-display`.
 
 **Colors:**
@@ -24,7 +24,7 @@ Bootstrap core component gets its own file under `src/styles/components`.
 - All other colors stick to the Cyberpunk theme and use vibrant, neon style color palettes.
 
 **Where to change visuals:**
-- Edit partials under `src/styles/components` (e.g. `_navbar.scss`, `_card.scss`, `_footer.scss`). 
+- Edit partials under `src/styles/components` (e.g. `_navbar.scss`, `_card.scss`, `_footer.scss`).
 - Update tokens in `src/styles/_variables.scss` to change palette or fonts globally.
 
 ## React
@@ -34,12 +34,17 @@ are stored in that base folder, more specific Components that are only used by o
 get their own subfolder. Components have short, but descriptive names often mathing the type of tag,
 container or view they represent.
 
+**React/Typescript convention:**
+- Use imports, multi imports from the same package are split over multiple lines so it generates clean diffs
+- Imports are ordered: first React and React plugin imports, then third party imports, then local code
+  imports and the last imports are stylesheets. Global stylesheets are imported before local imports.
+
 ## Testing
 
 Run the specific npm test commands for when making changes:
 - For style updates run `npm run styles:check`
 
-Don't run `npm run dev` without permission; if you want visual QA, ask me to run it and I will report 
+Don't run `npm run dev` without permission; if you want visual QA, ask me to run it and I will report
 the URL and warnings.
 
 ## Changes strategy