@ryuenn3123/agentic-senior-core 6.16.6 → 6.17.0

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

@@ -1,93 +0,0 @@
-# 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

@@ -1,83 +0,0 @@
-# Surface Mode: Operate (Productivity & Task Execution)
-
-Use for: Dashboards, data grids, admin consoles, editors, settings, financial ledgers, logistics tools, and developer tools.
-
-> **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
-
-- **Two-Pane Master-Detail Canvas:**
-  - Fixed-width contextual left rail (240px–280px) for navigation or entity selection.
-  - Fluid, high-density right canvas for inspection, editing, and execution.
-  - Breadcrumb trails with root-to-leaf path (`Projects / Acme / Billing`).
-- **Dense Data Matrix (Tables):**
-  - Table headers must be `sticky top-0` with opaque background and hairline bottom border.
-  - Compact vertical padding: `py-2` to `py-2.5` (row height 36px–40px).
-  - 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 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).
-
----
-
-## 2. Interactive Controls & Action Semantics
-
-- **Button Heights & Hierarchy:**
-  - Primary button: `h-8` or `h-9` (32px–36px), solid semantic token (`bg-primary text-primary-foreground`).
-  - Secondary button: `h-8` or `h-9`, outline or ghost (`border border-input bg-background hover:bg-muted`).
-  - Icon-only buttons: Strict 1:1 aspect ratio (`h-8 w-8`), padded to meet the 44x44px touch target on touch devices.
-- **Keyboard Affordances:**
-  - Display keyboard shortcuts next to menu items and tooltips (`⌘K`, `Esc`, `↵`).
-  - Full keyboard tabbing through tables and forms without trapped focus.
-- **Inline Filter Bars:**
-  - Place search inputs, filter dropdowns, and date range pickers in a cohesive horizontal toolbar directly above data grids.
-  - Show active filter count chips with single-click dismissal (`Active (3) [×]`).
-
----
-
-## 3. Status Badges & Telemetry
-
-- **Semantic Indicator Pattern:**
-  - Always pair a color with a text label or icon (never rely on color alone).
-  - Use subtle tinted badge backgrounds with high-contrast text:
-    - Success: `bg-emerald-500/10 text-emerald-700 dark:text-emerald-400`
-    - Warning: `bg-amber-500/10 text-amber-700 dark:text-amber-400`
-    - Danger: `bg-rose-500/10 text-rose-700 dark:text-rose-400`
-    - Neutral/Inactive: `bg-muted text-muted-foreground`
-- **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

@@ -1,109 +0,0 @@
-# Surface Mode: Persuade (Marketing, Landing & Conversion)
-
-Use for: Landing pages, marketing websites, product launch pages, and pricing screens.
-
-> **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
-
-- **The Above-the-Fold Law:**
-  - At a standard desktop viewport (1280x800), the hero headline, one concise supporting sentence, and the primary call-to-action **MUST** be fully visible without scrolling.
-  - Keep visible text in the first viewport under **80 words**. Fullness comes from scale, whitespace, and high-fidelity product imagery, never from extra paragraphs.
-- **Hero Posture Options:**
-  1. *Stage:* Headline and CTA anchor the left 5–7 columns; a live interactive widget or full-fidelity product preview occupies the right 5–7 columns.
-  2. *Split:* Balanced 50/50 composition with high-contrast narrative on one side and direct visual evidence on the other.
-  3. *Product-Led:* The live product interface or interactive sandbox leads the canvas; the headline and navigation sit tightly framed around it.
-
----
-
-## 2. Structural Layout Blueprints (4 Compositions)
-
-When building or redesigning a Persuade surface, select a deliberate structural layout matching the product's real content:
-
-```
-┌────────────────────────────────────────────────────────────────────────┐
-│                      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 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.         │
-└────────────────────────────────────────────────────────────────────────┘
-```
-
-- **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)
-
-#### 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 score/ROI card: `rounded-2xl border border-border/80 bg-card p-6 shadow-sm`
-  - Zero equal-weight card grids below.
-
-#### 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`
-
-#### 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-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. Composition Variety & Content Rhythm
-
-- **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.
-- **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.
-
----
-
-## 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").
-  - If quotes or logos are not provided in the project brief, leave them out. A page built around genuine product capabilities is far more persuasive than one filled with synthetic social proof.
-- **Action Semantics:**
-  - Primary CTA must use an imperative verb + noun: `Start Free Trial`, `Download CLI`, `Book Demo` (never generic `Submit` or `Get Started` without context).
-  - Limit the header to at most 1 primary action button and 1 ghost link.
-

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

@@ -1,47 +0,0 @@
-# Surface Mode: Read (Documentation, Knowledge & Articles)
-
-Use for: Documentation, API references, technical blogs, guides, knowledge bases, and changelogs.
-
-> **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
-
-- **Optimal Line Measure:**
-  - Cap prose line length strictly at **65–75 characters per line** (`max-w-prose` / ~680px). Unbounded line lengths cause cognitive fatigue and line-tracking errors.
-  - Generous body line height: `leading-relaxed` (1.625) to `leading-loose` (1.75).
-  - Body font size: 16px minimum (`text-base`). Never drop body prose below 16px on desktop.
-- **Asymmetric Vertical Rhythm:**
-  - Headings must have noticeably more breathing room above than below:
-    - `H2`: `mt-10` to `mt-12`, `mb-3` to `mb-4`.
-    - `H3`: `mt-6` to `mt-8`, `mb-2`.
-  - This anchors the heading visually to the paragraph it introduces, preventing it from floating ambiguously between sections.
-
----
-
-## 2. Navigation & Wayfinding
-
-- **Dual-Rail Navigation:**
-  - *Left Sidebar:* Hierarchical navigation tree (collapsible categories, active section indicator with bold text and subtle left border or background pill).
-  - *Right Rail:* Table of contents ("On this page") highlighting current scroll position via `IntersectionObserver`.
-  - Top breadcrumb path for orientation: `Docs / Authentication / OAuth2 Providers`.
-- **In-Content Anchor Links:**
-  - Headings must carry permalink anchor buttons (`#`) visible on hover, allowing users to copy direct section URLs.
-
----
-
-## 3. Code Blocks & Callout Discipline
-
-- **Code Block Engineering:**
-  - Wrap code blocks in dedicated horizontal scroll containers (`overflow-x-auto`) to prevent viewport blowout.
-  - Provide a one-click "Copy Code" button with visual feedback (`Copied!`).
-  - Monospace font paired with consistent syntax highlighting; never use hardcoded inline style colors.
-- **Callout Hierarchy:**
-  - Use GitHub-style or standard alert cards (`[!NOTE]`, `[!TIP]`, `[!WARNING]`, `[!IMPORTANT]`) with subtle background tints and 1px borders.
-  - Never nest callouts inside callouts or place 3 consecutive callout boxes in a row.
-

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

@@ -1,89 +0,0 @@
-# Structured UI Audit & Redesign Protocols
-
-Modifying an existing interface requires clear intent. Audits must provide actionable engineering findings rather than subjective aesthetic commentary.
-
----
-
-## 1. Scope Classification: The 3 Redesign Depths
-
-Never split the difference into cosmetic polish on a discarded look. Before touching code, explicitly classify the depth of work:
-
-| Depth | Scope & Intent | What Stays Intact | What Changes |
-|---|---|---|---|
-| **`polish`** | Resolve bugs, contrast, microcopy, states. | Layout structure, DOM hierarchy, and design system tokens. | Padding rhythm, WCAG AA contrast, missing state quad (empty/error/loading), focus rings, microcopy brevity, lint fixes. |
-| **`restyle`** | Upgrade design system without breaking layout. | Layout grid, component hierarchy, and DOM structure. | Color palette (60-30-10), typographic scale, corner radiuses, elevation shadows, button and input styles. |
-| **`full`** | Total visual and structural overhaul. | Factual content, data bindings (`$variables`, loops), routes, form handlers. | **Spatial geometry, grid ratios, surface posture, and typography.** Treated as fresh build from subject truth. |
-
----
-
-## 2. The Decoupled Redesign Protocol (For Full Redesigns)
-
-When executing a **Full Redesign** on an existing template or page (`.blade.php`, `.tsx`, `.vue`, `.html`), editing in-place is forbidden because the AI's attention mechanism will anchor to the old DOM structure. Execute this 4-step decoupled sequence:
-
-1. **Step 1: Extract Data Contracts & Factual Inventory**
-   - Parse the incumbent file and extract all dynamic variables, loops, route helpers, form submission endpoints, and real text/assets into a clean data list.
-   - 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 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.
-   - Confirm project test suite and linters pass cleanly.
-
----
-
-## 3. Structured Audit Matrix
-
-When auditing an existing interface or PR, generate a structured findings table categorized by severity:
-
-| Severity | Definition | Examples |
-|---|---|---|
-| `CRITICAL` | Breaks usability, violates WCAG AA contrast floors, or clips content horizontally. | 2.5:1 text contrast, missing `:focus-visible`, button overflow on mobile, form submission with no pending state. |
-| `MAJOR` | Degrades scannability, lacks essential states, or violates design token consistency. | Missing empty or error states, hardcoded hex colors, generic modal instead of inline drawer, layout shift during load. |
-| `MINOR` | Polish deficiency, verbose marketing copy, or suboptimal rhythm. | Verbose button label ("Click here to save"), slight margin imbalance, decorative character banners in code. |
-
-### Audit Output Template
-```markdown
-### UI Audit Findings
-
-| Severity | Location / Element | Finding | Root Cause | Concrete Remediation |
-|---|---|---|---|---|
-| CRITICAL | `BillingTable.tsx:42` | Primary CTA lacks focus ring | `outline-none` stripped default ring | Add `focus-visible:ring-2 focus-visible:ring-primary` |
-| MAJOR | `ProjectList.tsx:110` | Empty state shows 4-paragraph essay | Marketing copy inserted into app view | Replace with 1-sentence description + "Create project" CTA |
-| MINOR | `UserProfile.tsx:18` | Button fixed width `w-[120px]` | Rigid dimension causes German overflow | Change to `px-4 min-w-[5rem]` |
-```
-
----
-
-## 4. Systematic Audit Checklist
-
-Audit screens systematically against four engineering vectors:
-
-### 4.1 Ergonomics & Responsiveness
-- [ ] Render at `375px` width (mobile viewport) and `1280px` (desktop viewport).
-- [ ] Verify zero horizontal scrollbars on mobile (`overflow-x: clip`).
-- [ ] Confirm all touch targets meet minimum $44 \times 44\text{px}$ bounding box.
-- [ ] Verify mobile layout uses `dvh` instead of `vh` to prevent browser chrome clipping.
-
-### 4.2 Accessibility & Contrast (WCAG 2.2 AA)
-- [ ] Check normal text against backgrounds ($\ge 4.5:1$).
-- [ ] Check input borders, active toggles, and large headings ($\ge 3:1$).
-- [ ] 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 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?
-- [ ] Inspect mutation triggers: do buttons lock and display spinners during network latency?
-
-### 4.4 Microcopy & Token Hygiene
-- [ ] Run 50% word reduction sweep across headings and explanatory paragraphs.
-- [ ] Confirm all buttons follow `Verb + Noun` grammar.
-- [ ] Verify zero banned buzzwords (*seamless*, *empower*, *robust*).
-- [ ] Verify zero hardcoded hex codes (`#...`) or arbitrary pixel values in style markup.
-

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

@@ -1,59 +0,0 @@
-# Reflexes & Waivable Defaults Catalog
-
-Grounded in: Hallmark Reflex Gates and Impeccable Refusal Catalog.
-
-> **Definition:** A reflex is an unthinking default that models and junior designers fall into out of habit. Unlike absolute bans (The Floor), reflexes **can be earned** by a specific product brief or technical necessity. However, using a reflex without a deliberate reason is a design defect.
->
-> **The Waiver Protocol:** When an interface genuinely requires one of these patterns, document the operational rationale in code:
-> ```typescript
-> // ASC-WAIVER: [pattern-id] [concrete operational reason why this default was earned]
-> ```
-
----
-
-## 1. Page Scaffold Reflexes
-
-### 1.1 Identical Card Grids (`card-grid-reflex`)
-- **The Reflex:** Defaulting every section to 3 or 4 identical rounded cards with an icon, title, and 2 lines of text.
-- **Why It's a Reflex:** Cards are the lazy container. They flatten information hierarchy, making secondary features look identical in importance to core capabilities.
-- **When Allowed (Waived):** Only when displaying truly homogeneous peer entities (e.g., 3 subscription pricing tiers, or a grid of user avatar cards).
-
-### 1.2 The Hero-Metric Template (`hero-metric-reflex`)
-- **The Reflex:** Placing a giant number (e.g. `99.9%`, `10M+`) next to a tiny label as the primary visual hook.
-- **Why It's a Reflex:** Models use giant numbers as a shortcut for visual mass when they have no real product screenshots or narrative.
-- **When Allowed (Waived):** When the core value proposition is fundamentally a mathematical guarantee (e.g., SLA guarantee on an infrastructure status page).
-
-### 1.3 Modal Dialogs for Simple Tasks (`modal-reflex`)
-- **The Reflex:** Popping a modal dialog for every sub-task, form, or setting.
-- **Why It's a Reflex:** It isolates the task on a blank canvas so the model doesn't have to design layout coexistence.
-- **When Allowed (Waived):** Only when user action is strictly interruptive, irreversible (destructive account deletion), or requires focused authentication.
-
-### 1.4 Dark Mode by Habit (`dark-mode-habit`)
-- **The Reflex:** Making every page dark with indigo accents because it looks "tech".
-- **Why It's a Reflex:** Models over-represent developer tool aesthetics on consumer or business products.
-- **When Allowed (Waived):** When the target user operates in low-light environments (IDE, code editor, video grading, night terminal) or brand guidelines mandate it.
-
----
-
-## 2. Surface & Decoration Reflexes
-
-### 2.1 Side-Stripe Colored Borders (`side-stripe-border`)
-- **The Reflex:** Adding `border-l-4 border-blue-500` to random cards, list items, or callouts.
-- **Why It's a Reflex:** A cheap visual crutch to make a plain card look designed without establishing real typography or spacing.
-- **When Allowed (Waived):** High-priority operational system alerts (info/warn/error alert banners).
-
-### 2.2 Hard Offset Block Shadows (`hard-offset-shadow`)
-- **The Reflex:** Applying `box-shadow: 4px 4px 0 #000` to standard SaaS components.
-- **Why It's a Reflex:** Adopting a Neo-Brutalist costume on an interface that has no other brutalist attributes.
-- **When Allowed (Waived):** Authentic, cohesive Neo-Brutalist design systems where heavy typography, bold line art, and high contrast coexist throughout.
-
-### 2.3 Zero-Offset Colored Glows (`zero-offset-glow`)
-- **The Reflex:** Slapping `shadow-[0_0_20px_rgba(...)]` behind buttons, icons, or cards.
-- **Why It's a Reflex:** Glow is an attention amplifier. Sprayed everywhere, it amplifies nothing and marks the interface as AI-generated.
-- **When Allowed (Waived):** Maximum 1 focal element on a dark entertainment or gaming canvas where glow simulates an actual light source.
-
-### 2.4 Monospace Font as Technical Costume (`mono-costume`)
-- **The Reflex:** Using monospace fonts on generic labels, headers, or buttons to simulate a "developer tool" vibe.
-- **Why It's a Reflex:** Monospace has low reading legibility for extended prose.
-- **When Allowed (Waived):** Literal code snippets, terminal commands, hashes, IP addresses, or data matrices requiring vertical character alignment.
-

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

@@ -1,148 +0,0 @@
-# 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 Four Essential UI States
-
-Every data-driven interface exists in one of four states:
-
-```
-               ┌─────────────┐
-               │ 1. LOADING  │
-               └──────┬──────┘
-                      │
-       ┌──────────────┴──────────────┐
-       ▼                             ▼
-┌─────────────┐               ┌─────────────┐
-│  2. EMPTY   │               │ 3. POPULATED│
-└─────────────┘               └─────────────┘
-       │                             ▲
-       │        ┌─────────────┐      │
-       └───────►│  4. ERROR   │──────┘ (Retry)
-                └─────────────┘
-```
-
----
-
-## 2. State 1: Proportional Loading Skeletons
-
-Avoid generic full-screen spinners that cause severe Layout Shift (CLS) when content loads. Skeletons must mimic the exact bounding box and proportions of the expected data.
-
-```html
-<!-- Table Skeleton: Matches row height and column widths -->
-<div class="space-y-3 animate-pulse" aria-busy="true" aria-label="Loading audit logs">
-  <div class="h-8 bg-muted rounded w-full"></div>
-  <div class="h-12 bg-muted/60 rounded w-full"></div>
-  <div class="h-12 bg-muted/60 rounded w-full"></div>
-  <div class="h-12 bg-muted/60 rounded w-full"></div>
-</div>
-```
-
-- Match font size heights: `h-4` for body lines, `h-6` for headings, `h-10` for action buttons.
-- Constrain width variance: alternate `w-3/4`, `w-1/2`, `w-5/6` on multi-line text to mirror natural paragraph shapes.
-
----
-
-## 3. State 2: Concise Actionable Empty States
-
-Empty states occur when a query returns zero records or an entity has not been initialized.
-
-- **Banned:** Flowery essay copy ("It looks like you haven't created any projects yet! Don't worry, getting started is easy and fun...").
-- **Enforced:** 1-sentence factual description followed by a primary creation trigger:
-
-```html
-<div class="py-12 px-4 text-center rounded-lg border border-dashed border-border">
-  <div class="mx-auto w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground mb-3">
-    <svg class="w-5 h-5" aria-hidden="true">...</svg>
-  </div>
-  <h3 class="text-sm font-semibold text-foreground">No webhooks configured</h3>
-  <p class="mt-1 text-xs text-muted-foreground max-w-sm mx-auto">
-    Endpoints will receive real-time HTTP POST notifications when events occur.
-  </p>
-  <div class="mt-4">
-    <button type="button" class="px-3 py-1.5 bg-primary text-primary-foreground text-xs font-medium rounded-md">
-      Create webhook endpoint
-    </button>
-  </div>
-</div>
-```
-
----
-
-## 4. State 3: Error States with Inline Retry
-
-Operational errors must be surfaced with actionable context. Never swallow errors silently or display opaque error codes without a recovery path.
-
-```html
-<div class="p-4 rounded-lg border border-destructive/30 bg-destructive/5 text-foreground flex items-start gap-3">
-  <svg class="w-5 h-5 text-destructive shrink-0 mt-0.5" aria-hidden="true">...</svg>
-  <div class="flex-1 text-xs space-y-1">
-    <p class="font-medium text-destructive">Failed to load deployment metrics</p>
-    <p class="text-muted-foreground">The telemetry service timed out after 5,000ms. Check network connection or retry.</p>
-    <div class="pt-2">
-      <button type="button" class="px-2.5 py-1 bg-background border border-border text-foreground rounded text-xs hover:bg-muted font-medium">
-        Retry query
-      </button>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## 5. Mutation Action Feedback: The Pending Lock
-
-Mutations (create, update, delete, trigger) must give instantaneous feedback to prevent race conditions and double-submission.
-
-```tsx
-// React example for mutation feedback
-function DeployButton({ onDeploy }: { onDeploy: () => Promise<void> }) {
-  const [isPending, setIsPending] = useState(false);
-
-  const handleClick = async () => {
-    if (isPending) return;
-    setIsPending(true);
-    try {
-      await onDeploy();
-      toast.success("Deployment queued successfully");
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Deployment failed");
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      disabled={isPending}
-      onClick={handleClick}
-      className="inline-flex items-center gap-2 px-3 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-      {isPending && <Spinner className="w-4 h-4 animate-spin" />}
-      <span>{isPending ? "Queuing deployment..." : "Deploy to production"}</span>
-    </button>
-  );
-}
-```
-
----
-
-## 6. Localized Error Boundaries
-
-Never allow an error in an auxiliary widget (e.g. recent activity feed, analytics graph) to crash the entire application shell or parent form.
-
-Wrap distinct layout sections in localized error boundaries:
-```tsx
-<AppShell>
-  <ErrorBoundary fallback={<TelemetryFallbackError />}>
-    <RealtimeTelemetryChart />
-  </ErrorBoundary>
-  <ErrorBoundary fallback={<TableFallbackError />}>
-    <DeploymentsTable />
-  </ErrorBoundary>
-</AppShell>
-```
-