#306

AGENTS.md

@@ -132,6 +132,10 @@ npm run preview
 - Tabs are only for leading indentation, never for spaces after non-space text.
 - TypeScript and TSX imports may stay on one line if they remain within the
   line limit; do not expand short type-only imports mechanically.
+- In TypeScript and TSX, when breaking a line at an operator, break before the
+  operator and put the operator at the beginning of the next line. A trailing
+  operator at end of line is unacceptable. This rule does not apply to Ruby,
+  where it can change the syntactic structure.
 - In TypeScript and TSX, when a function takes one destructured object
   argument plus an inline type, prefer this shape when it fits locally:
 
@@ -231,6 +235,22 @@ const value =
 - Keep page-level code under `frontend/src/pages` and shared UI/feature code
   under `frontend/src/components` unless existing patterns point elsewhere.
 - Match existing Tailwind, component, and import alias conventions.
+- `<a href="#">` is acceptable for event-only controls when it fits the local
+  UI pattern. Do not use `<a>` for internal navigation or other non-external
+  links.
+- Internal links must use `PrefetchLink`.
+- External links must use `<a>` with `target="_blank"`.
+- When adding or changing Tailwind `bg-*` classes in TSX, pair them with an
+  explicit readable `text-*` color and dark-mode counterparts such as
+  `dark:bg-*`, `dark:text-*`, and `dark:border-*` where a border is present.
+- Do not rely on inherited text color for light backgrounds. This is especially
+  important for chips, cards, buttons, and panels that may inherit white text in
+  dark mode.
+- Mobile UI must be checked as a first-class layout. Avoid wide fixed content,
+  make dense controls wrap or scroll intentionally, and keep tag/filter
+  controls usable without horizontal page overflow.
+- For mobile horizontal scrollers, make the scroll direction and item sizing
+  explicit, and ensure chip text remains readable in both light and dark modes.
 - In TypeScript and TSX, prefer direct comparison operators such as `===` and
   `!==` over negating a comparison like `!(a === b)`.
 - In TypeScript and TSX, prefer `++i` or `--i` over `i += 1` or `i -= 1` for