@ryuenn3123/agentic-senior-core 6.16.6 → 6.17.0

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

@@ -1,167 +0,0 @@
-# UX Writing, Microcopy & Internationalization (i18n)
-
-UI microcopy is an operational tool, not marketing collateral. Every word on screen either reduces user uncertainty or costs attention.
-
----
-
-## 1. The 50% Reduction Rule
-
-Draft the copy, then delete half the words without losing meaning. Remove polite throat-clearing, redundant labels, and ornamental adjectives.
-
-| Verbose / Conversational | Direct Operational Copy | Rationale |
-|---|---|---|
-| "In order to get started, please enter your email address below." | "Email address" | Input labels require no preamble. |
-| "Are you sure you want to delete this repository? This action cannot be undone." | "Delete `octocat/hello-world`? This permanently removes all code and history." | Name the exact target and concrete consequence. |
-| "We couldn't seem to find any results matching your search criteria." | "No results for \"billing\"." | State the outcome, mirror the query. |
-| "Successfully updated your preferences." | "Preferences saved." | Past participle, 2 words, passive verb eliminated. |
-| "Click here to view our comprehensive documentation." | "View documentation →" | Never write "click here"; state the destination. |
-
----
-
-## 2. Action Controls: Verb + Noun Grammar
-
-Buttons and mutation triggers must name their concrete target. Never use ambiguous lone affirmations.
-
-- **Banned:** `Submit`, `OK`, `Yes`, `Proceed`, `Continue`, `Go`, `Done`.
-- **Enforced:** `Create project`, `Invite member`, `Deploy branch`, `Delete webhook`, `Export CSV`.
-
-Exception: Standard multi-step navigation controls in fixed wizards (`Back`, `Next`) where the step indicator supplies the context.
-
----
-
-## 3. Arithmetic Copy Budgets & The Argument-First Protocol
-
-### 3.1 Arithmetic Budgets
-Constraint is arithmetic; enforce before falling in love with a sentence:
-- **Hero Headline Budget:** Must fit in **two lines or fewer** across all viewports.
-  - Mobile (390px): $\le 32$ characters ($\sim 4$–$5$ words).
-  - Desktop (1280px): $\le 42$ characters ($\sim 5$–$6$ words).
-  - Use `text-wrap: balance` and intentional `<br>` tags to avoid single-word orphans.
-- **Supporting Line Budget:** Exactly **1 sentence**, at most **22 words**.
-  - Directly states concrete function and audience.
-  - Never repeats or paraphrases headline words.
-- **First-Viewport Word Budget:** Maximum **80 words** total across the first screen.
-
-### 3.2 The Argument-First Protocol
-Before writing any HTML/JSX markup, outline the page as a sequence of claims with verifiable proofs:
-```text
-1. Claim: Three-legged oak stool, made to order.      → Proof: High-res macro photography of stool.
-2. Claim: Each seat cut from single solid board.      → Proof: 3 close-ups of continuous wood grain.
-3. Claim: Shipped in 6 weeks with tracking.           → Proof: Verifiable production stages schedule.
-4. Claim: Costs $240, delivered by the maker.         → Proof: Exact price figure + Order button.
-```
-*Rule:* Any section that lacks a factual claim or verifiable proof is filler—delete it immediately.
-
----
-
-## 4. AI Cadences & Marketing Buzzword Blacklist
-
-### 4.1 Banned AI Cadence Formulas
-Language models fall into statistical average patterns; recognize and refuse them:
-1. **The Mad-Lib:** *"The [AI-powered/next-gen] platform for modern teams."*
-2. **The Tricolon:** *"Fast. Simple. Secure."* or *"Plan. Build. Ship."*
-3. **The Rebuttal:** *"It’s not just a tool, it’s a workflow."* / *"More than a framework."*
-4. **The Preamble Throat-Clearing:** *"In today’s fast-paced digital world..."* / *"Built for modern teams..."*
-5. **The Em-Dash Habit:** Using multiple em-dashes (`—`) in a single paragraph. Use a full stop.
-
-### 4.2 Banned Marketing Buzzwords
-The following adjectives and verbs are banned across all surfaces:
-`seamless`, `seamlessly`, `empower`, `empowering`, `robust`, `effortless`, `effortlessly`, `cutting-edge`, `game-changing`, `elevate`, `unlock`, `unleash`, `dive in`, `delightful`, `next-generation`, `supercharge`, `blazing-fast`.
-
-When tempted to write an adjective, state the measurable property instead:
-- Instead of: *"A robust, blazing-fast pipeline."*
-- Write: *"Builds complete in under 45 seconds with isolated caching."*
-
----
-
-## 5. Actionable Error Messages & Recovery
-
-An operational error message must never produce a dead end or display raw internal stack traces. Every error must answer three questions:
-1. **What failed:** Direct statement of the blocked action.
-2. **Why:** Factual cause (if actionable and known).
-3. **How to recover:** Concrete button or path to unblock the user.
-
-| Raw / Unhelpful Error | Actionable Engineering Copy | Recovery Path |
-|---|---|---|
-| "Error 413: Payload too large." | "File exceeds the 25MB limit." | "Choose a smaller file" CTA |
-| "Failed to connect to server." | "Unable to reach database. Changes saved locally." | "Retry connection" button |
-| "Invalid credentials." | "Incorrect password for user@example.com." | "Reset password →" link |
-
----
-
-## 6. Single-Language Consistency & Localization
-
-Interfaces and developer communications must maintain strict language purity without robotic or literal translation awkwardness.
-
-### 6.1 Strict Monolingual Surface
-Choose one language for the entire surface and enforce it across headings, labels, errors, and tooltips:
-- **English UI:** All copy, actions, and timestamps in English.
-- **Indonesian UI:** All copy, actions, and timestamps in natural, standard Indonesian (KBBI/PUEBI).
-
-### 6.2 Codebase Lexicon Supremacy (Anti-Hallucinated Naming)
-Before naming navigation menus, section titles, table columns, or actions in an existing codebase, inspect the project's models, controllers, and view variables:
-- **Respect established domain terms:** Always adopt the exact nouns established in the repository's models, routes, and translations. Never substitute recognized project nouns with unprompted external synonyms.
-- Use the actual terminology the organization and developers already use in their schema and UI.
-
-### 6.3 Ban Robot Translations & Meta-Jargon Parens
-In localized interface and review text:
-1. **No clumsy literal translations of English layout terms:**
-   - Do NOT translate *drawer* into awkward calques; write natural native labels (e.g. "panel samping" or "detail").
-   - Do NOT translate *modal* literally; write natural functional terms (e.g. "dialog" or "popup").
-   - Do NOT translate *hairline border* as literal anatomy; write "garis tipis 1px" or "garis pemisah".
-   - Do NOT translate layout stages into literal theatrical terms; write "layout dua kolom" or "area utama".
-2. **No parenthetical English jargon leaks:**
-   - Never write sentences that append raw English terms in parentheses as translation glosses.
-   - Write clear, natural localized prose without meta-framework disclaimers.
-
-### 6.4 Ban Hybrid Neologisms
-Never prefix local grammatical affixes onto foreign language stems:
-
-| Hybrid Neologism (Banned) | Standard Native Alternative | Pure English Alternative |
-|---|---|---|
-| `di-submit` | `Dikirim` / `Diserahkan` | `Submitted` |
-| `meng-generate` | `Menghasilkan` / `Membuat` | `Generating` |
-| `di-cancel` | `Dibatalkan` | `Cancelled` |
-| `meng-handle` | `Menangani` | `Handling` |
-| `di-approve` | `Disetujui` | `Approved` |
-| `meng-update` | `Memperbarui` | `Updating` |
-| `di-delete` | `Dihapus` | `Deleted` |
-| `me-restore` | `Memulihkan` | `Restoring` |
-
----
-
-## 7. Dynamic Text Expansion & Internationalization Layout
-
-Text length varies drastically between languages:
-- German and Dutch expand +20% to +35% compared to English.
-- Indonesian expands +15% to +30% for verb-rich phrases.
-- Japanese and Chinese are visually dense and vertically taller.
-
-### 7.1 Layout Rules for Expanding Strings
-1. **Never set fixed widths on action buttons:**
-   ```html
-   <!-- BANNED: clips or overflows in German/Indonesian -->
-   <button class="w-[120px] truncate">Save settings</button>
-
-   <!-- ENFORCED: content-driven width with min-width safety -->
-   <button class="min-w-[5rem] px-4 py-2">Save settings</button>
-   ```
-
-2. **Support multi-line wrapping for headings and table headers:**
-   - Avoid `white-space: nowrap` on containers holding localized strings unless horizontally scrolling is explicitly designed.
-   - Use `hyphens: auto` or flex wrapping on dense metric cards.
-
-3. **Isolate placeholders and interpolated values:**
-   - Never assemble sentences by concatenating translated strings:
-   ```javascript
-   // BANNED: grammar breaks in right-to-left or verb-final languages
-   const msg = t("Deleted") + " " + count + " " + t("items");
-
-   // ENFORCED: parameterized translation tokens
-   const msg = t("deleted_items_count", { count });
-   ```
-
-4. **Numeric and Date Formatting:**
-   - Use `Intl.NumberFormat` and `Intl.DateTimeFormat` with the active locale.
-   - Never hardcode date patterns (`MM/DD/YYYY` fails in locales expecting `DD/MM/YYYY` or `YYYY-MM-DD`).
-

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

@@ -1,69 +0,0 @@
-# Craft: Themed Browser Surfaces
-
-Grounded in: Impeccable Browser Surfaces Standard and Web Platform Craft.
-
-> **Why This Matters:** The parts of the viewport you did not author still carry the design. Text selection, input carets, custom scrollbars, and focus rings all ship with unstyled browser defaults that belong to no design system. Theming these surfaces from the project palette is the clearest signal of intentional human craft.
-
----
-
-## 1. Text Selection Highlight
-
-- **Theme the Selection:**
-  - Standard browser selection (harsh electric blue) frequently clashes with custom brand palettes.
-  - Apply semantic selection tokens matching the brand accent:
-    ```css
-    ::selection {
-      background-color: var(--primary);
-      color: var(--primary-foreground);
-    }
-    ```
-    ```html
-    <!-- Tailwind root or body -->
-    <body class="selection:bg-primary selection:text-primary-foreground">
-    ```
-
----
-
-## 2. Form Carets & Native Focus
-
-- **Input Caret Color:**
-  - Style the text cursor to match the primary brand token:
-    ```css
-    input, textarea {
-      caret-color: var(--primary);
-    }
-    ```
-- **Consistent Focus Visible:**
-  - Never let the browser default blue outline show on interactive elements:
-    ```css
-    :focus-visible {
-      outline: 2px solid var(--ring);
-      outline-offset: 2px;
-    }
-    ```
-
----
-
-## 3. Custom Scrollbar Theming
-
-- **Subtle Scrollbars for Overflow Containers:**
-  - Default browser scrollbars on Windows/Linux are bulky and intrusive.
-  - Style internal scroll containers (`overflow-y-auto`, `overflow-x-auto`) with sleek, low-contrast scrollbars:
-    ```css
-    .custom-scrollbar {
-      scrollbar-width: thin;
-      scrollbar-color: var(--border) transparent;
-    }
-    .custom-scrollbar::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-    .custom-scrollbar::-webkit-scrollbar-thumb {
-      background-color: var(--border);
-      border-radius: 9999px;
-    }
-    .custom-scrollbar::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    ```
-

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

@@ -1,81 +0,0 @@
-# Craft: Color Systems & Surface Elevation
-
-Grounded in: Apple HIG, Google Material Design 3, and Refactoring UI Color Strategies.
-
----
-
-## 1. Token-First Color Architecture
-
-- **Semantic Tokens Only:**
-  - Every surface, border, and text color must resolve through declared CSS variables or semantic framework tokens:
-    - Backgrounds: `bg-background`, `bg-card`, `bg-muted`, `bg-popover`.
-    - Text: `text-foreground`, `text-muted-foreground`, `text-primary-foreground`.
-    - Borders: `border-border`, `border-input`, `border-primary`.
-  - **Zero Raw Hex Literals in Markup:** Never write inline hex values (`#6366f1`, `#3b82f6`) or arbitrary utility classes (`bg-blue-600`) outside the root token definition.
-
-- **The Single Neutral Family Law (Anti-Muddy Surfaces):**
-  - Never mix cool-tinted grays (e.g. Tailwind `slate-*`, with blue undertones) and warm-tinted grays (e.g. `stone-*`, with yellow/brown undertones) on the same screen. Combining `slate-900` text with `stone-50` backgrounds creates a dirty, mismatched optical surface.
-  - Choose one neutral temperature matching the project's primary brand:
-    - Warm brands (warm green, brown, amber, terracotta) $\to$ pair strictly with `stone` or neutral warm tones.
-    - Cool brands (navy, cobalt, cyan, indigo) $\to$ pair strictly with `slate` or cool zinc.
-    - Pure monochromatic / minimal brands $\to$ pair with neutral `zinc` or `gray`.
-
----
-
-## 2. The 60-30-10 Distribution Rule
-
-- **60% Dominant Neutral Surface:**
-  - The canvas base floor (tinted neutral like slate, zinc, or warm stone—never dead `#000000` or sterile `#ffffff`).
-- **30% Structural Neutral Containers:**
-  - Cards, table backgrounds, navigation headers, sidebars, and divider lines.
-- **10% Purposeful Accent:**
-  - The dedicated brand accent hue.
-  - **Accent Exclusivity:** Accent color is reserved strictly for interactive affordances: Primary CTA button, active navigation indicator, unread dot, selected checkbox.
-  - **Forbidden:** Never use the accent color as background wallpaper, card borders, or decorative section dividers.
-- **Full-Field Grounding (Anti-Sterile Surface):**
-  - To prevent the "sterile white void" trap, at least one major functional region (the Hero Stage, the Signature Canvas, or the Master Header) must own a deep, purposeful surface field (e.g. deep midnight grounding, rich brand tint, or dark canvas container).
-  - This establishes an optical center of gravity, preventing the page from looking like an unstyled wireframe.
-
----
-
-## 3. Surface Elevation & The "Ghost Card" Ban
-
-- **Stepped Tonal Elevation:**
-  - Build depth through background tone steps rather than heavy drop shadows:
-    - *Base Canvas:* `bg-background` (Level 0)
-    - *Containers & Cards:* `bg-card` (Level 1)
-    - *Recessed Inset Wells (Search bars, secondary filters, code blocks):* `bg-muted/50`
-- **Declare Elevation Once (Ban The Ghost Card):**
-  - Never apply both a distinct 1px border AND a wide, blurry drop shadow to the same container (`border border-slate-200 shadow-lg`). This creates an unnatural "ghost card".
-  - Choose one clear depth language:
-    - *Border-Driven:* Crisp 1px hairline border with alpha (`border-border/60`) and zero or minimal shadow (`shadow-xs`).
-    - *Shadow-Driven:* Floating elevation (`shadow-md`) with borderless or subtle color shift.
-- **Tinted Secondary Text on Colored Surfaces:**
-  - When placing secondary text on a colored or dark surface, tint the text using the parent background hue or foreground token (`text-primary-foreground/70`).
-  - **Never use neutral gray text (`text-slate-400`) on a saturated or colored background.** It produces a muddy, dirty optical illusion.
-
----
-
-## 4. Metric Displays & Scorecards
-
-- **Integrated Layout:** Never place an isolated white box with a thin border floating inside an already white or light header canvas.
-- **Anchor Into Layout Chrome:**
-  - Integrate scorecards directly into the identity header rail or stage banner using a unified divider (`border-l border-border/80 pl-6`) or structural inset well (`bg-muted/40`).
-- **Semantic Tinting for Evaluation Scores:**
-  - When communicating aggregate grades (e.g. `84.20 / 100`, Rank B):
-    - Background: subtle semantic tint (`bg-emerald-500/10` or `bg-slate-500/10`).
-    - Border: matching tinted hairline (`border border-emerald-500/20`).
-    - Typography: tabular numbers (`font-mono tabular-nums`) with clear contrast ($Display \ge 3.5\times Body$).
-  - Always position the grading scale key (e.g. `A > 85, B 71-85`) in immediate secondary proximity as muted metadata.
-
----
-
-## 5. Inline Notifications & Status Banners
-
-- **Structured Containers:** Warning notes, disclaimers, or temporary state alerts must reside in clear semantic containers, never dumped as raw floating text between layout sections.
-- **Notification Requirements:** Every alert must reside in a structured callout container:
-  - Container: 1px hairline border with matching light background tint (e.g. `border border-amber-500/30 bg-amber-500/10 rounded-md p-3`).
-  - Icon Anchor: Dedicated semantic SVG icon (alert circle, triangle) aligned with first line of text.
-  - Placement: Positioned immediately above or inside the data table/form it modifies, establishing unmistakable contextual binding.
-
-

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

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