chore(aria): add frontend CLAUDE.md with mandatory UI pattern rules

2026-06-15 22:44:51 -04:00
parent 571d88db4d
commit 75ff2b92fd
1 changed files with 43 additions and 0 deletions
@@ -0,0 +1,43 @@
+# hiveops-aria frontend — CLAUDE.md
+
+## Before writing ANY new component
+
+Read an existing sibling component first. Mandatory. Use `IocManagement.svelte` or `DevicePosture.svelte` as the reference.
+
+## Canonical patterns (copy exactly, no variations)
+
+**Header** — text only, no buttons:
+```svelte
+<div class="header">
+  <div class="header-text">
+    <h1>Page Title</h1>
+    <p>Subtitle</p>
+  </div>
+</div>
+```
+
+**Toolbar** — all buttons go here, never in the header:
+```svelte
+<div class="form-card">
+  <div class="toolbar">
+    <div class="toolbar-left"><span class="count">N items</span></div>
+    <div class="toolbar-right">
+      <button class="btn btn-secondary btn-sm">Refresh</button>
+      <button class="btn btn-primary btn-sm">+ Add</button>
+    </div>
+  </div>
+```
+
+**Buttons** — always global classes, never custom button CSS:
+- `btn btn-primary` / `btn btn-primary btn-sm`
+- `btn btn-secondary` / `btn btn-secondary btn-sm`
+
+**Table** — inside `.table-wrapper > .table-container`:
+- `thead` background: `#f9fafb`, sticky
+- `th` color: `#374151`, uppercase, `font-size: 0.78rem`
+- `td` color: `#1f2937`
+- `tbody tr:hover` background: `#eff6ff`
+
+## Auto-poll
+- Poll the STATUS endpoint only — never trigger a refresh from setInterval
+- Use `onDestroy(() => clearInterval(interval))` always