From 23c55177111927a6040524e1daccc3622e946eb1 Mon Sep 17 00:00:00 2001 From: James Manuel Date: Thu, 23 Jul 2026 16:39:15 +0200 Subject: [PATCH 01/14] docs: add CSS, component-extraction and testability guidance for agents Adds four rules covering what came up while redoing #79/#83 this session: reuse existing design tokens over hardcoded values, extract components only for genuine multi-site duplication (as its own commit unless the component is new to the feature), prefer @nextcloud/vue over hand-rolled markup, and structure code for testability without extracting solely to reach a test. Signed-off-by: James Manuel --- AGENTS.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/AGENTS.md b/AGENTS.md index bbfdb9e..130a000 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -43,3 +43,56 @@ bot recompiles and commits assets via `/compile` on the PR. `.githooks/pre-commi blocks this locally as a backstop, but don't rely on the hook catching it — run `npm run build` for local testing, then `git restore --staged js css` (or don't stage them in the first place) before committing. + +## Reuse CSS variables and existing structure + +Prefer existing design tokens (`var(--color-...)`, `var(--border-radius)`, +`var(--default-clickable-area)`, `var(--default-grid-baseline)`, etc.) over +hardcoded pixel values or colours. Before sizing or styling a new element, +check how a comparable element elsewhere in `src/` does it, and how the +`@nextcloud/vue` component it sits next to sizes itself (its compiled CSS is +under `node_modules/@nextcloud/vue/dist/assets/*.css` — many tokens +themselves are defined server-side, not in this package, so a grep miss +there isn't proof no token exists). If you genuinely can't find a matching +token, use the real value — never invent a `var(--something)` that isn't +defined anywhere, it silently resolves to nothing. + +## Extract components over duplicated template blocks + +When the same markup — or near-identical markup differing only in +props/size — appears at multiple call sites *and* a future change (a bug +fix, a new prop, a behaviour tweak) would need to be applied at every one +of them to stay correct, extract it into its own component rather than +copy-pasting. Two call sites can already justify this for UI markup, where +divergence is easy to introduce by only fixing one copy. Don't extract for +a single call site, and don't extract just because two blocks currently +look similar if that similarity is coincidental rather than a shared +responsibility — that's premature abstraction, not reuse. + +Extraction is a refactor. If you're pulling apart duplication that already +existed before your change, do that as its own commit, separate from the +functional change that prompted you to notice it (see "Commit atomically" +above). If the component is new and only exists because of the feature +you're building, it belongs in that feature's commit — you're not +separating pre-existing duplication, you're introducing the abstraction as +part of the change itself. + +## Prefer existing NC/Vue libraries over hand-rolled markup + +Check whether `@nextcloud/vue/components` (or another already-installed +dependency) already covers what you're building before writing raw +HTML/CSS for it. Hand-rolled UI drifts from the design system over time and +duplicates maintenance that the library already carries. + +## Structure code so it's easily unit-testable + +Prefer small, focused functions/components with explicit inputs (props, +arguments) over logic buried inline in a large `