@ryuenn3123/agentic-senior-core 6.16.5 → 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

@@ -1,6 +1,6 @@
 # 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. Unconstrained models converge onto the statistical median: muddy slate-indigo, generic SaaS card soup, or gimmick cosplay. Lock visual styling to one of **16 verified, domain-calibrated material themes** across **8 real-world software domains** (2 contrasting directions per domain).
+> **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.
 
 ---
 
@@ -21,12 +21,12 @@ Select the domain matching the product's real-world purpose, then pick one of it
 
 ---
 
-## 2. Anti-Gimmick Exclusion Filter (Why Cosplay Themes Are Banned)
+## 2. Production Constraints & Accessibility Requirements
 
-External theme packs frequently confuse novelty with craft—producing a **second wave of AI slop** that breaks usability and production budgets. The following patterns are strictly excluded from ASC:
-1. **Cosplay & Novelty Surfaces:** Medieval blackletter parchment, green/amber CRT phosphor scanlines, two-drum pink/blue risograph with no black ink, torn-paper edges, and die-cut sticker outlines.
-2. **Decorative 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:** Fontshare-only families (`Sentient`, `General Sans`, `Switzer`, `Cabinet Grotesk`, `Boska`, `Chillax`, `Ranade`) that 404 on Google Fonts CDNs, and unbundled local texture URLs (`url("cotton.svg")`). Every font in this catalog is verified on Google Fonts with clean system fallbacks.
+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.
 
 ---
@@ -34,7 +34,7 @@ External theme packs frequently confuse novelty with craft—producing a **secon
 ## 3. Domain 1 — Civic, Academic & Institutional
 
 ### `01. Sovereign Slate`
-*Best for: School evaluations (SAURAN), accreditation dossiers, compliance portals, municipal registries.*
+*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`
@@ -191,8 +191,9 @@ External theme packs frequently confuse novelty with craft—producing a **secon
 
 ---
 
-## 11. Selection & Lock Protocol
+## 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. **Declare Lock Explicitly:** State `THEME LOCKED: <ID. Name>` during pre-flight and translate all tokens into CSS custom properties (`--bg-canvas`, `--bg-surface`, `--text-ink`, `--border-rule`, `--accent-primary`) before writing component markup.
+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,80 +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 FOUR 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.  │
 ├────────────────────────────────────────────────────────┤
-│ Wave 4 (2026): The Geek / Terminal Cosplay             │
-│ ASCII art charts, pseudo-telemetry consoles, fake dark │
-│ terminal frames forced onto non-developer products.    │
+│ 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 an instantly recognizable AI tell:
-- **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 Defending Against Wave 4 (Geek & Terminal Cosplay)
-When models are forbidden from building generic cards or warm editorial broadsheets, they frequently overcorrect by turning *every* application into a cyberpunk or terminal telemetry dashboard:
-- **Hard Ban on Non-Developer Terminals:** Never enclose ordinary educational, institutional, or business data inside a fake terminal window with prompt symbols (`$`, `>`).
+### 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.
-- **Zero Pseudo-Telemetry Jargon:** Never label normal administrative or assessment features with fake aerospace/hacker jargon ("telemetry console", "neural assessment engine", "quantum telemetry"). Call it what it is plainly in human language.
+- **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. The Card-Soup Syndrome & Unified Spatial Canvas
+## 7. Layout Containers vs. Discrete Cards
 
-The most prevalent tell of generative AI frontends in 2026 is **The Card-Soup Syndrome (Archipelago of Floating Cards)**.
+A common flaw in generated layouts is wrapping every page section in floating rounded card boxes.
 
-### 7.1 What is Card-Soup?
-Because LLMs are trained on millions of generic Tailwind and component library examples, their immediate probabilistic reflex when laying out any section is to wrap it inside:
+### 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 5–8 disconnected white boxes floating on a grayish background. To human eyes, this immediately screams "low-effort AI template".
+When applied across a full screen, the layout collapses into disconnected white boxes floating on a grayish background.
 
-### 7.2 The Structural Rule: Cards vs. Spatial Architecture
+### 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.
-- **Cards are FORBIDDEN as structural section wrappers:** Never wrap an application header, tab bar, left workflow rail, or primary data table in separate, floating rounded boxes!
+- **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 The Unified Spatial Canvas Invariant
-In professional human-crafted software (Linear, Stripe, Vercel, GitHub):
+### 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 1px borders (`border-r border-slate-200`, `divide-y divide-slate-100`) and subtle background tonal shifts (`#f8fafc` canvas background $\to$ `#ffffff` primary sheet $\to$ `#fcfcfd` auxiliary rail).
-3. **High Data-to-Padding Ratio:** Tables must not be padded with bloated 24px–32px empty space. Use compact, scannable cell heights ($10\text{px}–14\text{px}$ vertical padding) with tabular monospace figures (`font-mono tabular-nums`).
+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

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

@@ -1,4 +1,4 @@
-# Domain & Genre Calibration (Anti-Geek Cosplay)
+# Domain Alignment & Visual Posture
 
 > **Core Invariant:** The real-world problem domain dictates visual posture, NEVER generic AI trends. A school evaluation system must look like an educational instrument; an accounting app must look like a ledger; only actual developer tools should ever look like a terminal.
 
@@ -20,12 +20,13 @@ Before laying out a single component or proposing a visual design, classify the
 ```
 
 ### Genre 1: Civic, Institutional & Educational
-*Examples: SAURAN evaluation, academic portals, scouting/youth accreditation, public services, municipal audit.*
+*Examples: Evaluation systems, accreditation portals, public services, municipal registries, educational instruments.*
 
 - **Visual Tone:** Dignified, calm, accessible, structured, and trustworthy.
-- **Surface & Palette:** Clean neutral ground (pure white or soft stone background), crisp 1px borders (`border-border`), high-contrast dark foreground text, semantic status pills (e.g. emerald for *Terverifikasi*, amber for *Butuh Revisi*, slate for *Pending*).
+- **Surface & Palette:** Clean neutral ground (pure white or soft stone background), crisp 1px borders (`border-border`), high-contrast dark foreground text, semantic status pills (e.g. emerald for verified, amber for needs revision, slate for pending).
+- **Live Visual Benchmarks:** Inspect `references/visuals/real-clerk.png` (clean single-line inputs and bounded tabs) and `references/visuals/real-cal.png` (scheduling layout, calm typography, and status indicators).
 - **Core Components:**
-  - Clear rubric tables with explicit weight/point columns.
+  - Clear evaluation tables with explicit weight/point columns.
   - Category assessment cards showing actual scores vs targets.
   - Step progress indicators for verification workflows.
   - Summary scorecard with clear totals and action buttons.
@@ -33,7 +34,7 @@ Before laying out a single component or proposing a visual design, classify the
   - **NO Terminal / CLI Cosplay:** Never put evaluation data inside a faux terminal, command prompt window, or ASCII box.
   - **NO ASCII Art or Pseudo-Radars:** Never draw ASCII charts (`/\`, `[■■■□□]`, `[2026]`). Use semantic progress bars (`<progress>` or standard div progress) and proper tabular rows.
   - **NO Dark Cyberpunk Mode:** Never force dark mode or neon glow on institutional workflows.
-  - **NO Jargon Injections:** Never label an assessment tool with pseudo-sci-fi phrases ("telemetry console", "evaluation engine", "neural scanner", "quantum monitor"). Call it what it is: *Ringkasan Evaluasi*, *Rubrik Penilaian*, *Status Verifikasi*.
+  - **NO Jargon Injections:** Never label an assessment tool with pseudo-sci-fi phrases ("telemetry console", "evaluation engine", "neural scanner", "quantum monitor"). Always use the project's genuine domain terminology.
 
 ---
 
@@ -42,6 +43,7 @@ Before laying out a single component or proposing a visual design, classify the
 
 - **Visual Tone:** Compact, data-dense, predictable, and keyboard-efficient.
 - **Surface & Palette:** Neutral surfaces, subtle divider lines, minimal elevation shadows (flat or `shadow-sm`), clear focus rings.
+- **Live Visual Benchmarks:** Inspect `references/visuals/real-attio.png` (windowed desktop console, search toolbar with `⌘K`, multi-filter table density) and `references/visuals/real-dub.png` (embedded dashboard stage, large bold KPI metrics, tabular data).
 - **Core Components:**
   - Data tables with sticky headers, sortable columns, and filter bars.
   - Master-detail side rails or drawers for drilling into row details.
@@ -57,6 +59,7 @@ Before laying out a single component or proposing a visual design, classify the
 
 - **Visual Tone:** Sharp, decisive, persuasive, authentic conviction.
 - **Surface & Palette:** Generative typographic scale contrast ($Display \ge 3.5\times Body$), tight leading (`leading-[1.05]`), full-bleed background anchor, authentic product screenshots or functional interactive calculators.
+- **Live Visual Benchmarks:** Inspect `references/visuals/real-stripe.png` (flowing visual authority and dual CTA row), `references/visuals/real-vercel.png` (high-contrast brand stage and monochrome logo proof), and `references/visuals/real-marketplace.png` (sidebar filters and catalog cards).
 - **ABSOLUTE PROHIBITIONS:**
   - **NO Cliché Gradients:** Saturated purple-to-indigo or cyan-to-violet linear gradients.
   - **NO Symmetrical 3-Card Grid:** Identical cards with Lucide icons in pastel rounded squares.
@@ -68,6 +71,7 @@ Before laying out a single component or proposing a visual design, classify the
 *Examples: CLI tools, API documentation, log viewers, query consoles.*
 
 - **Visual Tone:** High technical precision, compact syntax highlighting, dark/slate neutral grounding or clean technical whiteprint.
+- **Live Visual Benchmarks:** Inspect `references/visuals/real-resend.png` (dark editorial and typography contrast), `references/visuals/real-supabase.png` (asymmetric hero split and capability cards), `references/visuals/real-raycast.png` (command center launcher), `references/visuals/real-mintlify.png` (dual-rail API docs), `references/visuals/real-linear.png` (disciplined whitespace), and `references/visuals/real-tldraw.png` (receding chrome canvas).
 - **Core Components:** Copyable command blocks, real interactive code playgrounds, keyboard shortcut prompts.
 - **ABSOLUTE RULE:** This developer aesthetic is **RESERVED EXCLUSIVELY FOR DEVELOPER PRODUCTS**. Never leak terminal conventions into Genre 1, 2, or 3.
 
@@ -76,7 +80,7 @@ When working in Healthcare, Physical Commerce/Hospitality, Editorial/EdTech, or
 
 ---
 
-## 2. The Purpose-Gate (Zero Unearned Widgets)
+## 2. Purpose-Driven Component Gate (Zero Unearned Widgets)
 
 Every component, widget, badge, or section must pass the Purpose-Gate: