Checkpoint

AGENTS.md

@@ -0,0 +1,51 @@
+# Project
+
+This is a case study for creating a Yellow Cyberpunk theme called "CyberDuck" that is suitable for
+use in a React project. It is based on Bootstrap v5 and Material icons.
+
+## Stylesheets
+
+We use a modular system based on SASS (SCSS), all style elements are stored in `src/styles`, each
+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 
+  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` 
+  and `$cyberduck-font-display`.
+
+**Colors:**
+- The base background color variants are `--cyberduck-void-<shade>`, accents are `--cyberduck-yellow-<shade>`.
+- 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`). 
+- Update tokens in `src/styles/_variables.scss` to change palette or fonts globally.
+
+## React
+
+We use a modular system based on React Components, all are stored in `src/components`. Generic components
+are stored in that base folder, more specific Components that are only used by one other type of component
+get their own subfolder. Components have short, but descriptive names often mathing the type of tag,
+container or view they represent.
+
+## 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 
+the URL and warnings.
+
+## Changes strategy
+
+Prefer patching over running external commands. Prefer inline replacement over removing files and
+regenerating them.
+
+When you need feedback from me, use the VSCode dialog option when possible, optimize interactions
+with me to avoid typing where possible.