@ryuenn3123/agentic-senior-core 6.16.6 → 6.17.0

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

@@ -1,55 +0,0 @@
-# Craft: Motion & Micro-Interactions
-
-Grounded in: W3C Motion Specifications, Google Material Motion, and Apple HIG Fluid Interfaces.
-
----
-
-## 1. The Core Motion Philosophy: "One Authored Moment"
-
-- **Choreography Over Chaos:**
-  - Limit motion to **one authored focal moment** per view (e.g. an interactive slider responding smoothly, or a key metric settling into place).
-  - Never scatter uncoordinated entrance animations across every section. Staggered fade-ins on 10 consecutive cards signal generic AI generation and slow down task execution.
-- **Ease-Out from a Visible Default:**
-  - Content should be visible and readable by default if scripts or animation fail to execute.
-  - Motion must feel natural and physical: fast deceleration / exponential ease-out (`cubic-bezier(0.16, 1, 0.3, 1)`). Avoid linear or cartoonish bouncy transitions.
-
----
-
-## 2. Technical Performance Floor
-
-- **The Absolute Ban on `transition: all`:**
-  - Never write `transition: all` or `transition-all` in production CSS/Tailwind.
-  - `transition: all` forces the browser engine to recalculate geometry, repaints, and layout costs on every frame whenever any property shifts.
-  - **The Law:** Target only specific, GPU-accelerated compositing properties:
-    ```css
-    /* Good */
-    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms ease-out;
-    ```
-    ```html
-    <!-- Good Tailwind -->
-    <button class="transition-colors duration-150 active:scale-[0.98]">
-    ```
-- **Never Animate Layout Properties:**
-  - Never animate `width`, `height`, `top`, `left`, `margin`, or `padding`. Animate `transform: scale()` or `transform: translate3d()` instead.
-
----
-
-## 3. Accessibility & Reduced Motion
-
-- **Mandatory Reduced Motion Fallback:**
-  - Every CSS animation and transition must respect the user's operating system preferences:
-    ```css
-    @media (prefers-reduced-motion: reduce) {
-      *, ::before, ::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-      }
-    }
-    ```
-    ```html
-    <!-- Tailwind -->
-    <div class="transition-transform duration-200 motion-reduce:transition-none">
-    ```
-

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

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

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

@@ -1,54 +0,0 @@
-# Craft: Typography & Typesetting
-
-Grounded in: Refactoring UI, Bringhurst's The Elements of Typographic Style, and W3C Type Best Practices.
-
----
-
-## 1. Font Roles & Typographic Contrast
-
-- **Strict Dual-Role System:**
-  - *Display Role:* Conveys brand character and emotional tone (used for H1, hero headlines, large section markers).
-  - *Body/Functional Role:* Maximizes optical legibility at scale (used for paragraphs, tables, form inputs, button labels, navigation).
-  - Never mix more than two font families on a single screen unless one is a dedicated monospace face for literal code.
-- **Weight Contrast Before Size Inflation:**
-  - Build strong typographic hierarchy by varying font weights (`font-bold` vs `font-normal`) and contrast tokens (`text-foreground` vs `text-muted-foreground`) before jumping to oversized font sizes.
-  - A clean 24px `font-bold` title paired with a 14px `text-muted-foreground` subtitle establishes clearer hierarchy than inflating the title to 48px with identical gray values.
-- **The Generative Scale Contrast Floor ($Display \ge 3.5\times Body$):**
-  - On landing, marketing, and hero surfaces (`Persuade`), the primary headline must establish an optical scale step over body text:
-    - Target: $Display \ge 3.5\times Body$ (e.g. `text-5xl` to `text-7xl` [48px–72px] display vs `text-base` [16px] or `text-sm` [14px] body).
-    - Heading leading must be tight: `leading-[1.05]` to `leading-tight`.
-    - An under-scaled heading ($< 2.5\times$ body, such as 24px H1) collapses optical gravity and makes marketing pages look like internal memo forms.
-
----
-
-## 2. Tracking, Leading & Measure
-
-- **Tracking (Letter-Spacing) Floor:**
-  - Large display headings (> 32px): Tighten tracking slightly (`tracking-tight` / `-0.02em` to `-0.03em`).
-  - **The -0.04em Floor:** Never track tighter than `-0.04em`. Extreme negative tracking collides letterforms and destroys legibility.
-  - Body text (14px–18px): Standard tracking (`tracking-normal` / `0em`). Never tighten body prose.
-  - Uppercase tags/codes: Subtle positive tracking (`tracking-wider` / `+0.05em`).
-- **Leading (Line-Height) Matching:**
-  - Large headings: `leading-tight` (1.1 to 1.25). Loose leading on large display text creates disjointed lines.
-  - Body prose: `leading-relaxed` (1.6 to 1.75). Tight leading on body text causes reading fatigue.
-- **Line Measure Floor:**
-  - Cap continuous reading prose at **65–75 characters per line** (`max-w-prose` / ~680px).
-
----
-
-## 3. Tabular Numbers & Numeric Craft
-
-- **Tabular Numerals (`tabular-nums`):**
-  - All numbers that change, compare, or align in columns **MUST** carry `tabular-nums` (via CSS `font-variant-numeric: tabular-nums` or Tailwind class `tabular-nums`).
-  - Applies to: prices, balances, data table columns, timers, percentages, and metrics.
-  - *Distinction from font-mono:* Use `tabular-nums` with the standard sans-serif face. Do not force `font-mono` on numbers unless the numbers represent technical addresses, hashes, or code tokens.
-
----
-
-## 4. The Absolute Ban on Eyebrows & Tracked Heading Kickers
-
-- **Zero Eyebrow Labels:**
-  - Never place a small, uppercase, tracked kicker label above a heading (e.g. `FEATURES`, `WHAT WE DO`, `WHY CHOOSE US`).
-  - An eyebrow is the defining hallmark of generic AI template generation. It adds zero informational value and insults the reader's intelligence.
-  - Let the heading carry its own weight. Delete the kicker entirely.
-

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

@@ -1,168 +0,0 @@
-# Anti-Convergence & Visual Divergence
-
-Second-order AI design slop occurs when models converge on the same "safe" contemporary aesthetic: dark mode by default, 3 identical rounded cards, purple/indigo gradients, floating pill badges, and generic hero text.
-
-Distinct engineering craft rejects pre-baked template habits in favor of material-derived identity.
-
----
-
-## 1. The Mirror Test
-
-Before rendering a visual layout, apply the Mirror Test:
-
-> *"Would an adjacent, generic prompt from another user receive this exact combination of layout, typography, and card containers?"*
-
-If the answer is yes:
-1. Break one fundamental structural assumption (e.g., if you naturally reached for a 3-card grid, replace it with a dense comparison table or an asymmetric 70/30 narrative layout).
-2. Shift the focal anchor from generic text to the project's concrete material (a live code terminal, real data payload, interactive simulator, or high-fidelity architecture diagram).
-
----
-
-## 2. Material-First Architecture
-
-Template-first design forces real content into arbitrary boxes. Material-first design derives the container from the inventory of existing data.
-
-### 2.1 The Material Inventory Protocol
-Inspect what real assets and content actually exist before writing markup:
-- **Available Material:**
-  - Are there real numbers and metrics? $\to$ Display an authentic data table with sorting/filtering.
-  - Is there actual CLI or API interaction? $\to$ Lead with a live syntax-highlighted code block or terminal view.
-  - Are there real product screenshots? $\to$ Full-bleed product stage with zoom/interactive callouts.
-- **Absent Material:**
-  - No customer quotes? $\to$ Zero fake testimonial sliders or generic placeholder personas.
-  - No partner companies? $\to$ Zero generic "Trusted by 10,000+ teams" logo walls.
-  - No enterprise compliance certifications? $\to$ Zero unverified security badges.
-
----
-
-## 3. Divergence Axes: How to Build Character
-
-When establishing the visual language for a new product, vary decisions along four distinct axes:
-
-```
-                   Axis 1: Layout Posture
-          (Symmetric Grid  ◄──────►  Asymmetric Split / Rail)
-                                │
-   Axis 2: Typographic Voice    │    Axis 3: Surface Tone
-(Technical Monospace / Geometric ◄┼► Editorial Serif / Humanist)
-                                │
-                   Axis 4: Density Scale
-          (Spacious & Airy  ◄──────►  Terminal-Dense Compact)
-```
-
-### 3.1 Layout Posture
-- **Asymmetric Split:** 65% primary visual canvas or working editor, 35% contextual rail or inspector.
-- **Single-Column Narrative:** Focused long-form reading measure with side-margin notes (Tufte style).
-- **Dense Data Stream:** Compact horizontal list rows separated by hairline borders rather than boxed cards.
-
-### 3.2 Typographic Character
-Diverge from the generic "Inter on everything" default by matching font pairing to the product domain:
-- **Developer / Systems Engineering:** Modern neo-grotesque heading + technical monospace code/metrics.
-- **Analytical / Financial / Publishing:** Editorial serif heading (`Newsreader`, `Fraunces`, `Instrument Serif`) paired with crisp sans-serif body (`Geist Sans`, `Plus Jakarta Sans`).
-- **High-Velocity Productivity Tool:** Compact sans-serif with tight tracking and high x-height (`DM Sans`, `General Sans`).
-
-### 3.3 Surface Tone
-- **Warm Editorial:** Cream or paper-tinted backgrounds (`#faf9f6`), deep ink text (`#1c1917`), subtle warm borders.
-- **Technical Monolith:** Deep slate or obsidian canvas (`#090a0f`), cool steel borders (`#1e2230`), crisp laser accents.
-- **High-Key Precision (Clean Light):** Stark white canvas (`#ffffff`), zinc-900 typography, zero shadow elevation (pure 1px border geometry).
-
----
-
-## 4. Single Signature Element
-
-A memorable, production-grade interface requires exactly **one** standout signature interaction or visual focal point. Attempting to make every button and card special produces visual noise.
-
-Examples of strong signature elements:
-1. **Interactive calculation slider:** Allows prospective users to adjust sliders and immediately see concrete pricing or ROI recalculations.
-2. **Live terminal sandbox:** Interactive terminal tab allowing command execution or simulated payload inspection.
-3. **Master status indicator:** Distinct physical-style LED or pulsing node visualizing live system cluster health.
-4. **Architectural node diagram:** Interactive SVG graph mapping dependencies or data flows.
-
----
-
-## 5. Common Layout & Aesthetic Pitfalls
-
-Generic generative output typically falls into predictable styling clusters:
-
-```
-┌────────────────────────────────────────────────────────┐
-│           GENERIC LAYOUT CLUSTERS & HABITS             │
-├────────────────────────────────────────────────────────┤
-│ 1. The Gradient & Glow Default                         │
-│ Violet/cyan linear gradients, diffuse neon halos,      │
-│ identical 3-card rows with generic icon boxes.         │
-├────────────────────────────────────────────────────────┤
-│ 2. The Pseudo-Technical Bento                          │
-│ Uppercase tracked-out labels, pill badges, and dark    │
-│ bento grids applied indiscriminately to all products.  │
-├────────────────────────────────────────────────────────┤
-│ 3. The Unprompted Editorial Default                    │
-│ Yellow-cream backgrounds (#FDFBF7), oversized italic   │
-│ serifs, and artificial statutory broadsheet dividers.  │
-├────────────────────────────────────────────────────────┤
-│ 4. Misplaced Monospace & Terminal Containers           │
-│ Terminal window frames, prompt symbols ($), and ASCII  │
-│ charts injected into ordinary non-developer workflows. │
-├────────────────────────────────────────────────────────┤
-│ 5. The Over-Constrained Wireframe                      │
-│ Rigid 1px hairline grids and dense tables forced onto  │
-│ public homepages, stripping all visual pacing.         │
-└────────────────────────────────────────────────────────┘
-```
-
-### 5.1 Excessive Serif & Parchment Surfaces
-Editorial typography must serve products with genuine long-form prose or literary context:
-- **Terracotta & Cream Monoculture:** Warmth must come from low-chroma neutral tones, authentic imagery, or deep ink—not default yellow-cream backgrounds paired with rust orange.
-- **Oversized Italic Serif Display:** Do not use italic serif display as a superficial shortcut to "luxury" or "premium" unless the client's actual brand specifically requires it.
-- **Artificial Broadsheet Grids:** Dense hairline rules dividing zero-radius columns to mimic an archival newspaper is an artificial costume. Structure must emerge from spatial scale and tonal contrast.
-- **Performative Metadata:** Omit decorative index numbering (`01`, `02`, `(001)`), fake coordinates (`37.77° N`), and version stamps (`©2026 — Scroll`) that convey zero operational data.
-
-### 5.2 Misplaced Monospace & Terminal Containers
-When models attempt to convey technical competence, they frequently force developer aesthetics onto general software:
-- **No Non-Developer Terminals:** Never enclose ordinary educational, institutional, or business data inside a fake terminal window with prompt symbols (`$`, `>`).
-- **No ASCII Charts or Brackets:** Never generate ASCII art radar charts (`/\`, `[■■■□□]`), pseudo-status brackets (`[STATUS: 112]`), or terminal line-drawings. Use semantic HTML5 `<progress>` elements, styled SVG bars, and clean tabular typography.
-- **Plain Technical Vocabulary:** Never label normal administrative or assessment features with exaggerated jargon ("telemetry console", "neural assessment engine"). Use the genuine domain terms established in the codebase.
-
-### 5.3 Over-Constrained Border Dividers
-When avoiding card grids, models often collapse into the opposite extreme: wrapping every entity and summary item in continuous `border divide-y` matrices:
-- **Selective Borders:** Restrict dense table borders to genuine tabular datasets. Never force committee bios, team rosters, or public feature overviews into spreadsheet cell grids (`border-t border-l border-r border-b`).
-- **Surface Contrast Rhythm:** Separate public sections with generous vertical space (`py-16 lg:py-24`) and full-bleed background shifts (e.g., transition from deep brand grounding to crisp light paper), not continuous wireframe border lines.
-- **Direct Technical Prose:** Deliver clean, production-ready design decisions directly without citing internal rule names or theoretical frameworks.
-
----
-
-## 6. Substance Over Restraint (Avoiding Sterile Layouts)
-
-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 reviewers rightly prefer a rich interface over an empty void.
-
-### 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 boxes, ground layouts with full-bleed background tone shifts (e.g., transitioning from a clean light canvas into a deep, tinted section floor).
-3. **Authentic Interface Fragments:** For software products, construct working, interactive HTML/CSS UI components (a data table with real rows, an interactive calculation filter, or live code tabs) rather than empty illustrations or placeholder diagrams.
-
----
-
-## 7. Layout Containers vs. Discrete Cards
-
-A common flaw in generated layouts is wrapping every page section in floating rounded card boxes.
-
-### 7.1 Container Roles
-Because generative models encounter millions of component snippets, they frequently wrap top-level sections inside:
-`<div class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">`
-
-When applied across a full screen, the layout collapses into disconnected white boxes floating on a grayish background.
-
-### 7.2 Structural Rules: Sections vs. Discrete Items
-- **Cards are strictly for discrete, interchangeable, dynamic items:** Product catalog grids, kanban task cards, or gallery thumbnails.
-- **Forbidden for Structural Wrappers:** Never wrap an application header, tab bar, left workflow rail, or primary data table in separate, floating rounded boxes.
-
-### 7.3 Unified Surface Discipline
-In professional software:
-1. **Single Cohesive Plane:** The application is housed in a unified spatial sheet or integrated rails, not an archipelago of floating islands.
-2. **Hairline Boundaries:** Spatial separation is established through clean dividers (`border-r border-border`, `divide-y divide-border`) and subtle background tonal shifts (`bg-background` $\to$ `bg-card` $\to$ `bg-muted`).
-3. **High Data-to-Padding Ratio:** Tables must not be padded with bloated empty space. Use compact, scannable cell heights ($10\text{px}–14\text{px}$ vertical padding) with tabular monospace figures (`font-mono tabular-nums`).
-
-

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

@@ -1,115 +0,0 @@
-# Mobile Ergonomics & Responsive Reflow
-
-Mobile interfaces are governed by physical human constraints: thumb reach, screen boundaries, variable virtual keyboards, and shifting viewport chrome.
-
----
-
-## 1. Viewport Units: The Dynamic Viewport Rule
-
-Mobile browsers dynamically hide and reveal top address bars and bottom navigation chrome during scrolling.
-
-- **Banned:** `height: 100vh` or `h-screen`. Causes bottom controls to hide under the browser navigation bar on iOS Safari and Android Chrome.
-- **Enforced:** `min-height: 100dvh` (dynamic viewport height) or modern fallback cascade:
-
-```css
-.full-screen-container {
-  min-height: 100vh;   /* Fallback for legacy webviews */
-  min-height: 100dvh;  /* Dynamic viewport for modern browsers */
-}
-```
-
-In Tailwind CSS: `min-h-dvh` or `h-dvh`.
-
----
-
-## 2. Touch Target Geometry: 44px Floor & 8px Clearance
-
-Every interactive element on a touchscreen must provide a physical target large enough for human fingertip variance without accidental trigger of adjacent controls (WCAG 2.5.5 / 2.5.8).
-
-- **Minimum bounding box:** 44 × 44 physical pixels (or CSS pixels at standard DPI).
-- **Minimum clearance:** $\ge 8\text{px}$ between adjacent interactive tap targets.
-
-### Visual Size vs. Hit Target
-If an icon or button must visually appear smaller than 44px (e.g. a 20px close `×` button), expand the tap target via pseudo-elements or padding:
-
-```html
-<!-- Visual size 20px, hit target 44px -->
-<button 
-  type="button" 
-  class="relative p-3 -m-3 inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
-  aria-label="Close dialog"
->
-  <svg class="w-5 h-5" aria-hidden="true">...</svg>
-</button>
-```
-
----
-
-## 3. Zero Horizontal Scroll Leaks
-
-Unintended horizontal scrolling destroys mobile ergonomics.
-
-1. **Root Containment:**
-   Set `overflow-x: clip` on the outermost app shell or `body`. Prefer `clip` over `hidden` because `clip` prevents horizontal spill without breaking `position: sticky`.
-
-2. **Contain Preformatted and Table Content:**
-   Never let wide tables or code blocks stretch the page width:
-   ```html
-   <!-- Code block isolation -->
-   <div class="w-full max-w-full overflow-x-auto rounded-md border border-border">
-     <pre class="p-4 text-xs"><code>...</code></pre>
-   </div>
-
-   <!-- Table container isolation -->
-   <div class="w-full max-w-full overflow-x-auto">
-     <table class="w-full min-w-[600px] text-left">...</table>
-   </div>
-   ```
-
-3. **Break Long Strings:**
-   Apply `break-words` or `overflow-wrap: anywhere` on user-generated content, URLs, commit hashes, and file paths.
-
----
-
-## 4. Mobile Reflow Strategies
-
-Desktop density cannot be shrunk linearly to fit mobile screens; it must be refactored into mobile-native structures.
-
-### 4.1 Dense Table to Stacked Card Reflow
-On screens `< 640px` (`sm:` breakpoint), convert dense multi-column tabular rows into stacked card summaries:
-
-```html
-<!-- Responsive Table Reflow -->
-<div class="block sm:hidden space-y-3">
-  <!-- Mobile Card Representation -->
-  <div class="p-4 rounded-lg border border-border bg-card">
-    <div class="flex items-center justify-between font-medium">
-      <span>INV-2048</span>
-      <span class="text-xs px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-500">Paid</span>
-    </div>
-    <div class="mt-2 text-sm text-muted-foreground flex justify-between">
-      <span>Acme Corp</span>
-      <span class="font-mono tabular-nums text-foreground">$1,200.00</span>
-    </div>
-  </div>
-</div>
-
-<div class="hidden sm:block overflow-x-auto">
-  <table class="w-full">
-    <!-- Desktop Table Representation -->
-  </table>
-</div>
-```
-
-### 4.2 The Thumb Zone & Sticky Action Bars
-Position high-frequency primary actions within natural one-handed thumb sweep:
-- Place primary conversion buttons or form submission bars at the bottom of the viewport on mobile:
-```html
-<div class="sm:static fixed bottom-0 inset-x-0 p-4 bg-background/80 backdrop-blur-md border-t border-border z-20">
-  <button class="w-full py-3 bg-primary text-primary-foreground font-medium rounded-lg">
-    Confirm order ($48.00)
-  </button>
-</div>
-```
-- Account for iOS bottom home indicator safe area using `pb-[env(safe-area-inset-bottom,1rem)]`.
-

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

@@ -1,31 +0,0 @@
-# Surface Mode: Experience (Showcase, Media & Portfolios)
-
-Use for: Creative portfolios, design galleries, interactive product demos, and media showcases.
-
-> **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
-
-- **Receding Interface Chrome:**
-  - Navigation headers, footers, and control sidebars should be lightweight, semi-transparent or edge-aligned, maximizing the uninhibited canvas area.
-  - Background surface: Neutral darkroom or gallery tint (`bg-neutral-950` or warm museum white `bg-stone-50`) chosen specifically to elevate the subject's colors without competition.
-- **Full-Bleed Media Presentation:**
-  - Let high-resolution media fill containers naturally with `object-cover` or `object-contain`.
-  - Provide full-screen zoom or modal lightbox views for high-resolution visual inspection.
-
----
-
-## 2. Interaction & Micro-Choreography
-
-- **Tactile Exploration:**
-  - Interactive previews, drag-to-compare sliders, or spatial hover panning.
-  - Smooth, seamless transitions between overview grid cards and full-fidelity artifact inspection.
-- **Restraint Over Distraction:**
-  - Never add cartoonish particle effects, cursor trails, or autoplaying audio. The craftsmanship of the showcased work is the emotional center.
-