@ryuenn3123/agentic-senior-core 6.16.3 → 6.16.6

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

@@ -0,0 +1,93 @@
+# 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.
+
+---
+
+## 1. The 4 Target Genres & Aesthetic Contracts
+
+Before laying out a single component or proposing a visual design, classify the project into one of four real-world genres:
+
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│                       THE 4 REAL-WORLD GENRES                          │
+├────────────────────────────────────────────────────────────────────────┤
+│ 1. Civic, Institutional & Educational (Gov, School, NGO, Compliance)  │
+│ 2. Enterprise & B2B Operational (ERP, CRM, Accounting, Inventory)     │
+│ 3. Commercial SaaS & Conversion (Public Landing, Pricing, Product)    │
+│ 4. Developer Tools & Infrastructure (SDKs, CLIs, Observability, APIs)  │
+└────────────────────────────────────────────────────────────────────────┘
+```
+
+### Genre 1: Civic, Institutional & Educational
+*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 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 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.
+- **ABSOLUTE PROHIBITIONS (Second-Order Slop):**
+  - **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"). Always use the project's genuine domain terminology.
+
+---
+
+### Genre 2: Enterprise & B2B Operational
+*Examples: Internal operations, HR portals, supply chain management, financial reporting.*
+
+- **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.
+  - Monospace only for aligned financial values (`font-mono tabular-nums`).
+- **ABSOLUTE PROHIBITIONS:**
+  - **NO Misplaced Heroes:** Never place giant marketing hero sections, splash banners, or promotional copywriting inside an operational dashboard.
+  - **NO Decorative Metric Clutter:** Every stat card must correspond to an actual query or measurable KPI. Omit generic "Welcome back, User!" filler.
+
+---
+
+### Genre 3: Commercial SaaS & Conversion
+*Examples: Marketing landing pages, product launch pages, pricing tiers.*
+
+- **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.
+  - **NO Fabricated Proof:** Fake partner logos or manufactured customer testimonials.
+
+---
+
+### Genre 4: Developer Tools & Infrastructure
+*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.
+
+### Specialized Real-World Sub-Domains (Mapped in `craft/themes-catalog.md`)
+When working in Healthcare, Physical Commerce/Hospitality, Editorial/EdTech, or Industrial/Field Logistics, select their dedicated domain pair in `references/craft/themes-catalog.md` (`Pharmacy Calm` / `Clinical Precision`, `Atelier Gallery` / `Kinetic Grid`, `Studio Proof` / `Botanical Field`, `Formwork Concrete` / `Meridian Survey`) rather than flattening them into generic corporate SaaS.
+
+---
+
+## 2. Purpose-Driven Component Gate (Zero Unearned Widgets)
+
+Every component, widget, badge, or section must pass the Purpose-Gate:
+
+> **The Purpose-Gate Test:**
+> *"What concrete user decision or task does this element directly enable?"*
+
+1. If the element exists solely to "look high-tech", "fill empty space", or "make the page look interactive" without real underlying data $\to$ **DELETE IT**.
+2. Never invent simulated consoles, fake real-time feeds, or unprompted sliders.
+3. If the user asks for an evaluation summary, provide clear, functional assessment cards and tables—never decorative cosplay.
+

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

@@ -4,6 +4,10 @@ Use for: Dashboards, data grids, admin consoles, editors, settings, financial le
 
 > **Core Principle:** The visitor completes a task. Scanability, dense data alignment, low cognitive friction, and native expectations outrank emotional expression. Brand identity lives in the precision of micro-details, not loud decorative containers.
 
+> **Visual Reference Benchmarks:**
+> - CRM & Relational Operations: `references/visuals/real-attio.png` (`real-attio-dom.json`)
+> - Analytics & Telemetry Dashboards: `references/visuals/real-dub.png` (`real-dub-dom.json`)
+
 ---
 
 ## 1. Information Density & Layout Geometry
@@ -18,7 +22,7 @@ Use for: Dashboards, data grids, admin consoles, editors, settings, financial le
   - Hover feedback: `hover:bg-muted/40` across the entire row.
   - Text alignment rule: Left-align text strings, right-align numeric figures and monetary amounts, center status chips and icon actions.
   - Numeric values must use `tabular-nums` for vertical column alignment.
-- **Progressive Disclosure alih-alih Modal Popups:**
+- **Progressive Disclosure over Intrusive Modals:**
   - Avoid popping modals for inline edits or sub-entity creation. Use expandable rows, sliding side sheets (drawers), or inline input switches.
   - Reserve dialogs strictly for destructive confirmations (delete, revoke) or complex isolated workflows (import wizard).
 
@@ -51,3 +55,29 @@ Use for: Dashboards, data grids, admin consoles, editors, settings, financial le
 - **Zero Decorative Halos:**
   - Never wrap status dots or cards in glowing radial blurs (`shadow-[0_0_12px_#10b981]`). Keep indicators solid and functional.
 
+---
+
+## 4. Inspection & Audit Finding Rows
+
+- **Interactive Row Contract:**
+  - Finding rows, audit line items, and checklist items must never be rendered as dead, static text blocks.
+  - Every finding row (e.g. `Finding #1: Physical document pending verification`) must provide:
+    1. **Primary Action Affordance:** Explicit inline trigger button (e.g. `Review File`, `Request Details`, or expandable chevron).
+    2. **Attachment Badge:** File type badge (`PDF`, `XLSX`), byte size, and upload timestamp.
+    3. **Status Pill:** High-contrast semantic pill (`Needs Attention`, `Pending Confirmation`, `Verified`).
+    4. **Hover State:** `hover:bg-muted/40 transition-colors` across the entire row bounding box.
+
+---
+
+## 5. Dual Navigation Patterns (Filters vs Lifecycles)
+
+- **Separation of Mental Models:**
+  - **Horizontal Tabs**: View-Port Filter Lenses (switching data views, e.g. *Overview*, *Domain Criteria*, *Findings*, *History*). These change what information is rendered on the stage.
+  - **Vertical Rail**: Immutable Lifecycle Progression (e.g. *1. Upload Document $\to$ 2. Verify $\to$ 3. Assess $\to$ 4. Confirm $\to$ 5. Summary*). This reflects where the entity is in its operational state.
+- **Accenting Active Lifecycle Step:**
+  - Never let the current active step in the lifecycle rail look identical to future unstarted steps.
+  - Active step: highlighted with high-contrast accent ring or filled circle (`bg-primary text-primary-foreground`) with an active descriptor ("Active verification phase").
+  - Completed steps: clear muted checks (`text-emerald-600` with subtle strike or timestamp).
+  - Pending steps: muted borders (`border-border text-muted-foreground`).
+
+

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

@@ -4,6 +4,12 @@ Use for: Landing pages, marketing websites, product launch pages, and pricing sc
 
 > **Core Principle:** The visitor decides and acts; design is the product. Earn attention and conversion with bold, authentic conviction. Ambition is expressed through scale, typographic contrast, and proof of reality—never through fluffy filler or generic card stacks.
 
+> **Visual Reference Benchmarks:**
+> - High-Impact Brand Stage: `references/visuals/real-vercel.png` (`real-vercel-dom.json`)
+> - Financial Infrastructure / Multi-Tier Flow: `references/visuals/real-stripe.png` (`real-stripe-dom.json`)
+> - Editorial Developer Infrastructure: `references/visuals/real-resend.png` (`real-resend-dom.json`)
+> - Storefront / Catalog Filter Stage: `references/visuals/real-marketplace.png` (`real-marketplace-dom.json`)
+
 ---
 
 ## 1. The Viewport Budget & The 80-Word Rule
@@ -18,77 +24,81 @@ Use for: Landing pages, marketing websites, product launch pages, and pricing sc
 
 ---
 
-## 2. In-Memory Direction Dealer (4 Structural Postures)
+## 2. Structural Layout Blueprints (4 Compositions)
 
-When building or redesigning a Persuade surface, never let the LLM default to the statistical average of marketing pages. Choose one of four researched structural postures based on the project's real material:
+When building or redesigning a Persuade surface, select a deliberate structural layout matching the product's real content:
 
 ```
 ┌────────────────────────────────────────────────────────────────────────┐
-│                        THE 4 STRUCTURAL POSTURES                       │
+│                      THE 4 STRUCTURAL BLUEPRINTS                       │
 ├────────────────────────────────────────────────────────────────────────┤
 │ 1. Asymmetric Stage (65/35 Split): Left-anchored heavy typography      │
 │    offset against an interactive preview, ROI calculator, or live UI. │
 │ 2. The Monolith Ledger: Single-column dense reading measure with       │
 │    full-bleed horizontal rows, hairline dividers, and deep ink.        │
-│ 3. Product-Led Canvas: Live application interface or CLI terminal     │
+│ 3. Product-Led Canvas: Live application interface or workflow canvas   │
 │    dominates the first viewport; copy recedes to tightly frame it.     │
 │ 4. Kinetic Proof Stream: Alternating proof blocks driven by verifiable │
 │    benchmarks, architectural diagrams, and real data payloads.         │
 └────────────────────────────────────────────────────────────────────────┘
 ```
 
-- **Posture Selection Protocol:**
-  - If real software or CLI exists $\to$ **Posture 3 (Product-Led Canvas)**.
-  - If quantitative savings or enterprise value proposition $\to$ **Posture 1 (Asymmetric Stage)**.
-  - If technical documentation, whitepaper, or architectural manifesto $\to$ **Posture 2 (The Monolith Ledger)**.
-  - If performance benchmarks, protocol comparisons, or telemetry proof $\to$ **Posture 4 (Kinetic Proof Stream)**.
+- **Blueprint Selection:**
+  - If real software interface exists $\to$ **Blueprint 3 (Product-Led Canvas)**.
+  - If quantitative savings or enterprise value proposition $\to$ **Blueprint 1 (Asymmetric Stage)**.
+  - If technical documentation, whitepaper, or architectural manifesto $\to$ **Blueprint 2 (The Monolith Ledger)**.
+  - If performance benchmarks, protocol comparisons, or telemetry proof $\to$ **Blueprint 4 (Kinetic Proof Stream)**.
 
 ### Structural Blueprints (Enforced DOM Geometries)
 
-#### Posture 1: Asymmetric Stage (65/35 Split)
+#### Blueprint 1: Asymmetric Stage (65/35 Split)
 - **Container:** `grid grid-cols-1 lg:grid-cols-12 gap-12 items-center`
 - **Left Lead (7 cols):** `lg:col-span-7 space-y-6 text-left`
   - Display headline: `text-5xl lg:text-7xl font-bold tracking-tight leading-[1.05]`
   - Subtitle: `text-lg text-muted-foreground max-w-xl`
   - Actions: `flex flex-wrap items-center gap-4 pt-2`
 - **Right Artifact (5 cols):** `lg:col-span-5`
-  - Authentic artifact, interactive widget, or live ROI card: `rounded-2xl border border-border/80 bg-card p-6 shadow-sm`
+  - Authentic artifact, interactive widget, or live score/ROI card: `rounded-2xl border border-border/80 bg-card p-6 shadow-sm`
   - Zero equal-weight card grids below.
 
-#### Posture 2: The Monolith Ledger
+#### Blueprint 2: The Monolith Ledger
 - **Container:** `max-w-4xl mx-auto px-6 py-16 divide-y divide-border/60`
 - **Tabular Rows:** Each entity or program is a horizontal row: `py-8 grid grid-cols-1 md:grid-cols-12 gap-6 items-baseline`
   - Category / Date: `md:col-span-3 text-xs font-semibold tracking-wider uppercase text-muted-foreground`
   - Heading & Data: `md:col-span-5 text-xl font-bold text-foreground`
   - Detail & Action: `md:col-span-4 text-sm text-muted-foreground`
 
-#### Posture 3: Product-Led Canvas
+#### Blueprint 3: Product-Led Canvas
 - **Container:** `flex flex-col items-center text-center max-w-6xl mx-auto px-6 pt-16 pb-20`
 - **Compact Hero Frame:** `max-w-2xl space-y-4 mb-10`
   - Headline: `text-4xl sm:text-6xl font-extrabold tracking-tight`
   - 1-sentence value claim + 1 primary action.
-- **Hero Canvas (70% Viewport Lead):** `w-full rounded-2xl border border-border/80 bg-slate-950 p-2 shadow-2xl`
-  - Real interface fragment or live demo canvas dominating the first viewport.
+- **Hero Canvas (70% Viewport Lead):** `w-full rounded-2xl border border-border/80 bg-card p-3 shadow-xl`
+  - Real interface fragment or live demo canvas dominating the first viewport. Respect project theme tokens; never force artificial dark backgrounds or terminal frames unless the target product is an actual CLI/developer tool.
 
 ---
 
-## 3. Anti-Cardocalypse & Visual Pacing
+## 3. Composition Variety & Content Rhythm
 
-- **Banned 3-Card Symmetrical Grid:**
-  - Never default to a 3-column grid where every card has identical dimensions, a Lucide icon in a pastel square, a bold title, and two lines of gray text.
+- **Banned Symmetrical 3-Card Rows:**
+  - Never default to a 3-column row where every item has identical dimensions, a generic icon box, a bold title, and two lines of gray text.
   - Instead, vary composition according to content weight:
     - *Flagship Feature:* Full-width container or asymmetric 8/4 split showing the primary capability in action.
     - *Supporting Capabilities:* Compact 2-column checklist or a structured comparison table.
-- **The Signature Element:**
-  - Every Persuade surface must feature exactly **one memorable signature element** on the first screen:
-    - An interactive pricing slider that recalculates savings in real time.
-    - A live terminal code editor running the SDK quickstart.
+- **Anti-Spreadsheet Wireframe on Public Landing Pages:**
+  - Do NOT convert a public home or landing page into a 100+ row raw data dump. Provide structured category overviews with focused preview panels (see `references/craft/composition-patterns.md`).
+  - Do NOT wrap human directories or committees into spreadsheet border matrices (`border-t border-b border-l border-r`); use clean spacing, authentic badges, and natural typographic flow.
+- **The Focal Signature Element:**
+  - Every Persuade surface may feature at most **one memorable focal element** on the first screen that directly reflects the product domain:
+    - An interactive calculator or estimator that recalculates results in real time.
     - An unedited, high-resolution product screenshot showing real user data.
+    - A live interactive UI fragment (e.g., an assessment scorecard preview for educational tools, a filterable ledger row for accounting tools).
+  - **No Artificial Terminals:** Never inject terminal prompts, ASCII art, or pseudo-telemetry consoles into non-developer products.
   - A giant counter of marks or animated numbers is a decorative reflex, not a signature.
 
 ---
 
-## 3. Material Honesty & Proof of Reality
+## 4. Material Honesty & Proof of Reality
 
 - **Zero Fabricated Evidence:**
   - Never invent customer quotes, fake partner logos ("Acme Corp, Pied Piper"), or fabricated performance metrics ("10,000+ teams trust us").

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

@@ -4,6 +4,10 @@ Use for: Documentation, API references, technical blogs, guides, knowledge bases
 
 > **Core Principle:** The visitor understands something. Structure for sustained comprehension, visual calm, and rapid scanning. The reading experience must minimize eye fatigue while providing effortless navigation through dense hierarchies.
 
+> **Visual Reference Benchmarks:**
+> - Documentation & API Reference: `references/visuals/real-mintlify.png` (`real-mintlify-dom.json`)
+> - Product Manifesto & Long-Form Craft: `references/visuals/real-linear.png` (`real-linear-dom.json`)
+
 ---
 
 ## 1. Ergonomic Reading Measure & Spacing

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

@@ -25,15 +25,10 @@ When executing a **Full Redesign** on an existing template or page (`.blade.php`
    - Separate product truth (names, prices, verified claims) from discarded markup.
 2. **Step 2: Isolate / Discard Old Markup**
    - Treat the old layout as an anti-reference. Do not perform incremental class swapping on it.
-3. **Step 3: Author Standalone HTML Prototype & Preview**
-   - Create an ephemeral standalone prototype in the brain directory: `<appDataDir>/brain/<id>/preview.html`.
-   - Select 1 of the 4 Structural Postures (`references/modes/persuade.md` or `operate.md`).
-   - Use Tailwind via CDN and realistic sample data.
-   - Run zero-dependency visual capture:
-     ```bash
-     asc preview <path_to_preview.html>
-     ```
-     Inspect the captured image at `%TEMP%/asc-preview-active.png` (or pass `--open` to view in OS browser). Verify typographic scale ($Display \ge 3.5\times Body$) and full-field grounding.
+3. **Step 3: Author Isolated Prototype / Structural Layout**
+   - When building a complex new surface, draft the isolated DOM layout first using 1 of the 4 Structural Postures (`references/modes/persuade.md` or `operate.md`).
+   - Use design tokens and realistic sample data.
+   - Verify typographic scale ($Display \ge 3.5\times Body$) and full-field spatial grounding before production injection.
 4. **Step 4: Re-inject Data Contracts into Production**
    - Transfer the proven clean geometry into the project file (`welcome.blade.php`, `Page.tsx`).
    - Re-bind the dynamic data loops, Blade/React variables, and event handlers.
@@ -80,7 +75,7 @@ Audit screens systematically against four engineering vectors:
 - [ ] Cycle through entire screen using `Tab` and `Shift+Tab` with mouse disconnected.
 - [ ] Press `Escape` while dialog/modal is open; verify closure and focus restoration.
 
-### 4.3 State Quad Coverage
+### 4.3 State Coverage
 - [ ] Inspect loading state: does it use proportional skeletons matching final dimensions?
 - [ ] Inspect empty state: is it actionable with a 1-sentence explanation?
 - [ ] Inspect error state: does it diagnose the issue and provide an inline retry button?

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

@@ -1,10 +1,10 @@
-# The Data State Quad & Action Feedback Engine
+# Data States & Action Feedback
 
 Any view that consumes asynchronous data or triggers mutations must handle every possible state in the component lifecycle. Never design only for the populated happy path.
 
 ---
 
-## 1. The State Quad
+## 1. The Four Essential UI States
 
 Every data-driven interface exists in one of four states: