@ryuenn3123/agentic-senior-core 6.16.3 → 6.16.6

package/.agents/plugins/agentic-senior-core/skills/asc-ui/references/craft/composition-patterns.md

@@ -0,0 +1,299 @@
+# Concrete UI Composition Patterns
+
+> **Core Invariant:** Do not rely on abstract prohibition lists. Modern models build high-craft interfaces by pattern-matching against authentic, human-designed DOM compositions and visual assets. Use the real-world reverse-engineered benchmarks below and structural archetypes instead of enclosing every section in a `1px` border wireframe box.
+
+---
+
+## 0. Real-World Live Benchmarks (Extracted via REA)
+
+The `references/visuals/` directory contains authentic, human-designed production websites reverse-engineered from the live web using REA (`capture_browser_scenario`). Each entry includes a **viewport screenshot (PNG)** for visual-spatial calibration and the **rendered DOM structure (JSON)** for class tokens and layout hierarchies:
+
+| Target Domain | Visual Reference (Screenshot) | Rendered DOM Structure | Key Design Traits to Adopt |
+| :--- | :--- | :--- | :--- |
+| **Developer Infra / Dark Editorial** | `references/visuals/real-resend.png` | `references/visuals/real-resend-dom.json` | High-contrast serif/sans display typography, delicate lighting gradient rays, minimal pill announcement, solid primary + ghost secondary actions. |
+| **Analytics & Data Dashboards** | `references/visuals/real-dub.png` | `references/visuals/real-dub-dom.json` | Subtle light grid canvas, embedded live dashboard stage, large bold KPI numbers (`$210,429.00`), spline chart rhythm, tabbed filter pills. |
+| **CRM & Relational Operations** | `references/visuals/real-attio.png` | `references/visuals/real-attio-dom.json` | Windowed desktop console frame, quick actions search bar with `⌘K`, multi-filter table density, minimal prompt input. |
+| **Authentication & Forms** | `references/visuals/real-clerk.png` | `references/visuals/real-clerk-dom.json` | Bounded form cards (`max-w-md`), multi-tenancy switcher tabs, OAuth SSO buttons, clean single-line inputs with generous tap targets. |
+| **Documentation & API Reference** | `references/visuals/real-mintlify.png` | `references/visuals/real-mintlify-dom.json` | Dual-rail navigation tree, section guide cards, language switcher pills, floating assistant action button. |
+| **Booking & Scheduling Flow** | `references/visuals/real-cal.png` | `references/visuals/real-cal-dom.json` | Playful bold typography with inline status badges, dual Microsoft/Google SSO buttons, embedded booking calendar mockup. |
+| **Storefront & App Catalog** | `references/visuals/real-marketplace.png` | `references/visuals/real-marketplace-dom.json` | Sidebar category filters, search toolbar, discrete integration cards with verified badges and tags, tabbed recommendation lists. |
+| **Collaborative Canvas & Studio** | `references/visuals/real-tldraw.png` | `references/visuals/real-tldraw-dom.json` | Receding full-bleed canvas chrome, floating bottom utility dock, minimal top-right palette/stroke controller, clean viewport zoom indicator. |
+| **Command Centers & Launchers** | `references/visuals/real-raycast.png` | `references/visuals/real-raycast-dom.json` | Obsidian dark background, directional accent glow, pill search/action bar, clean monospace system notes. |
+| **Cloud Databases & Platforms** | `references/visuals/real-supabase.png` | `references/visuals/real-supabase-dom.json` | Asymmetric 2-column hero split, signature accent color (emerald), capability feature grid with checkmarks and code pills. |
+| **Product Craft & Philosophy** | `references/visuals/real-linear.png` | `references/visuals/real-linear-dom.json` | Disciplined whitespace, editorial typography contrast, subtle geometric hairline accents, no unearned visual clutter. |
+| **High-Impact Brand Stage** | `references/visuals/real-vercel.png` | `references/visuals/real-vercel-dom.json` | Central geometric focal point, 3-line manifesto typography, high-contrast monochrome customer logo proof. |
+| **Enterprise Infrastructure** | `references/visuals/real-stripe.png` | `references/visuals/real-stripe-dom.json` | Fluid signature mesh gradients, prominent primary CTA with arrow, dual-action row with Google SSO. |
+
+When constructing or redesigning a surface, inspect the matching `references/visuals/real-*.png` via `read_file` to ground visual proportions (padding, font scaling, surface elevation) on real human craft.
+
+---
+
+## Pattern 1: Public Institutional / Product Hero (Bold Ground + Focused Action)
+
+*Use for: Public landing pages, civic platforms, institutional gateways, product launch.*
+*Key Traits: High-contrast typography scale, 1 primary action panel, no generic pill kickers, authentic brand presence.*
+
+```html
+<section class="relative overflow-hidden bg-zinc-900 text-zinc-100 py-20 lg:py-28">
+  <div class="max-w-6xl mx-auto px-6">
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
+      
+      <!-- Left: Assertive Narrative (7 cols) -->
+      <div class="lg:col-span-7 space-y-6">
+        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.08]">
+          Reliable Verification for Regional Operations.
+        </h1>
+        <p class="text-lg text-zinc-300 max-w-xl leading-relaxed">
+          Standardized assessment workflow, objective criteria tracking, and multi-district reporting on a unified surface.
+        </p>
+
+        <!-- Factual Key Indicators (Plain typographic numbers, not floating cards) -->
+        <div class="pt-6 border-t border-zinc-800 flex flex-wrap gap-8 text-sm">
+          <div>
+            <span class="block text-2xl font-bold font-mono text-white tabular-nums">12</span>
+            <span class="text-zinc-400">Core Categories</span>
+          </div>
+          <div>
+            <span class="block text-2xl font-bold font-mono text-white tabular-nums">148</span>
+            <span class="text-zinc-400">Verified Checkpoints</span>
+          </div>
+          <div>
+            <span class="block text-2xl font-bold font-mono text-white tabular-nums">99.8%</span>
+            <span class="text-zinc-400">On-Time Submissions</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right: Single Functional Action Surface (5 cols) -->
+      <div class="lg:col-span-5">
+        <div class="bg-white text-zinc-900 rounded-xl p-7 shadow-xl space-y-5">
+          <div class="border-b border-zinc-200 pb-4">
+            <h2 class="text-lg font-bold text-zinc-900">District Access</h2>
+            <p class="text-xs text-zinc-500 mt-1">Select an active region to inspect accreditation status</p>
+          </div>
+
+          <div class="space-y-3.5">
+            <div>
+              <label class="block text-xs font-semibold text-zinc-700 mb-1.5">Region</label>
+              <select class="w-full text-sm rounded-lg border border-zinc-300 bg-zinc-50 px-3 py-2 text-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-900">
+                <option>Region North (Sector A)</option>
+                <option>Region Central (Sector B)</option>
+                <option>Region South (Sector C)</option>
+              </select>
+            </div>
+            <div>
+              <label class="block text-xs font-semibold text-zinc-700 mb-1.5">Organization Unit</label>
+              <input type="text" placeholder="Search department or unit..." class="w-full text-sm rounded-lg border border-zinc-300 px-3 py-2 text-zinc-800 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900" />
+            </div>
+            <button class="w-full bg-zinc-900 hover:bg-zinc-800 text-white font-medium text-sm rounded-lg py-2.5 transition-colors">
+              Continue to Portal
+            </button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+```
+
+---
+
+## Pattern 2: Progressive Category Explorer (Clean Overview + Focused Preview)
+
+*Use for: Large catalogs, complex instrument sets, curricula, feature breakdown.*
+*Key Traits: Prevents raw 100+ row table dumps on public pages while avoiding repetitive bento cards.*
+
+```html
+<section class="py-16 lg:py-24 bg-zinc-50">
+  <div class="max-w-6xl mx-auto px-6">
+    
+    <!-- Section Header (Clear and direct, no uppercase kicker) -->
+    <div class="max-w-2xl mb-12">
+      <h2 class="text-3xl font-bold tracking-tight text-zinc-900">Evaluation Criteria</h2>
+      <p class="text-sm text-zinc-600 mt-2">Select a operational domain to review requirements and compliance records.</p>
+    </div>
+
+    <!-- Category Tabs & Preview Canvas -->
+    <div class="bg-white rounded-xl border border-zinc-200/80 shadow-sm overflow-hidden">
+      <!-- Category Strip -->
+      <div class="grid grid-cols-2 md:grid-cols-4 border-b border-zinc-200 divide-x divide-zinc-200 bg-zinc-100/50 text-center text-xs font-medium">
+        <button class="py-3.5 px-4 bg-white text-zinc-900 font-semibold border-b-2 border-zinc-900">
+          Governance (25%)
+        </button>
+        <button class="py-3.5 px-4 text-zinc-600 hover:text-zinc-900 transition-colors">
+          Financial Controls (25%)
+        </button>
+        <button class="py-3.5 px-4 text-zinc-600 hover:text-zinc-900 transition-colors">
+          Field Operations (30%)
+        </button>
+        <button class="py-3.5 px-4 text-zinc-600 hover:text-zinc-900 transition-colors">
+          Reporting & Audit (20%)
+        </button>
+      </div>
+
+      <!-- Preview Table for Selected Category -->
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-4">
+          <div class="text-sm font-semibold text-zinc-900">Governance Benchmarks (24 Items)</div>
+          <span class="text-xs text-zinc-500 font-mono">Format: Signed PDF / Audit Log</span>
+        </div>
+
+        <table class="w-full text-left text-sm border-collapse">
+          <thead>
+            <tr class="border-b border-zinc-200 text-xs font-semibold text-zinc-500 uppercase">
+              <th class="py-2.5 px-3 w-12 font-mono">No</th>
+              <th class="py-2.5 px-4">Performance Indicator</th>
+              <th class="py-2.5 px-4">Verification Artifact</th>
+              <th class="py-2.5 px-3 w-20 text-right font-mono">Weight</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-100 text-zinc-800">
+            <tr>
+              <td class="py-3 px-3 font-mono text-zinc-500">01</td>
+              <td class="py-3 px-4 font-medium">Annual Board Review Minutes</td>
+              <td class="py-3 px-4 text-zinc-600">Signed meeting resolution and verified attendance roll</td>
+              <td class="py-3 px-3 text-right font-mono tabular-nums">5.0%</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-3 font-mono text-zinc-500">02</td>
+              <td class="py-3 px-4 font-medium">Quarterly Budget Reconciliation</td>
+              <td class="py-3 px-4 text-zinc-600">Reconciled bank statement and expenditure journal</td>
+              <td class="py-3 px-3 text-right font-mono tabular-nums">4.5%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+  </div>
+</section>
+```
+
+---
+
+## Pattern 3: Clean Human Directory (No Infinite Marquee, No 3-Level Card Nest)
+
+*Use for: Advisory boards, committees, team members, reviewers.*
+*Key Traits: Uses subtle natural spacing and typography instead of infinite marquee tickers or nested card boxes.*
+
+```html
+<section class="py-16 lg:py-24 bg-white border-t border-zinc-200">
+  <div class="max-w-6xl mx-auto px-6">
+    
+    <div class="max-w-2xl mb-12">
+      <h2 class="text-3xl font-bold tracking-tight text-zinc-900">Review Committee</h2>
+      <p class="text-sm text-zinc-600 mt-2">Accredited evaluators and audit leads for the current inspection cycle.</p>
+    </div>
+
+    <!-- Direct Grid: Unnested, clean borders or airy spacing -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      
+      <div class="space-y-3">
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-lg bg-zinc-100 border border-zinc-200 flex items-center justify-center font-bold text-zinc-700">
+            ER
+          </div>
+          <div>
+            <h3 class="text-base font-bold text-zinc-900">Elena Rostova, Ph.D.</h3>
+            <p class="text-xs text-zinc-500 font-medium">Lead Governance Auditor</p>
+          </div>
+        </div>
+        <p class="text-xs text-zinc-600 leading-relaxed">
+          Oversees statutory compliance, governance resolutions, and organizational constitution reviews.
+        </p>
+      </div>
+
+      <div class="space-y-3">
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-lg bg-zinc-100 border border-zinc-200 flex items-center justify-center font-bold text-zinc-700">
+            MC
+          </div>
+          <div>
+            <h3 class="text-base font-bold text-zinc-900">Marcus Chen, CPA</h3>
+            <p class="text-xs text-zinc-500 font-medium">Senior Financial Evaluator</p>
+          </div>
+        </div>
+        <p class="text-xs text-zinc-600 leading-relaxed">
+          Verifies accounting balances, grant disbursements, and audit trails across regional chapters.
+        </p>
+      </div>
+
+    </div>
+  </div>
+</section>
+```
+
+---
+
+## Pattern 4: Operational Workspace (High-Density Master-Detail for Authenticated Users)
+
+*Use for: Internal dashboard, audit workstation, evaluator screen.*
+*Key Traits: Sticky column headers, tabular figures, master-detail side rail, zero consumer fluff.*
+
+```html
+<div class="min-h-dvh flex flex-col bg-zinc-100 text-zinc-900">
+  <!-- Top Bar -->
+  <header class="h-14 bg-white border-b border-zinc-200 px-6 flex items-center justify-between">
+    <div class="flex items-center gap-3">
+      <span class="font-bold text-sm">AUDIT DESK</span>
+      <span class="text-zinc-300">/</span>
+      <span class="text-xs text-zinc-600">District 04 (Central Sector)</span>
+    </div>
+    <div class="flex items-center gap-4 text-xs">
+      <span class="text-zinc-500">Evaluator: Field Team 2</span>
+      <button class="bg-zinc-900 text-white px-3 py-1.5 rounded-md font-medium hover:bg-zinc-800">
+        Save Evaluation
+      </button>
+    </div>
+  </header>
+
+  <!-- Split View (Master list left, detail right) -->
+  <div class="flex-1 flex overflow-hidden">
+    <!-- Left Rail: Categories & Status (280px) -->
+    <aside class="w-72 bg-white border-r border-zinc-200 p-4 space-y-2 overflow-y-auto">
+      <div class="text-xs font-semibold text-zinc-500 px-2 uppercase tracking-wide">Audit Categories</div>
+      <button class="w-full text-left px-3 py-2 rounded-lg bg-zinc-100 font-medium text-xs text-zinc-900 flex justify-between items-center">
+        <span>Governance</span>
+        <span class="text-emerald-700 font-mono">18/22</span>
+      </button>
+      <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-zinc-50 text-xs text-zinc-600 flex justify-between items-center">
+        <span>Field Operations</span>
+        <span class="text-amber-700 font-mono">10/25</span>
+      </button>
+    </aside>
+
+    <!-- Main Workspace: Dense Data Table with inline inspector -->
+    <main class="flex-1 p-6 overflow-y-auto">
+      <div class="bg-white rounded-lg border border-zinc-200 shadow-xs overflow-hidden">
+        <table class="w-full text-left text-xs border-collapse">
+          <thead class="bg-zinc-50 border-b border-zinc-200 text-zinc-600 font-semibold sticky top-0">
+            <tr>
+              <th class="py-2.5 px-3 w-10 font-mono">No</th>
+              <th class="py-2.5 px-3">Audit Item</th>
+              <th class="py-2.5 px-3">Submitted Evidence</th>
+              <th class="py-2.5 px-3 w-28">Status</th>
+              <th class="py-2.5 px-3 w-24 text-right">Action</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-100 text-zinc-800">
+            <tr>
+              <td class="py-2.5 px-3 font-mono text-zinc-400">01</td>
+              <td class="py-2.5 px-3 font-medium">Bylaw Resolution Filing</td>
+              <td class="py-2.5 px-3 text-zinc-500">bylaw_resolution_2026.pdf (1.2 MB)</td>
+              <td class="py-2.5 px-3">
+                <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-800 border border-emerald-200">
+                  Verified
+                </span>
+              </td>
+              <td class="py-2.5 px-3 text-right">
+                <button class="text-zinc-900 hover:underline font-medium">Inspect</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+  </div>
+</div>
+```

package/.agents/plugins/agentic-senior-core/skills/asc-ui/references/craft/themes-catalog.md

@@ -0,0 +1,199 @@
+# Curated Design Themes Catalog (16 Production Material Systems)
+
+> **Core Invariant:** Never allow an LLM to invent an ad-hoc color palette or arbitrary font pairing from scratch on new greenfield projects. Unconstrained models converge onto the statistical median: muddy slate-indigo, generic SaaS card soup, or gimmick cosplay. On **Greenfield (new from scratch)** builds, lock visual styling to one of **16 verified, domain-calibrated material themes** across **8 real-world software domains** (2 contrasting directions per domain). If working in an existing codebase (*Brownfield*) with defined tokens in `app.css` or Tailwind config, **DO NOT override project tokens with this catalog**—respect and calibrate the project's authentic brand palette instead.
+
+---
+
+## 1. Domain Matrix (8 Domains × 2 Contrasting Directions)
+
+Select the domain matching the product's real-world purpose, then pick one of its two contrasting material directions so consecutive projects never converge onto a single look:
+
+| Domain | Option A (Cool / Crisp / Structural) | Option B (Warm / Tactile / Editorial) |
+|---|---|---|
+| **1. Civic, Academic & Institutional** | `01. Sovereign Slate` | `02. Almanac Index` |
+| **2. Financial, ERP & Operations** | `03. Editorial Ledger` | `04. Warm Stationery` |
+| **3. Healthcare, Clinical & Care** | `05. Pharmacy Calm` | `06. Clinical Precision` |
+| **4. Commercial B2B SaaS & Platforms** | `07. Ink & Signal` | `08. Obsidian Stage` |
+| **5. Developer Tools, Observability & Security** | `09. Graphite Instrument` | `10. Technical Whiteprint` |
+| **6. Commerce, Hospitality, Craft & Hardware** | `11. Atelier Gallery` | `12. Kinetic Grid` |
+| **7. Editorial, Publishing, EdTech & Knowledge** | `13. Studio Proof` | `14. Botanical Field` |
+| **8. Industrial, Logistics, Construction & Geo** | `15. Formwork Concrete` | `16. Meridian Survey` |
+
+---
+
+## 2. Production Constraints & Accessibility Requirements
+
+Theme choices must satisfy real-world usability and production budgets. The following patterns are excluded:
+1. **Gimmick Surfaces:** Medieval blackletter parchment, CRT phosphor scanlines, two-drum pink/blue risograph with no black ink, torn-paper edges, and die-cut sticker outlines.
+2. **Runtime Shaders:** Mandatory `<canvas>` or WebGL background noise fields, drifting particle hazes, and SVG `feTurbulence` grain overlays sitting over running body text.
+3. **Broken Font & Asset Dependencies:** Unbundled font packages that fail to load on standard web CDNs, and unbundled local texture URLs (`url("cotton.svg")`). Every font in this catalog is verified on Google Fonts with clean system fallbacks.
+4. **Low-Contrast Mid-Tone Grounds:** Raw `70%` grey or `35%` saturated blue full-app drenches that fail WCAG 2.2 AA `4.5:1` contrast on secondary metadata.
+
+---
+
+## 3. Domain 1 — Civic, Academic & Institutional
+
+### `01. Sovereign Slate`
+*Best for: Institutional evaluations, accreditation dossiers, compliance portals, municipal registries.*
+- **Surface Tokens:** Canvas `#f8fafc` (`oklch(98.4% 0.003 248)`) · Sheet `#ffffff` · Rail `#f1f5f9` · Rule `1px solid #e2e8f0`
+- **Ink Tokens:** Primary `#0f172a` · Secondary `#334155` · Muted `#64748b`
+- **Accent & Semantic:** Deep Pine `#0f766e` (`oklch(51% 0.096 186)`), Soft `#f0fdfa` · Status: Emerald `#047857`, Amber `#b45309`, Rose `#be123c`
+- **Typography:** Display & UI `Plus Jakarta Sans` (600/700 heads, 400/500 body) · Numeric `JetBrains Mono` (`tabular-nums`)
+- **Geometry & Posture:** Unified Spatial Canvas (`0px` sheet divisions, `6px` control radius). Left verification rail + right primary data table. Zero floating card islands.
+
+### `02. Almanac Index`
+*Best for: University catalogs, public archives, policy repositories, judicial & regulatory filings.*
+- **Surface Tokens:** Canvas `#f7f4ed` (`oklch(96.6% 0.012 85)`) · Sheet `#fcfbf8` · Subtle `#efeae0` · Rule `1px solid #ded8cb` (Section head rule: `2px solid #1f1d1a`)
+- **Ink Tokens:** Primary `#1f1d1a` · Secondary `#3d3934` · Muted `#666057`
+- **Accent & Semantic:** Terracotta Seal `#b4532a` (`oklch(53% 0.14 38)`), Soft `#fdf2ed`
+- **Typography:** Display `Newsreader` (500/600, `-0.02em`) · Body & UI `Source Sans 3` (400/600) · Index/Filing IDs `IBM Plex Mono`
+- **Geometry & Posture:** Archival index sheet (`4px` control radius, zero drop shadows at rest). Heavy `2px` ink top-bars anchor tables and statutory sections; hairline rules separate rows.
+
+---
+
+## 4. Domain 2 — Financial, ERP & Operations
+
+### `03. Editorial Ledger`
+*Best for: Accounting systems, treasury consoles, ERP inventory, institutional billing, audit ledgers.*
+- **Surface Tokens:** Canvas `#ffffff` · Sub-surface / Striping `#f9fafb` (`oklch(98.5% 0.002 247)`) · Rule `1px solid #e5e7eb`
+- **Ink Tokens:** Primary `#111827` · Secondary `#374151` · Muted `#6b7280`
+- **Accent & Semantic:** Sovereign Navy `#1e3a8a` (`oklch(38% 0.14 262)`), Soft `#eff6ff` · Variance: Positive `#047857`, Negative `#b91c1c`
+- **Typography:** Display & UI `Inter` (600 heads, 400/500 body) · Figures `IBM Plex Mono` (`tabular-nums`, right-aligned quantitative columns)
+- **Geometry & Posture:** Edge-to-edge sticky-header tables (`10px–12px` vertical cell padding, `6px` control radius) with 65/35 master-detail inspector Drawer/Rail.
+
+### `04. Warm Stationery`
+*Best for: Private banking, advisory portfolios, payroll & compensation portals, procurement workflows.*
+- **Surface Tokens:** Canvas `#faf7f2` (`oklch(97.5% 0.009 80)`) · Sheet `#ffffff` · Subtle `#f2ede4` · Rule `1px solid #e4ddd1`
+- **Ink Tokens:** Primary `#231f1c` · Secondary `#443e38` · Muted `#6e655d`
+- **Accent & Semantic:** Deep Forest `#166534` (`oklch(44% 0.11 152)`), Soft `#f0fdf4`
+- **Typography:** Display & Totals `Instrument Serif` (400, `-0.015em`) · UI & Tables `DM Sans` (400/500/600) · Figures `DM Mono` (`tabular-nums`)
+- **Geometry & Posture:** Calm ledger sheet (`8px` radius on inputs/wells, `1px` warm hairline borders, zero shadow on resting panels).
+
+---
+
+## 5. Domain 3 — Healthcare, Clinical & Care
+
+### `05. Pharmacy Calm`
+*Best for: Patient portals, telehealth scheduling, pharmacy fulfillment, mental health & wellness care.*
+- **Surface Tokens:** Canvas `#f6f7f4` (`oklch(97.2% 0.008 135)`) · Sheet `#ffffff` · Subtle `#ebeee7` · Rule `1px solid #dce1d6`
+- **Ink Tokens:** Primary `#18221e` · Secondary `#33423c` · Muted `#596b63`
+- **Accent & Semantic:** Apothecary Eucalyptus `#0d6e5b` (`oklch(48% 0.095 172)`), Soft `#ecfdf5`
+- **Typography:** Display `Outfit` (600, `-0.02em`) · Clinical Body `Public Sans` (400/500, `1.55` line-height) · Dosages & Times `JetBrains Mono`
+- **Geometry & Posture:** Generous breathing room (`10px` control/surface radius, `1px` crisp borders, clear progressive step flows, high-legibility medication and appointment timelines).
+
+### `06. Clinical Precision`
+*Best for: Electronic Health Records (EHR), lab diagnostics, radiology worklists, ICU/ward triage.*
+- **Surface Tokens:** Canvas `#f8fafc` · Worklist `#ffffff` · Header/Rail `#f1f5f9` · Rule `1px solid #cbd5e1`
+- **Ink Tokens:** Primary `#0b1324` · Secondary `#283548` · Muted `#526277`
+- **Accent & Semantic:** Diagnostic Cerulean `#0369a1` (`oklch(50% 0.12 238)`), Soft `#f0f9ff` · Out-of-range flag: `#b91c1c` (always paired with explicit `H`/`L` symbol, never color alone)
+- **Typography:** UI `IBM Plex Sans` (400/500/600) · Vitals, Reference Ranges & Timestamps `IBM Plex Mono` (`tabular-nums`)
+- **Geometry & Posture:** High-density patient banner pinned top, `4px` tight radius, zero decorative imagery, instant keyboard/row triage.
+
+---
+
+## 6. Domain 4 — Commercial B2B SaaS & Platforms
+
+### `07. Ink & Signal`
+*Best for: Collaborative workspaces, CRM, project trackers, service desks, multi-tenant B2B apps.*
+- **Surface Tokens:** Canvas `#fcfcfc` (`oklch(99.2% 0.002 100)`) · Well `#f5f5f4` · Subtle `#ebebea` · Rule `1px solid #e4e4e2`
+- **Ink Tokens:** Primary `#171717` (`oklch(16% 0 0)`) · Secondary `#383838` · Muted `#666666`
+- **Accent & Semantic:** Chromatic Teal `#0d7477` (`oklch(50% 0.095 190)`), Soft `#e6f6f6`
+- **Typography:** Display `Epilogue` (700, `-0.035em`) · Body & Controls `Inter` (400/500/600) · IDs & Counts `IBM Plex Mono`
+- **Geometry & Posture:** Hueless carbon ink on clean paper; teal marks only active/open state and primary CTA (`8px` control radius, `12px` wells, shadow reserved strictly for floating popovers/dialogs).
+
+### `08. Obsidian Stage`
+*Best for: Media production suites, AI creative workflows, high-contrast SaaS launches, real-time analytics.*
+- **Surface Tokens:** Canvas `#09090b` (`oklch(14% 0.005 270)`) · Elevated `#121216` · Subtle `#1c1c22` · Rule `1px solid #27272a`
+- **Ink Tokens:** Primary `#fafafa` · Secondary `#d4d4d8` · Muted `#a1a1aa`
+- **Accent & Semantic:** Cobalt Signal `#3b82f6` (`oklch(62% 0.19 258)`), Soft `rgba(59, 130, 246, 0.14)`
+- **Typography:** Display `Space Grotesk` (600/700, `-0.03em`) · Body `Plus Jakarta Sans` (400/500) · Telemetry `JetBrains Mono`
+- **Geometry & Posture:** Precision dark surface separated strictly by `1px solid #27272a` keylines and luminance steps (`8px` radius). Zero purple/indigo neon blooms or glowing card borders.
+
+---
+
+## 7. Domain 5 — Developer Tools, Observability & Security
+
+### `09. Graphite Instrument`
+*Best for: Log explorers, APM tracing, DAST/pentest consoles, database studios, CI/CD pipelines.*
+- **Surface Tokens:** Canvas `#0d1117` (`oklch(17.5% 0.012 255)`) · Pane `#161b22` · Subtle `#21262d` · Rule `1px solid #30363d`
+- **Ink Tokens:** Primary `#e6edf3` · Secondary `#b1bac4` · Muted `#8b949e`
+- **Accent & Semantic:** Amber Telemetry `#f59e0b` (`oklch(75% 0.16 75)` — dark ink `#0d1117` on filled buttons), Soft `rgba(245, 158, 11, 0.14)` · Severity: Critical `#f85149`, High `#db6d28`, Low `#3fb950`
+- **Typography:** UI `IBM Plex Sans` (400/500/600) · Logs, Payloads, Traces & Queries `JetBrains Mono` (`tabular-nums`)
+- **Geometry & Posture:** Keyboard-first multi-pane workbench (`4px` radius, `Cmd+K` bar, split log/trace inspector, zero marketing ornament).
+
+### `10. Technical Whiteprint`
+*Best for: API documentation, architecture registries, CAD/spec viewers, schema & hardware documentation.*
+- **Surface Tokens:** Canvas `#f4f7fb` (`oklch(97.2% 0.008 245)`) · Sheet `#ffffff` · Subtle `#e8eef6` · Rule `1px solid #cbd5e1` (Major register rule: `2px solid #13294b`)
+- **Ink Tokens:** Primary `#13294b` (Prussian Ink) · Secondary `#2c4469` · Muted `#566d8e`
+- **Accent & Semantic:** Drafting Cobalt `#1d4ed8` (`oklch(49% 0.19 260)`), Soft `#dbeafe`
+- **Typography:** Display `Chakra Petch` (600, `-0.015em`) · Prose & UI `IBM Plex Sans` (400/500) · Specs, Endpoints & Units `IBM Plex Mono`
+- **Geometry & Posture:** Square `0px` drafted keylines, specification register tables, dual-rail documentation layout with crisp code/parameter blocks.
+
+---
+
+## 8. Domain 6 — Commerce, Hospitality, Craft & Hardware
+
+### `11. Atelier Gallery`
+*Best for: Architecture studios, boutique hospitality, furniture/ceramics commerce, specialty roasters, galleries.*
+- **Surface Tokens:** Canvas `#f4f0e8` (`oklch(95.5% 0.012 78)`) · Card Stock `#faf8f4` · Subtle `#eae4d8` · Rule `1px solid #dcd4c5`
+- **Ink Tokens:** Primary `#241d18` (Deep Umber) · Secondary `#463b33` · Muted `#6e6055`
+- **Accent & Semantic:** Slate Ultramarine `#334e68` (`oklch(41% 0.075 248)`), Soft `#eaeff5`
+- **Typography:** Display `Cormorant Garamond` (500/600, `-0.018em`, line-height `1.06`) · Body, Wall Labels & Checkout `Hanken Grotesk` (400/500/600) · Prices/Editions `Hanken Grotesk` (`tabular-nums`)
+- **Geometry & Posture:** Crisp `2px` gallery corners, generous daylight imagery with captions placed cleanly beneath (never overlaid on cluttered gradients), quiet ruled specification tables.
+
+### `12. Kinetic Grid`
+*Best for: Athletic gear, consumer electronics, ticketing & live events, fitness/training platforms, automotive.*
+- **Surface Tokens:** Canvas `#f7f7f5` · Plate `#ffffff` · Subtle `#ededeb` · Rule `1px solid #d6d6d2` (Section header bar: `2px solid #111111`)
+- **Ink Tokens:** Primary `#111111` · Secondary `#333333` · Muted `#636360`
+- **Accent & Semantic:** Vermilion Signal `#dc2626` (`oklch(56% 0.21 27)`), Soft `#fef2f2`
+- **Typography:** Display & Scoreboards `Barlow Condensed` (700 uppercase, `-0.01em`) · Body & Controls `Archivo` (400/500/600) · Splits, SKUs & Specs `JetBrains Mono`
+- **Geometry & Posture:** High-contrast Swiss structural grid (`4px` radius), bold typographic hierarchy, crisp inventory/size matrices, zero soft pastel washes.
+
+---
+
+## 9. Domain 7 — Editorial, Publishing, EdTech & Knowledge
+
+### `13. Studio Proof`
+*Best for: Digital publications, research journals, documentation hubs, writing studios, legal analysis.*
+- **Surface Tokens:** Canvas `#f9f7f1` (`oklch(97.5% 0.010 90)`) · Reading Sheet `#ffffff` · Subtle `#f0ece1` · Rule `1px solid #e0dacb`
+- **Ink Tokens:** Primary `#1c1917` · Secondary `#3f3a36` · Muted `#6b635b`
+- **Accent & Semantic:** Editorial Crimson `#9f1239` (`oklch(45% 0.17 15)`), Soft `#fff1f2`
+- **Typography:** Display `Fraunces` (600, `-0.02em`) · Long-form Prose `Source Serif 4` (`65ch–72ch` measure, `1.65` line-height) · UI Chrome & TOC `Work Sans` (400/500/600)
+- **Geometry & Posture:** Distraction-free reading column flanked by receding table-of-contents and citation/footnote margin rails (`4px` radius).
+
+### `14. Botanical Field`
+*Best for: EdTech courses, language & science learning, sustainability/climate platforms, community libraries.*
+- **Surface Tokens:** Canvas `#f4f6f0` (`oklch(96.6% 0.012 125)`) · Sheet `#ffffff` · Subtle `#e7ece0` · Rule `1px solid #d5ddd0`
+- **Ink Tokens:** Primary `#1c241b` · Secondary `#374436` · Muted `#5c6b5a`
+- **Accent & Semantic:** Warm Ochre `#b45309` (`oklch(53% 0.14 55)`), Soft `#fef3c7` · Completion: Forest `#15803d`
+- **Typography:** Display `Libre Baskerville` (400/700) · Learning UI & Exercises `Figtree` (400/500/600) · Curriculum Codes & Progress `IBM Plex Mono`
+- **Geometry & Posture:** Structured syllabus rail + focused lesson canvas (`10px` radius, clear progress milestones, tactile quietness without childish gamification).
+
+---
+
+## 10. Domain 8 — Industrial, Logistics, Construction & Geospatial
+
+### `15. Formwork Concrete`
+*Best for: Construction management, field engineering, manufacturing MES, warehouse WMS, heavy equipment.*
+- **Surface Tokens:** Canvas `#eeece6` (`oklch(94.2% 0.008 82)`) · Work Plate `#f9f8f5` · Subtle `#e2dfd7` · Rule `1px solid #cbc7bc` (Plate top-bar: `3px solid #18181b`)
+- **Ink Tokens:** Primary `#18181b` · Secondary `#36363a` · Muted `#575652`
+- **Accent & Semantic:** Safety Orange `#c2410c` (`oklch(52% 0.18 38)` — passes WCAG AA `4.5:1` with `#ffffff` button ink), Soft `#ffedd5`
+- **Typography:** Display `Oswald` (600/700, `-0.005em`) · UI & Field Forms `Archivo` (400/500/600) · Tolerances, Tonnage & Lot IDs `IBM Plex Mono` (`tabular-nums`)
+- **Geometry & Posture:** Square `0px` board-cast edges, high-target field controls (`>= 44px`), unambiguous work-order status plates.
+
+### `16. Meridian Survey`
+*Best for: Fleet dispatch, supply chain & freight tracking, GIS/geospatial consoles, energy & utility grids.*
+- **Surface Tokens:** Canvas `#f3f5f7` (`oklch(96.5% 0.005 235)`) · Map/Data Overlay `#ffffff` · Subtle `#e5e9ef` · Rule `1px solid #cfd6e0`
+- **Ink Tokens:** Primary `#0f172a` · Secondary `#2d3a4f` · Muted `#58677e`
+- **Accent & Semantic:** Survey Teal `#0f766e` (`oklch(51% 0.096 186)`), Waypoint Alert `#b45309`, Soft `#f0fdfa`
+- **Typography:** Display `Sora` (600, `-0.02em`) · Dispatch UI `Public Sans` (400/500/600) · Coordinates, ETAs & Manifests `JetBrains Mono` (`tabular-nums`)
+- **Geometry & Posture:** Split canvas (geospatial/timeline viewport + docked high-density manifest drawer, `6px` radius, crisp `1px` keylines).
+
+---
+
+## 11. Selection & Lock Protocol (Greenfield Only)
+
+1. **Match Domain First:** Map the user's product to one of the 8 domains in Section 1. Never cross-contaminate genres (e.g., never apply `09. Graphite Instrument` dark terminal aesthetics to `01. Sovereign Slate` civic portals).
+2. **Alternate Within Domain:** Choose between Option A (cool/structural) and Option B (warm/editorial) based on brand tone or to diverge from recent builds.
+3. **Brownfield Preemption:** If the repository already defines brand tokens (e.g., Tailwind colors, CSS variables in `globals.css` or `app.css`), skip this catalog completely. Do not override established project palettes.
+4. **Silent Internal Token Application:** Translate selected tokens directly into CSS custom properties (`--bg-canvas`, `--bg-surface`, `--text-ink`, `--border-rule`, `--accent-primary`) in code. Never output promotional or meta-jargon phrases to the user.

package/.agents/plugins/agentic-senior-core/skills/asc-ui/references/divergence.md

@@ -80,48 +80,89 @@ Examples of strong signature elements:
 
 ---
 
-## 5. The Three Waves of AI Tells (Chronological Slop Registry)
+## 5. Common Layout & Aesthetic Pitfalls
 
-Slop is not static. As soon as AI models are instructed to avoid one set of clichés, they converge on the next fashionable alternative.
+Generic generative output typically falls into predictable styling clusters:
 
 ```
 ┌────────────────────────────────────────────────────────┐
-│           THE THREE WAVES OF AI DESIGN TELLS           │
+│           GENERIC LAYOUT CLUSTERS & HABITS             │
 ├────────────────────────────────────────────────────────┤
-│ Wave 1 (2023–2024): The Neon Starter Pack              │
-│ Violet/cyan gradients, glassmorphism, floating drop    │
-│ shadows, 3 identical cards with icon chips, emoji dots.│
+│ 1. The Gradient & Glow Default                         │
+│ Violet/cyan linear gradients, diffuse neon halos,      │
+│ identical 3-card rows with generic icon boxes.         │
 ├────────────────────────────────────────────────────────┤
-│ Wave 2 (2025): The Pseudo-Technical Bento              │
-│ Uppercase tracked eyebrows, pill badges ("Beta"),      │
-│ bento card grids, dark canvas with neon ambient halos. │
+│ 2. The Pseudo-Technical Bento                          │
+│ Uppercase tracked-out labels, pill badges, and dark    │
+│ bento grids applied indiscriminately to all products.  │
 ├────────────────────────────────────────────────────────┤
-│ Wave 3 (2025–2026): "The Fix That Became the Look"     │
-│ Yellow-cream parchment (#FDFBF7) + terracotta/rust,   │
-│ giant italic serif display, broadsheet newspaper grids,│
-│ performative index numbers (01 / 02), fake coordinates.│
+│ 3. The Unprompted Editorial Default                    │
+│ Yellow-cream backgrounds (#FDFBF7), oversized italic   │
+│ serifs, and artificial statutory broadsheet dividers.  │
+├────────────────────────────────────────────────────────┤
+│ 4. Misplaced Monospace & Terminal Containers           │
+│ Terminal window frames, prompt symbols ($), and ASCII  │
+│ charts injected into ordinary non-developer workflows. │
+├────────────────────────────────────────────────────────┤
+│ 5. The Over-Constrained Wireframe                      │
+│ Rigid 1px hairline grids and dense tables forced onto  │
+│ public homepages, stripping all visual pacing.         │
 └────────────────────────────────────────────────────────┘
 ```
 
-### 5.1 Defending Against Wave 3 (Editorial Slop)
-The remedy published for Wave 1 and 2 was "warm it up and make it editorial". Models adopted this wholesale, making warm editorial the most instantly recognizable AI tell of 2026:
-- **Terracotta & Cream Monoculture:** Banned as an unprompted AI reflex. Warmth must come from low-chroma stone, authentic product photography, or deep rich ink—not default yellow-cream backgrounds paired with rust orange.
-- **Oversized Italic Serif Cliché:** Do not use italic serif display as a superficial shortcut to "luxury" or "premium" unless the client's actual brand specifically requires it.
-- **Broadsheet Cosplay:** Hairline 1px borders dividing zero-radius dense columns to mimic an 1890s newspaper is an artificial costume. Structure must emerge from clear spatial scale and tonal contrast.
-- **Performative Agency Metadata:** Banned decorative index numbering (`01`, `02`, `(001)`), fake coordinates (`37.77° N`), and version stamps (`©2026 — Scroll`) that convey zero operational data.
+### 5.1 Excessive Serif & Parchment Surfaces
+Editorial typography must serve products with genuine long-form prose or literary context:
+- **Terracotta & Cream Monoculture:** Warmth must come from low-chroma neutral tones, authentic imagery, or deep ink—not default yellow-cream backgrounds paired with rust orange.
+- **Oversized Italic Serif Display:** Do not use italic serif display as a superficial shortcut to "luxury" or "premium" unless the client's actual brand specifically requires it.
+- **Artificial Broadsheet Grids:** Dense hairline rules dividing zero-radius columns to mimic an archival newspaper is an artificial costume. Structure must emerge from spatial scale and tonal contrast.
+- **Performative Metadata:** Omit decorative index numbering (`01`, `02`, `(001)`), fake coordinates (`37.77° N`), and version stamps (`©2026 — Scroll`) that convey zero operational data.
+
+### 5.2 Misplaced Monospace & Terminal Containers
+When models attempt to convey technical competence, they frequently force developer aesthetics onto general software:
+- **No Non-Developer Terminals:** Never enclose ordinary educational, institutional, or business data inside a fake terminal window with prompt symbols (`$`, `>`).
+- **No ASCII Charts or Brackets:** Never generate ASCII art radar charts (`/\`, `[■■■□□]`), pseudo-status brackets (`[STATUS: 112]`), or terminal line-drawings. Use semantic HTML5 `<progress>` elements, styled SVG bars, and clean tabular typography.
+- **Plain Technical Vocabulary:** Never label normal administrative or assessment features with exaggerated jargon ("telemetry console", "neural assessment engine"). Use the genuine domain terms established in the codebase.
+
+### 5.3 Over-Constrained Border Dividers
+When avoiding card grids, models often collapse into the opposite extreme: wrapping every entity and summary item in continuous `border divide-y` matrices:
+- **Selective Borders:** Restrict dense table borders to genuine tabular datasets. Never force committee bios, team rosters, or public feature overviews into spreadsheet cell grids (`border-t border-l border-r border-b`).
+- **Surface Contrast Rhythm:** Separate public sections with generous vertical space (`py-16 lg:py-24`) and full-bleed background shifts (e.g., transition from deep brand grounding to crisp light paper), not continuous wireframe border lines.
+- **Direct Technical Prose:** Deliver clean, production-ready design decisions directly without citing internal rule names or theoretical frameworks.
 
 ---
 
-## 6. Substance Over Restraint (Anti-Sterile Empty Voids)
+## 6. Substance Over Restraint (Avoiding Sterile Layouts)
 
-Stripping away slop ornaments (cards, borders, badges, gradients) is only the first half of design engineering.
+Stripping away decorative clutter is only the first half of design engineering.
 
 > **THE SUBSTANCE INVARIANT:**
-> A page that loses its decorative clutter without gaining substantive weight becomes an uninspired, sterile wireframe. Users and jurors rightly prefer a rich interface with minor tells over an empty, depressing void.
+> A page that loses its decorative clutter without gaining substantive weight becomes an uninspired, sterile wireframe. Users and reviewers rightly prefer a rich interface over an empty void.
 
-### How to Build Substance Without Slop
+### How to Build Substance Without Clutter
 1. **Bold Typographic Scale Disparity:** Set primary headlines with dramatic scale confidence (e.g. `text-5xl` or `text-6xl` bold display paired with tight `leading-[1.1]`, balanced against crisp `text-sm` body).
-2. **Full-Field Color Anchors:** Instead of scattering small floating cards, ground layouts with full-bleed background tone shifts (e.g., transitioning from a clean light canvas into a deep, tinted section floor).
+2. **Full-Field Color Anchors:** Instead of scattering small floating boxes, ground layouts with full-bleed background tone shifts (e.g., transitioning from a clean light canvas into a deep, tinted section floor).
 3. **Authentic Interface Fragments:** For software products, construct working, interactive HTML/CSS UI components (a data table with real rows, an interactive calculation filter, or live code tabs) rather than empty illustrations or placeholder diagrams.
 
+---
+
+## 7. Layout Containers vs. Discrete Cards
+
+A common flaw in generated layouts is wrapping every page section in floating rounded card boxes.
+
+### 7.1 Container Roles
+Because generative models encounter millions of component snippets, they frequently wrap top-level sections inside:
+`<div class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">`
+
+When applied across a full screen, the layout collapses into disconnected white boxes floating on a grayish background.
+
+### 7.2 Structural Rules: Sections vs. Discrete Items
+- **Cards are strictly for discrete, interchangeable, dynamic items:** Product catalog grids, kanban task cards, or gallery thumbnails.
+- **Forbidden for Structural Wrappers:** Never wrap an application header, tab bar, left workflow rail, or primary data table in separate, floating rounded boxes.
+
+### 7.3 Unified Surface Discipline
+In professional software:
+1. **Single Cohesive Plane:** The application is housed in a unified spatial sheet or integrated rails, not an archipelago of floating islands.
+2. **Hairline Boundaries:** Spatial separation is established through clean dividers (`border-r border-border`, `divide-y divide-border`) and subtle background tonal shifts (`bg-background` $\to$ `bg-card` $\to$ `bg-muted`).
+3. **High Data-to-Padding Ratio:** Tables must not be padded with bloated empty space. Use compact, scannable cell heights ($10\text{px}–14\text{px}$ vertical padding) with tabular monospace figures (`font-mono tabular-nums`).
+
 

package/.agents/plugins/agentic-senior-core/skills/asc-ui/references/modes/experience.md

@@ -4,6 +4,10 @@ Use for: Creative portfolios, design galleries, interactive product demos, and m
 
 > **Core Principle:** The visitor is inside the work itself. Interface chrome recedes entirely so the visual artifact, artwork, or interaction leads from the first viewport. The UI serves as a quiet frame for the subject.
 
+> **Visual Reference Benchmarks:**
+> - Collaborative Infinite Canvas & Studio: `references/visuals/real-tldraw.png` (`real-tldraw-dom.json`)
+> - Command Center & Launcher Canvas: `references/visuals/real-raycast.png` (`real-raycast-dom.json`)
+
 ---
 
 ## 1. Canvas Treatment & Spatial Composition