cyberduck/AGENTS.md

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.

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 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.