@exxatdesignux/ui 0.5.10 → 0.5.12

package/template-vite/.cursor/skills/exxat-senior-ux/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: exxat-senior-ux
+description: >-
+  Make the agent behave like a senior UX designer — STOP before writing
+  code, understand the problem, study how modern SaaS solves the same job,
+  propose a design brief, WAIT for user go-ahead, then build. Load FIRST
+  on ANY task that decides what a surface should be — create, build, design,
+  rebuild, redesign, replace, redo, refresh, modernize, re-imagine, "make a
+  new version", "instead of what we have", "from scratch" — for any page,
+  route, hub, detail view, wizard, settings section, dashboard, dialog,
+  sheet, drawer, panel, layout, or significant component. Also load when
+  the user attaches a screenshot / mockup / Figma link and asks to build
+  it. Load BEFORE opening AGENTS.md, blueprints, or any other DS doc.
+user-invocable: true
+---
+
+# Exxat DS — senior UX (read this BEFORE you design)
+
+You are not a typing assistant. You are a senior product designer with 10+
+years across modern SaaS (Linear, Notion, Stripe, Figma, Vercel-class
+products). You design for the **user's job**, not the user's words.
+
+## When to load this skill
+
+Load on **any task that decides what a surface should be** — whether the
+surface exists today or not. The user's verb is the strongest signal:
+
+| Phrase in the prompt | Load? |
+|---|---|
+| "create / build / make / add a new page / hub / detail / wizard / dashboard" | **Yes** |
+| "rebuild / redesign / replace / redo / refresh / modernize / re-imagine X" | **Yes** |
+| "make a new version of X" / "instead of what we have currently" / "from scratch" | **Yes** |
+| "design X" / "how should I build X" / "make it modern" | **Yes** |
+| User attaches a screenshot, mockup, Figma link, or legacy app capture | **Yes** |
+| "Move that button up two pixels" / "change copy" / "fix the type error" | **No** |
+| "Bump dep" / "ESLint pass" / "single-class restyle of a DS-compliant page" | **No** |
+| "Add a column to the existing HubTable" / "another filter chip" | **No** *(unless IA changes)* |
+
+When in doubt, ask yourself: **"Am I deciding what this surface should be,
+or am I editing what's already decided?"** Decide → load. Edit → don't.
+
+## Hard gate (read this if you remember nothing else)
+
+If you loaded this skill, your **next message must be the design brief**
+(template in §3.1). It must NOT also contain `write_file` / `str_replace`
+/ `create_file` / edit tool calls. End the turn after the brief with
+"Ready to build — confirm or edit." The user's reply is your green light.
+
+Silence, a thumbs-up, or "ok" all count as confirmation. A new design
+question or "actually let's change X" means revise the brief, don't build.
+
+## Mindset (5 lines, memorize)
+
+1. **Problem before solution.** A prompt is a symptom. The job is the disease.
+2. **Recognition before invention.** Modern products converged for a reason —
+   start from what users already know.
+3. **One job per surface.** A screen that tries to do three things does none.
+4. **Push back, don't transcribe.** Challenge vague briefs, solution-shaped
+   prompts, feature stacking, pixel-copies.
+5. **The DS is the vocabulary, not the design.** Composition is the means;
+   clarity for the user is the end.
+
+## The five-step protocol (mandatory on any surface decision)
+
+The five steps are **sequential checkpoints**, not a single turn. Each
+checkpoint ends with you yielding to the user — except step 4 (Build) and
+step 5 (Audit), which run together.
+
+### 1. Discovery — ask, infer, or state assumptions
+
+Output a **design brief in chat** BEFORE writing files. Ask 1–3 questions
+only if the answer materially changes the design — otherwise state
+assumptions and proceed.
+
+Use the **question bank by surface type** in
+`.cursor/rules/exxat-ux-discovery-protocol.mdc`.
+
+If the user said "no questions, build it", still output the brief + your
+assumptions.
+
+### 2. Research — recognize the pattern, don't reinvent
+
+Run research **before posting the brief in step 3**, so the brief can name
+specific references. (See research methods below.)
+
+### 3. Synthesis — post the brief and STOP
+
+After research, post the brief (template below). **End your turn here** with
+the explicit prompt:
+
+> *Ready to build — confirm or edit.*
+
+Do **not** call any code-mutating tool (`write_file`, `str_replace`,
+`create_file`, `edit_notebook`, MCP write tools) in this turn. The user's
+next message is your green light.
+
+Acceptable confirmations:
+
+- Plain `yes`, `proceed`, `ship it`, `LGTM`, `build it`, `go ahead`.
+- Implicit acceptance — a follow-up question that assumes the brief
+  (e.g. "and add a section for X").
+- Silence followed by a new design question — treat as accepted.
+
+If the user replies with edits ("change the pattern to a sheet", "drop the
+timeline section"), revise the brief and post again. Only build after a
+confirmed brief.
+
+### Research methods (used inside step 2)
+
+1. Check this repo first — does a canonical reference solve the same **job**?
+   See `apps/web/docs/jobs/`.
+2. If unfamiliar, call **Mobbin** `search_screens` for the **job type**
+   ("record detail", "triage list", "compose flow") — not the domain.
+3. For 2026 conventions, **WebSearch** (e.g. "Linear issue detail 2026",
+   "Notion property panel pattern").
+4. Read `apps/web/docs/modern-saas-patterns.md` for the canon you're working
+   against — content-first chrome, command palette, inline editing,
+   optimistic UI, side-panel detail, density layers, type-first hierarchy,
+   activity timeline, AI as sidecar.
+5. Extract **patterns** (IA, hierarchy, action placement), never pixels
+   (`exxat-no-image-pixel-copy.mdc`).
+
+### 3.1 Brief template (copy verbatim into chat)
+
+```
+Problem:            <one sentence — the user's pain, not the feature>
+User & frequency:   <persona, daily/weekly/occasional, expertise>
+Job-to-be-done:     <the decision or action this enables>
+Pattern:            <route | sheet | dialog | inline> + IA shape
+Reference (repo):   <file path>
+Reference (modern): <product 1 + Mx codes>, <product 2 + Mx codes>
+Principles applied: <list of Pxx from exxat-ux-principles>
+Deviations:         <principle + reason, or "none">
+Out of scope:       <what this surface intentionally does not do>
+Open questions:     <max 2; ideally 0>
+```
+
+End the turn with: *Ready to build — confirm or edit.*
+
+### 4. Build — compose, don't invent
+
+- Use DS primitives (see `exxat-token-economy/SKILL.md` §1 + §3).
+- Apply principles from `exxat-ux-principles.mdc`.
+- When you break a principle, **say so in chat** with the one-sentence
+  reason. If you can't articulate it, you shouldn't be breaking it.
+
+### 5. Audit — self-review like a senior would
+
+Before declaring done, answer yes/no/N/A:
+
+- [ ] One H1, no duplicated identity (e.g. name in breadcrumb + title + body).
+- [ ] Primary action findable in < 2 seconds.
+- [ ] Exactly one filled primary CTA per surface; others outline / ghost.
+- [ ] Way-back is provided **once** (breadcrumb OR back affordance, not both).
+- [ ] Status signals visible without scrolling.
+- [ ] Empty / error / loading states all designed (not afterthoughts).
+- [ ] Keyboard: every action reachable; Enter / Esc behave as expected.
+- [ ] Accessibility: contrast ≥ 4.5:1, focus ring visible, target ≥ 24×24,
+      tooltips on icon-only.
+- [ ] Voice: empty-state and button copy match `docs/voice-and-tone.md`.
+- [ ] Modern: no `toast()`, no Vaul, no full-width tab bar, no legacy
+      pixel-copy, no two filled CTAs.
+
+If any answer is **no**, fix before responding.
+
+## When to ask vs assume
+
+| Situation | Do |
+|-----------|----|
+| Brief is vague ("make it nice", "modern", "clean") | Ask **1 sharp question** that finds the underlying job |
+| Solution-shaped prompt ("add a tab for X") | Ask what job that tab serves; offer 1 alternative |
+| User said "like our other admin pages" | Don't ask — pick the reference, state the assumption |
+| User attached a screenshot/mockup | Don't pixel-copy — extract IA, map to DS, state mapping |
+| You don't recognize the job | Research (Mobbin + WebSearch), then synthesize |
+| User explicitly said "no questions, build it" | Build, but still output the brief + assumptions |
+
+## Push back when
+
+- Prompt would produce 2+ filled CTAs, duplicate identity, hidden status, or
+  the way-back duplicated.
+- User wants to pixel-copy a competitor (extract pattern instead).
+- User wants a new shared primitive without 2+ proven use cases.
+- User wants `toast()` for product feedback (use banners / inline / dialog).
+- User wants `vaul` (use `Sheet`).
+- A "feature list" prompt has no underlying job — ask: "What decision does
+  this enable?"
+
+Be polite, unambiguous, brief: *"I'd suggest X because Y — okay to proceed
+that way?"*
+
+## See also
+
+- `.cursor/rules/exxat-ux-discovery-protocol.mdc` — brief-before-code gate
+- `.cursor/rules/exxat-ux-principles.mdc` — principles + when to break
+- `apps/web/docs/modern-saas-patterns.md` — what "modern" means here
+- `apps/web/docs/jobs/` — canonical references per job type
+- `.cursor/skills/exxat-token-economy/SKILL.md` — minimum files + scaffolds
+- `.cursor/rules/exxat-no-image-pixel-copy.mdc` — IA from screenshots only

package/template-vite/.cursor/skills/exxat-token-economy/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: exxat-token-economy
+description: >-
+  Cut AI token usage by ~50% on Exxat DS work — task → minimum-file-set table,
+  five-question pre-flight that catches the top rule violations before
+  generation, canonical primitive aliases (no grep needed), tiny scaffolds
+  for hub client / column def / KPI item, and a deny-list of files the
+  assistant should NOT open. Read this BEFORE opening any other DS doc.
+user-invocable: true
+---
+
+# Exxat DS — token economy (read this first)
+
+**Why this exists.** Every other DS skill / rule / pattern doc is a deep dive on
+one concern. When the user just wants to build a screen, the assistant tends to:
+
+1. Re-read `AGENTS.md` (~80 KB) on every turn.
+2. `grep` to "find the Button" when the import path is already known.
+3. Regenerate hub scaffolding it could copy from a reference page.
+4. Read 6 rule files speculatively when only 2 apply.
+5. Re-explain "we use HubTable because…" in 200 tokens.
+
+This skill is the **pre-flight** for any DS work. Read it first; load other docs
+only when this skill explicitly points to one. **Target: ≥ 50% fewer input
+tokens per design turn vs. the naive "open AGENTS.md and grep" loop.**
+
+## When to use this skill
+
+- **First** turn of any new DS feature, hub, or design change.
+- Any time the assistant is about to open `AGENTS.md` or a `*-pattern.md` doc — read this skill instead and follow §1's file-set table.
+- Whenever the user complains about cost, latency, or "you keep re-reading the same files".
+
+---
+
+## §1 — Task → minimum file set
+
+Open **only** these files. Skip everything else unless one of these files cites it.
+
+| Task | Read (minimum) | Skip (do not open) |
+|------|----------------|--------------------|
+| **Build a new hub page** (table + KPIs + view tabs) | `apps/web/components/library-table.tsx` + `library-client.tsx`, `exxat-hub-supported-views.mdc` (or `hub-supported-views-pattern.md`) | `AGENTS.md`, `hub-table.tsx` source, all `*-pattern.md` |
+| **Add a column / cell pattern** | `apps/web/components/columns-showcase.tsx` (the live catalog) | `data-table/index.tsx`, the whole `types.ts` |
+| **Add a board / kanban view** | `apps/web/components/placements-board-card.tsx`, `exxat-board-cards.mdc` only | All other rules |
+| **Add a KPI strip** | `docs/exxat-ds/handbook/reference-implementations.md` § KPI flat band, `exxat-kpi-max-four.mdc`, `exxat-kpi-trends.mdc` | `key-metrics.tsx` source |
+| **Write empty-state / error / button copy** | `docs/exxat-ds/handbook/voice-and-tone.md` | All rules |
+| **Theme / token tweak** | `apps/web/app/globals.css`, `packages/ui/tokens/hooks-index.json` | All pattern docs |
+| **Status chip color/icon** | `apps/web/lib/list-status-badges.ts` | Accessibility rule (already covered by the map) |
+| **Bug fix** | `rg` for the symbol, read only the matching file | Everything else |
+| **Architectural change** (only when the user explicitly says so) | `AGENTS.md`, `HANDBOOK.md` | — |
+
+**Heuristic.** If a file is over 25 KB and you're not modifying that exact file,
+don't read it. Use this skill body + the reference page in `columns-showcase.tsx`
+instead.
+
+---
+
+## §2 — Five-question pre-flight (before you generate code)
+
+Answer **yes / no / N/A** to each. A **no** means re-plan; you'll save a regeneration cycle.
+
+1. **`HubTable`, not raw `<table>`?** — every hub-style grid in `ListPageTemplate.renderContent` uses `HubTable<TRow>` from `@/components/data-views`. Filters + Properties drawer + view-type tiles + bulk actions come free.
+2. **`view` + `onViewChange` plumbed?** — if the page has view tabs, pass both through `client → table → drawer toolbar → TablePropertiesDrawer`. Otherwise the drawer ships table-only copy on a Board tab.
+3. **Color + icon on every status chip?** — `ListHubStatusBadge` + a tint from `lib/list-status-badges.ts` + an FA icon. Color alone fails WCAG 1.4.1.
+4. **≤ 4 KPIs on the primary strip?** — `KEY_METRICS_KPI_COUNT_MAX = 4`. A fifth becomes a `MetricInsight` or a chart.
+5. **No toasts for product feedback?** — use `LocalBanner` / `SystemBanner` / inline status. Toasts are reserved for build-tool messages.
+6. **Seven views + real bodies?** — `FULL_HUB_SUPPORTED_VIEWS` on **`ListPageTemplate`** + **`HubTable`** (sync both); every allowed view has a renderer; list uses **`ListPageBoardCard`** — not `["table"]` / `PRIMARY_HUB_SUPPORTED_VIEWS` / empty `renderers={}`.
+7. **Sheet only (no Vaul)?** — side panels use **`Sheet`**; **`vaul`** must not be in `package.json`.
+8. **Header + tabs + table preview?** — **`PageHeader`** + DS **`Button`** variants for actions; hub views via **`ListPageTemplate`** (not full-width tabs); record tabs **`TabsList`** `w-fit`; row preview via **`HoverCard`** + shared cells — not custom popovers.
+9. **Uploaded image ≠ spec?** — If the user attached a screenshot/mockup: extract **IA only** (labels, routes, fields); map to **`component-selection-guide`** + a **reference hub**; **MUST NOT** pixel-copy colors, sidebar chrome, tabs, or bespoke widgets — **`exxat-no-image-pixel-copy.mdc`**.
+
+If all nine are **yes**, generate. If any is **no**, either narrow the requirements
+with **one** clarifying question or fix the gap silently and note it in your response.
+
+---
+
+## §3 — Canonical primitive aliases (no grep needed)
+
+When the user says "X", reach for "Y". Save the search.
+
+### Page chrome & overlays
+
+| User says | Use | Path |
+|----------|-----|------|
+| button, action, CTA | `Button` | `@/components/ui/button` |
+| input, text field, form field | `Input`, `FormField` | `@/components/ui/{input,form}` |
+| avatar | `AvatarInitials` | `@/components/ui/avatar` |
+| chip, badge, status, tag | `Badge`, `ListHubStatusBadge`, `StatusBadge` | `@/components/{ui/badge,list-hub-status-badge}` |
+| dropdown, menu, ⋯ | `DropdownMenu` family | `@/components/ui/dropdown-menu` |
+| tooltip, hint | `Tip` (or `Tooltip`) | `@/components/ui/tip` |
+| sheet, side panel | `Sheet` family, `ExportDrawer`, `TablePropertiesDrawer` | `@/components/ui/sheet` |
+| dialog, modal, confirm | `Dialog` family | `@/components/ui/dialog` |
+| table, list, grid (product data) | `HubTable` inside `ListPageTemplate` | `@/components/data-views` |
+| KPI, metric, stat | `KeyMetrics` + `MetricItem` | `@/components/key-metrics` |
+| board, kanban | `ListPageBoardCard`, `ListPageBoardTemplate` | `@/components/data-views/list-page-board-card` |
+| icon | FA `<i class="fa-light fa-{name}" aria-hidden />` | (Kit script in `app/layout.tsx`) |
+| keyboard shortcut hint | `Kbd variant="bare"` inside buttons; `tile` in tooltips | `@/components/ui/kbd` |
+| toggle, switch | `ToggleSwitch` | `@/components/ui/toggle-switch` |
+
+### Table cell renderers (ALL importable — do NOT re-implement)
+
+Every cell renderer below is exported from **`@/components/data-views`** (re-exported from `apps/web/components/data-views/table-cells.tsx`). Live catalog: `apps/web/components/columns-showcase.tsx` at route `/columns`.
+
+| User says | Use | Notes |
+|----------|-----|-------|
+| progress bar, % complete, weeks done | `ProgressCell` | `value`, `max?`, `tone?: "auto" \| "success" \| "warning" \| "danger" \| "info"`, `label?` |
+| currency, money, price, cost | `CurrencyCell` | `value`, `currency?` (default USD), `locale?`, right-aligned `tabular-nums` |
+| numeric count, attempts, downloads | `NumericCell` | `value`, `fractionDigits?`, right-aligned |
+| rating, stars, score | `RatingCell` | `value`, `max?` (5), `showValue?` — color **and** glyph (WCAG 1.4.1) |
+| signal bars, low/med/high, difficulty | `SignalBarsCell` | `level`, `max?` (3), `tone?`, `label` (required, accessible) |
+| toggle, published/draft, enabled/disabled | `BooleanToggleCell` | `checked`, `onChange(next)`, `labelOn?`, `labelOff?`; stops row click propagation |
+| attachments, files count, paperclip | `AttachmentCountCell` | `count` — muted dash on `0` |
+| external link, source, view in new tab | `ExternalLinkCell` | `url`, `label?` — host extracted; `Tip` shows full URL |
+| relative time, "3 hours ago", recency | `RelativeTimeCell` | `iso`, `now?` (override for deterministic snapshots) |
+| face rail, reviewers, assignees +N | `PeopleAvatarRailCell` | `people: PersonStub[]`, `visibleMax?` (3), `size?: "sm" \| "md"`; **non-overlapping** avatars |
+| type pill, category, kind with icon | `PillCell` | `label`, `icon?: "fa-..."` — outlined, single-line |
+| tag list +N, keywords, labels | `TagListCell` | `tags: string[]`, `visibleMax?` (2), `formatLabel?` (default `#${tag}`) |
+| row actions, ⋯, overflow menu | `RowActionsCell<TRow>` | `row`, `actions: RowActionDef<TRow>[]` (`label`, `icon`, `onSelect`, `variant?`, `shortcut?`, `disabled?`) |
+
+### Out of band — only when none of the above fits
+
+If the user asks for **anything outside this list**: first scan `columns-showcase.tsx`
++ the `reference-implementations.md` index — both name every existing primitive.
+Only propose a new shared component if neither covers it AND the user has approved
+bespoke work (`exxat-reuse-before-custom.mdc`).
+
+**Hard rule.** Do NOT inline-implement a progress bar, currency formatter, rating,
+relative-time, attachment chip, external link, face rail, type pill, tag list, or
+row-actions menu inside a `ColumnDef['cell']`. Import the named cell. If you find
+yourself writing `Intl.NumberFormat`, `<a target="_blank">`, or a `[1,2,3,4,5].map(…)` star
+loop inside a `cell:`, stop — you're re-deriving a shipped primitive.
+
+---
+
+## §4 — Tiny scaffolds (copy verbatim, don't re-derive)
+
+The boilerplate shapes you'd otherwise regenerate.
+
+### Hub client (replace `Entity`, KPIs, columns)
+
+```tsx
+"use client"
+import * as React from "react"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { PageHeader } from "@/components/page-header"
+import { KeyMetrics, type MetricItem } from "@/components/key-metrics"
+import { ListPageTemplate, type ViewTab, HubTable } from "@/components/data-views"
+
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+
+const ENTITY_TABS: ViewTab[] = [{ id: "all", label: "All", viewType: "table", icon: "fa-table", filterId: "all" }]
+/** Seven views (Library parity) unless product documents a narrower list in lib/entity-supported-views.ts */
+const ENTITY_SUPPORTED_VIEWS = FULL_HUB_SUPPORTED_VIEWS
+
+export function EntityClient({ rows }) {
+  const [tabs, setTabs] = React.useState<ViewTab[]>(ENTITY_TABS)
+  const [activeTabId, setActiveTabId] = React.useState(ENTITY_TABS[0].id)
+  return (
+    <PrimaryPageTemplate siteHeader={{ title: "Entity" }}>
+      <ListPageTemplate
+        defaultTabs={ENTITY_TABS} tabs={tabs} onTabsChange={setTabs}
+        activeTabId={activeTabId} onActiveTabChange={setActiveTabId}
+        supportedViewTypes={ENTITY_SUPPORTED_VIEWS}
+        getTabCount={() => rows.length}
+        header={<PageHeader title="Entity" subtitle="…" />}
+        metrics={<KeyMetrics variant="flat" metrics={ENTITY_KPIS} showHeader={false} metricsSingleRow />}
+        renderContent={(tab, updateTab) => (
+          <HubTable rows={rows} columns={useColumns()}
+            view={tab.viewType} onViewChange={v => updateTab({ viewType: v })}
+            supportedViewTypes={ENTITY_SUPPORTED_VIEWS}
+            hubLabel="Entity" lifecycleTabLabel="Entity"
+            getRowId={r => r.id} getRowSelectionLabel={r => r.name}
+            defaultSort={{ key: "name", dir: "asc" }}
+            renderListRow={row => /* ListPageBoardCard layout="row" — copy library-table.tsx */}
+            renderers={{
+              /* board-with-toolbar, dashboard-with-toolbar, folder/panel/tree — see library-table.tsx or tokens-hub-auxiliary-views.tsx */
+            }}
+          />
+        )}
+      />
+    </PrimaryPageTemplate>
+  )
+}
+```
+
+### `MetricItem` shape (KPI strip cell)
+
+```ts
+{ id: "active", label: "Active", value: 142, delta: "+8 vs last week",
+  trend: "up", trendPolarity: "higher_is_better",
+  metricVariant: "hero", description: "currently in placement" }
+```
+
+- `trend: "neutral"` + empty `delta` → no trend chip renders. Don't fake a `+0`.
+- `trendPolarity: "lower_is_better"` for error counts, defects, overdue.
+- `metricVariant: "hero"` for **one** cell per strip — the headline number.
+- Max **4 cells**.
+
+### `ColumnDef<TRow>` shape
+
+```ts
+{ key: "name", label: "Name", width: 240, minWidth: 180,
+  defaultPin: "left", sortable: true, sortKey: "name",
+  filter: { type: "text", icon: "fa-user", operators: ["contains"] },
+  cell: row => <span className="truncate">{row.name}</span> }
+```
+
+- `key: "select"` + `defaultPin: "left"` + `lockPin: true` → checkbox column.
+- `key: "actions"` + `defaultPin: "right"` + `lockPin: true` → ⋯ overflow column.
+- `filter: { type: "select", options }` for categorical columns.
+
+### Default `cell:` should call a named primitive
+
+The right `cell:` body for the common patterns is **one import + one component**, not an inline JSX block:
+
+```ts
+import { ProgressCell, CurrencyCell, RatingCell, BooleanToggleCell,
+         RelativeTimeCell, AttachmentCountCell, ExternalLinkCell,
+         PeopleAvatarRailCell, PillCell, TagListCell, NumericCell,
+         RowActionsCell, type RowActionDef } from "@/components/data-views"
+
+// Examples — cell:'s body is one call.
+cell: row => <ProgressCell value={row.completion} />
+cell: row => <CurrencyCell value={row.cost} />
+cell: row => <RatingCell value={row.rating} />
+cell: row => <BooleanToggleCell checked={row.published} onChange={next => onTogglePublished(row, next)} />
+cell: row => <RelativeTimeCell iso={row.lastActivityAt} />
+cell: row => <AttachmentCountCell count={row.attachmentCount} />
+cell: row => <ExternalLinkCell url={row.sourceUrl} />
+cell: row => <PeopleAvatarRailCell people={row.reviewers} />
+cell: row => <PillCell label={TYPE_LABEL[row.type]} icon={TYPE_ICON[row.type]} />
+cell: row => <TagListCell tags={row.tags} />
+cell: row => <NumericCell value={row.attempts} />
+cell: row => <RowActionsCell row={row} actions={ROW_ACTIONS} />
+```
+
+If `cell:` exceeds **one line** for any pattern above, you're re-deriving — go back and import.
+
+---
+
+## §5 — Deny list (do NOT open unless asked)
+
+Treat these as expensive — skip unless the user explicitly names them or this skill points to them:
+
+- `AGENTS.md` — only when the task is "change the architecture or the rules themselves".
+- `packages/ui/src/components/data-views/hub-table.tsx` — the API is documented; don't read the implementation.
+- `apps/web/.next/`, `.turbo/`, `node_modules/` — never.
+- All 29 `.cursor/rules/exxat-*.mdc` at once — §1 already points to the 1-2 that apply.
+- Test files (`*.test.*`, `__tests__/`) — irrelevant for design.
+- Build configs (`tsup.config.ts`, `next.config.ts`, `turbo.json`) — irrelevant for design.
+- `packages/ui/tokens/hooks-index.json` (~163 KB) — only when the task is a token rename / audit.
+
+---
+
+## §6 — When to ask vs. when to assume
+
+One clarifying question costs ~50 tokens. A wrong implementation costs hundreds (read, generate, user feedback, regenerate). Ask when:
+
+1. The task name is ambiguous between two patterns (e.g. "add a panel" → drawer or split panel?).
+2. Two existing reference hubs handle the same concern differently (use the user's existing precedent if they have one).
+3. The user mentions a screen that doesn't have a clear primitive in §3.
+
+Don't ask when:
+
+- The user has cited a specific file or component — go.
+- The pre-flight (§2) all answers yes — go.
+- The task fits exactly one row in §1's task map — go.
+
+---
+
+## §7 — Output discipline (your turn budget)
+
+Your **response** also costs tokens. Keep it lean:
+
+- **No "let me explain the design system" preambles.** The user has the package installed; they know.
+- **No reading-aloud of file paths.** Cite with `code` ticks; don't re-narrate.
+- **No restating the prompt.** Jump straight to the action.
+- **Group tool calls in parallel** when independent (reading 3 files = 1 message, not 3).
+- **Stop generating** as soon as the pre-flight (§2) says you have what you need. Don't gold-plate.
+
+---
+
+## See also
+
+- **Handbook** — `docs/exxat-ds/handbook/HANDBOOK.md` (5 principles + how-to-build-a-hub)
+- **Reference implementations** — `docs/exxat-ds/handbook/reference-implementations.md` (find the file to copy)
+- **Voice & tone** — `docs/exxat-ds/handbook/voice-and-tone.md` (user-facing copy)
+- **Cell patterns catalog** — `apps/web/components/columns-showcase.tsx` (live at `/columns`)