@ryuenn3123/agentic-senior-core 6.16.6 → 6.17.0

package/.agents/plugins/agentic-senior-core/skills/asc-test/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: asc-test
 description: >
-  Trigger this skill when the user is: writing unit tests, integration tests, E2E tests, UAT checklists, reproducing bugs, fixing flaky tests, or verifying test coverage. Also trigger when the user says: "write a test", "TDD", "add tests", "verify this bug", "flaky test", "test this endpoint", "E2E test", "playwright", "UAT", "regression test", "bikin tes", "cara ngetes", "tes gagal terus". Also trigger when creating or editing files matching: `*.test.*`, `*.spec.*`, `tests/*`, `__tests__/*`, or `e2e/*`.
+  Trigger this skill when the user is: debugging errors or crashes, investigating bugs, writing unit/integration/E2E tests, UAT checklists, or fixing flaky tests. Also trigger when the user says: "write a test", "TDD", "fix this bug", "why is this failing", "error 500", "flaky test", "E2E test", "playwright", "UAT", "regression test", "bikin tes", "benerin bug", "kok error", "kenapa gagal", "tes gagal terus". Also trigger on files matching: `*.test.*`, `*.spec.*`, `tests/*`, `__tests__/*`, or `e2e/*`.
 ---
 
 # Testing, TDD, Verification & UAT Router
@@ -31,6 +31,7 @@ Every feature, bugfix, or refactor must follow the Red-Green-Refactor sequence:
 
 Before writing tests, running suites, or claiming verification:
 1. **Mandatory Ingestion (BLOCKING GATE):** Call `read_file` on the tier reference matching your testing requirement BEFORE taking action:
+   - Debugging runtime errors, 500 crashes, or unknown failures ➔ `references/systematic-debugging.md`
    - Writing unit tests / TDD cycle ➔ `references/tdd-cycle.md`
    - Behavior testing, boundary isolation, mocks/fakes ➔ `references/test-design.md`
    - Generative property invariants & fuzzing ➔ `references/property-testing.md`
@@ -105,6 +106,7 @@ Select the lowest testing tier that validates the requirement:
 
 | Testing Domain / Trigger | Mandatory Reference Path |
 |---|---|
+| 4-phase root-cause investigation & circuit breaker | `references/systematic-debugging.md` |
 | Red-Green-Refactor mechanics & whole-suite checks | `references/tdd-cycle.md` |
 | Behavior testing, boundary isolation & mocking | `references/test-design.md` |
 | Generative property invariants & boundary fuzzing | `references/property-testing.md` |

package/.agents/plugins/agentic-senior-core/skills/asc-test/references/systematic-debugging.md

@@ -0,0 +1,32 @@
+# Systematic Root-Cause Debugging
+
+> **Core Invariant:** Zero production code edits before root-cause investigation is complete. Patching symptoms without proving the failure mechanism creates cascading regressions.
+
+---
+
+## 1. The Four Mandatory Debugging Phases
+
+Complete each phase in strict order for every bug report, runtime crash, 500 error, build break, or failing test:
+
+### Phase 1: Root-Cause Investigation (Read-Only)
+Before modifying any file in `src/` or `app/`:
+1. **Read Raw Failure Evidence:** Capture the exact error message, HTTP status, stack trace line numbers, and exit code without skimming.
+2. **Trace Data Flow Backward:** Follow the failing variable or state from the crash site back to its trust boundary (request payload, DB query result, environment variable, async race window). Identify *where* invalid state originated, not merely where it threw.
+3. **Check Recent Deltas:** Inspect recent modifications (`ascx git status`, `ascx git diff`, `ascx git log -n 5`) touching the module, config, or dependencies.
+4. **Compare Working Analog:** Locate a working endpoint or handler in the same codebase and compare middleware order, types, and null/error guards.
+
+### Phase 2: Falsifiable Hypothesis & Deterministic Reproduction
+1. **State One Explicit Hypothesis:** *"Function `X` fails with `Y` when input `Z` occurs because condition `W` is unchecked at line `N`."*
+2. **Write the Reproduction Test First:** Follow `references/regression-proof.md` to create an automated unit, integration, or CLI reproduction test targeting that exact input.
+3. **Confirm Expected Failure (`RED`):** Execute the test fresh (`ascx npm test -- ...`, `ascx pytest ...`). It **must fail** with the exact symptom under investigation. If it passes, your hypothesis is incomplete—return to Phase 1.
+
+### Phase 3: Minimal Root-Cause Fix
+1. **Single-Cause Change:** Fix the root cause at its origin boundary (for example, normalize/validate at input entry rather than sprinkling defensive `?.` checks downstream).
+2. **Zero Bundled Refactoring:** Do not mix style cleanups, renames, or unrelated feature changes into a bugfix diff.
+3. **Two-Failure Circuit Breaker:** If two consecutive code edits fail to turn the reproduction test green, **STOP editing**. Revert the speculative edits, re-examine architectural assumptions from Phase 1, and report the exact blocker if an external constraint is involved.
+
+### Phase 4: Regression & Whole-Suite Proof
+1. Execute the reproduction test fresh and confirm `exit 0` (`GREEN`).
+2. Perform the revert check in `references/regression-proof.md` when fixing subtle logic guards.
+3. Run the complete test suite fresh (`ascx npm test` or project runner) to prove zero collateral regressions before claiming the bug is resolved.
+

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

@@ -4,108 +4,68 @@ description: >
   Trigger this skill when working on: UI components, UX design, layouts, microcopy, typography, design systems, modals, forms, tables, dashboards, empty states, or error UI. Also trigger when the user says: "design this page", "clean up UI", "write UI copy", "fix UI slop", "make it look professional", "too verbose", "improve the design", "broken on mobile", "bikin UI", "rapikan tampilan", "tulisan UI berlebihan", "tampilan di hp rusak", "terlalu kaku", "jangan kayak AI". Also trigger when creating or editing files matching: `*.tsx`, `*.jsx`, `*.vue`, `*.svelte`, `*.html`, `*.blade.php`, `*.css`, or UI component files.
 ---
 
-# Universal UI/UX Engineering & Anti-Slop Router
+# Deterministic Frontend & UI Engineering Router (`asc-ui`)
 
-Staff-grade design engineering for resilient, scannable, human-grade interfaces. Enforces the visual floor and routes deep craft guidance on demand.
+Enforces structural semantics, token reuse, state completeness, accessibility, and anti-card-soup invariants across frontend codebases. Pure visual art direction belongs to design tools (Figma MCP, Stitch) or pre-built component kits (Shadcn/Radix blocks); this skill governs verifiable UI engineering.
 
 ---
 
-## 1. The Quality Floor (Non-Negotiable Bans)
-
-Every UI edit must satisfy these 15 rules without exception:
-
-1. **Token discipline:** All colors, spacing, and typography must resolve through declared design tokens or CSS variables. Zero raw hex codes (`#6366f1`) or arbitrary inline pixel values.
-2. **Animation safety:** Never use `transition: all`. Never animate layout dimensions (`width`, `height`, `top`, `left`). Animate only GPU properties (`transform`, `opacity`).
-3. **Reduced motion:** Every CSS animation or transition must respect `@media (prefers-reduced-motion: reduce)`.
-4. **Focus visibility:** Never strip focus indicators (`outline-none`) without an immediate high-contrast `:focus-visible` replacement.
-5. **No hallucinated material:** Never invent metrics, testimonials, customer quotes, or fake partner logos.
-6. **No eyebrows or kicker tags:** Headings carry their own weight. Never place `text-[11px] uppercase tracking-wider` micro-labels above titles.
-7. **No AI cliché gradients:** Never use purple-to-blue/indigo gradients or text clipping (`bg-clip-text text-transparent`).
-8. **No card-in-card nesting:** Never nest rounded bordered cards inside other rounded cards.
-9. **Single elevation declaration:** Choose either a 1px border OR an elevation shadow, never both (ban the ghost card).
-10. **Mobile viewport unit:** Use `min-h-dvh` or `100dvh` for full-height containers, never `100vh` or `h-screen`.
-11. **Mobile containment:** Set `overflow-x: clip` on root shells. Never leak horizontal scrolling.
-12. **Touch targets:** Minimum 44×44px hit target with $\ge$ 8px clearance for all interactive touch controls.
-13. **Contrast floor:** Meet WCAG 2.2 AA (4.5:1 normal text, 3:1 large text and UI component boundaries).
-14. **Single-language purity:** Never mix languages on one surface; preserve monolingual consistency across headings, labels, errors, and actions.
-15. **Icon semantics:** Never use raw unicode or emojis as icons. Use dedicated SVG icons; mark decorative icons `aria-hidden="true"`.
-16. **Substance over restraint:** Stripping slop is only half the job. Replace removed ornaments with real substance: strong typographic scale contrast, full-field color anchors, and authentic interface fragments. Never leave an empty, sterile wireframe void.
-17. **Product over skill (No geek cosplay):** The real-world domain dictates aesthetics. Never inject terminal windows, ASCII art, or pseudo-telemetry consoles into civic, educational, or commercial products (`references/modes/genre-calibration.md`).
-18. **The Purpose-Gate:** Every component, widget, or scorecard must enable an actual user task. Never invent unearned widgets, sliders, or simulated feeds without real business data.
-19. **Anti-card-soup invariant:** Never wrap structural layout sections (header, nav, rails, tables) into floating rounded card islands. Use a Unified Spatial Canvas with hairline dividers (`divide-y`, `border-r`). Cards are strictly for discrete, interchangeable items (`references/divergence.md`).
+## 1. The Quality Floor (Non-Negotiable Invariants)
 
----
-
-## 2. Pre-Flight & Material Inventory (BLOCKING GATE)
-
-Before declaring markup, drafting redesign plans, or inspecting user code:
-
-1. **Step 1 — Workspace Brand Audit (Brownfield vs Greenfield):**
-   - Check project styling configuration: `app.css`, `globals.css`, `tailwind.config.*`, or `components/ui`.
-   - **Brownfield Rule:** If the project already defines brand tokens (e.g. custom brand colors, established fonts, existing UI library), **DO NOT OVERRIDE THEM**. Calibrate neutrals to the brand's color temperature (single neutral family law) and respect established naming.
-   - **Greenfield Fallback:** If the repository is brand new with zero tokens, read `references/modes/genre-calibration.md` and select a starting palette from `references/craft/themes-catalog.md`.
-2. **Step 2 — Silent Discipline & Real Visual Benchmarks:**
-   - Review `references/craft/composition-patterns.md` and inspect matching `references/visuals/real-*.png` / `*-dom.json` for authentic human-designed spacing and layout hierarchies rather than enclosing sections in repetitive `1px` boxes.
-   - **Silent Meta-Rules:** Never emit internal framework rules, theme catalog names, or parenthetical foreign translations in user deliverables. Focus purely on technical facts.
-3. **Step 3 — Workspace Material Inventory:**
-   - **Real:** Concrete numbers, existing endpoints, actual data attributes from controllers/models.
-   - **Pictures:** Actual screenshots and product visual assets.
-   - **Absent:** Missing quotes, missing logos, or unverified metrics—these are omitted entirely.
+1. **Token & primitive reuse:** Resolve all colors, radii, and spacing through project CSS variables/tokens and existing `components/ui/` primitives. Zero raw hex codes (`#6366f1`) and zero mixed neutral families (never mix `slate` with `stone`).
+2. **Anti-card-soup rule:** Never stack two or more multi-column card grids consecutively on a page, and never render sequential steps (`01`, `02`, `03`), rubrics, or people directories as bordered cards.
+3. **No card-in-card or ghost elevation:** Never nest a bordered rounded card inside another card. Choose either `border` OR `shadow-sm`, never both.
+4. **GPU-only motion & reduced motion:** Never use `transition-all` or animate layout geometry (`width`, `height`, `top`, `left`). Respect `@media (prefers-reduced-motion: reduce)`.
+5. **Focus & WCAG 2.2 AA contrast:** Maintain $\ge$ 4.5:1 text contrast (3:1 large text/controls). Never apply `outline-none` without an immediate `:focus-visible` ring replacement.
+6. **Mobile containment & touch targets:** Use `min-h-dvh` (never `100vh`/`h-screen`), `overflow-x: clip` on root shells, and minimum **44x44px** hit targets on touch controls.
+7. **Zero hallucinated proof or ornaments:** Never invent testimonials, partner logos, unbacked KPIs, small-caps eyebrow kickers above headings, purple-to-blue gradients, or terminal cosplay in non-developer apps.
+8. **Single-language microcopy:** Keep every visible string on a surface in one language with natural domain terms—zero mixed-language neologisms and zero literal translation calques.
 
 ---
 
-## 3. Surface Modes & Ambition Scaling
+## 2. Pre-Flight & Reuse Gate (BLOCKING)
 
-Visual posture is governed by the surface type, not product branding. Every surface maps to an enforced mode reference file:
+Before writing or refactoring any UI file (`*.tsx`, `*.jsx`, `*.vue`, `*.svelte`, `*.html`, `*.blade.php`, `*.css`):
 
-- **Operate (`references/modes/operate.md`):** Dense scannability, master-detail rails, `tabular-nums`, inline progressive disclosure.
-- **Persuade (`references/modes/persuade.md`):** 80-word viewport budget, asymmetric posture, single signature element, zero equal-weight 3-card grids.
-- **Read (`references/modes/read.md`):** 65–75ch measure (`max-w-prose`), dual-rail navigation, syntax-highlighted code blocks.
-- **Experience (`references/modes/experience.md`):** Receding interface chrome, full-bleed visual canvas, tactile exploration.
+1. **Audit Workspace Primitives:** Inspect `components/ui/`, shared layouts, `app.css`/`globals.css`, and Tailwind config. Reuse existing tables, dialogs, buttons, and form primitives rather than inventing ad-hoc markup.
+2. **Load Mandatory Reference Branch (1-Hop):**
+   - Building a new page, dashboard, or multi-section layout $\rightarrow$ **MUST** `read_file` `references/data-to-structure.md` before writing markup.
+   - Implementing async data views, forms, modals, or interactive controls $\rightarrow$ **MUST** `read_file` `references/states-and-a11y.md`.
+   - Adjusting responsive behavior, CSS tokens, or localized UI copy $\rightarrow$ **MUST** `read_file` `references/responsive-and-copy.md`.
 
 ---
 
-## 4. Scope Classification: Refine vs. Redesign
+## 3. Data-to-Structure Mapping
+
+Never default to `Card` grids as a generic layout wrapper. Select containers strictly by data shape:
 
-Never split the difference into cosmetic polish on a discarded look:
-- **Polish / Refinement:** Preserves layout structure, DOM hierarchy, and design tokens. Resolves contrast, missing state quad, microcopy, and lint issues.
-- **Restyle:** Preserves layout geometry. Replaces color tokens, typographic scales, corner radiuses, and elevation shadows.
-- **Full Redesign:** Replaces entire spatial geometry and posture. Mandatory decoupled protocol: extract data/contracts first, discard old DOM, establish clear spatial posture and theme tokens, and compile directly to production files with complete layout coherence.
+| Data Shape | Required Semantic Structure |
+| :--- | :--- |
+| Sequential workflow (`Step 1 -> 4`) | Connected `<ol>` stepper or timeline |
+| Criteria, weights, pricing, logs, records | `<table/>` with `sticky top-0` header & `tabular-nums` |
+| Team members, rosters, activity streams | Compact `divide-y divide-border` rows |
+| 3–5 summary counts / KPIs | Flat `<dl>` stat strip with hairline dividers |
+| Independent catalog items / isolated auth form | Single-level `Card` container |
 
 ---
 
-## 5. On-Demand Reference Library
+## 4. On-Demand Engineering References
 
 > [!IMPORTANT]
-> **Resolution Note:** All paths below are relative to this `SKILL.md` file's parent folder (`.../skills/asc-ui/`). When calling `read_file`, prepend this skill's directory path.
-
-| Target Domain / Task Requirement | Mandatory Reference Path |
-|---|---|
-| Domain & genre calibration (Anti-geek cosplay) | `references/modes/genre-calibration.md` |
-| Concrete structural layouts & anti-1px cage | `references/craft/composition-patterns.md` |
-| Real-world visual benchmarks & rendered DOMs | `references/visuals/` (13 live domains) |
-| Curated material themes (Greenfield reference) | `references/craft/themes-catalog.md` |
-| Waivable defaults & waiver syntax | `references/reflexes.md` |
-| Typography, line-height & tabular numbers | `references/craft/typography.md` |
-| Color tokens, single neutral family & elevation | `references/craft/color-surfaces.md` |
-| Micro-interactions & GPU motion | `references/craft/motion.md` |
-| Native surfaces (selection, caret, scrollbars) | `references/craft/browser-surfaces.md` |
-| 50% reduction, active verbs & natural i18n | `references/copy-i18n.md` |
-| Responsive reflow, dvh & touch targets | `references/mobile-responsive.md` |
-| WCAG 2.2 AA contrast & keyboard operability | `references/accessibility.md` |
-| The Data State System & mutation feedback | `references/states-feedback.md` |
-| Anti-convergence & layout diversity | `references/divergence.md` |
-| Structured UI audit matrix | `references/redesign-audit.md` |
+> Paths below are relative to this `SKILL.md` directory (`.../skills/asc-ui/`). Prepend this skill's folder path when calling `read_file`.
+
+| Engineering Concern | Reference Path |
+| :--- | :--- |
+| Anti-card-soup structural templates (`<ol>`, `<table>`, `divide-y`, `<dl>`) | `references/data-to-structure.md` |
+| 4-state data contract, pending mutation lock & WCAG 2.2 AA focus/contrast | `references/states-and-a11y.md` |
+| Brownfield token reuse, `100dvh` mobile reflow, GPU transitions & microcopy | `references/responsive-and-copy.md` |
 
 ---
 
-## 6. Verification & Handoff Sweep
+## 5. Verification & Handoff Sweep
 
-Before completing any UI task, run this mechanical check:
-1. **Brand & Reference Compliance:** Confirm project tokens were respected (or greenfield constraints followed). Verify zero clumsy literal translations or meta-jargon leaks.
-2. **Finish Gate Sweep:** Verify zero text clipping (+30% expansion buffer), zero awkward text wraps, and 4px/8px spacing grid consistency.
-3. **Visual Verification (`asc preview`):** If a local dev server is running or an HTML prototype exists, run `asc preview <url|file> [--mobile]` to inspect the rendered visual balance before handoff.
-4. **Data States:** Loading skeleton, empty state, error with retry, and populated data are all handled.
-5. **Pending Feedback:** Buttons disable and display feedback during ongoing mutations.
-6. **Contrast & Focus:** Verify keyboard tab flow and high-contrast `:focus-visible` styling.
-7. **Lint Check:** Verify changes against `hooks/lib/known-ui-slop-patterns.json`.
+Before declaring any UI task complete:
+1. **Structural Rhythm Check:** Confirm the page does not stack consecutive card grids and uses `<table>`, `<ol>`, or `divide-y` lists where required.
+2. **State & Mutation Check:** Verify loading skeleton, empty state, error state with retry, and `disabled` pending state on submit buttons.
+3. **Mobile & Overflow Check:** Confirm `min-h-dvh`, wrapped horizontal tables (`overflow-x-auto`), and no fixed-pixel button widths (`w-[120px]`) that clip +30% text expansion.
+4. **Rendered Preview (`asc preview`):** When a local server or static HTML target is available, run `asc preview <url|file> [--mobile]` to inspect rendered layout balance before handoff.

package/.agents/plugins/agentic-senior-core/skills/asc-ui/references/data-to-structure.md

@@ -0,0 +1,96 @@
+# Deterministic Data-to-Structure Mapping (Anti-Card-Soup)
+
+Code-generation models default to wrapping every dataset in an identical bordered card grid (`grid` + `rounded-xl` + `border` + `p-6`). Repeating card grids across three or more sections produces visually monotonous "Card Soup". Map every dataset deterministically to its semantic HTML structure instead.
+
+---
+
+## 1. Mandatory Structural Mapping Matrix
+
+| Data Shape | Forbidden Pattern (Card Soup) | Required Semantic Container |
+| :--- | :--- | :--- |
+| **Sequential Steps / Workflow (`1 -> 2 -> 3`)** | 3–4 bordered cards with `01`, `02`, `03` badges | Connected `<ol>` stepper with horizontal/vertical connector lines |
+| **Criteria, Rubrics, Pricing Tiers, Logs, Metrics** | Multi-row card grid with repeated labels/badges | Semantic `<table>` with `sticky top-0` header and `tabular-nums` |
+| **People, Committees, Directories, Activity Feeds** | Profile cards with placeholder avatar circles | Compact `divide-y divide-border` roster list (single-line or two-column rows) |
+| **Summary KPIs / Key Counts (3–5 numbers)** | Individual shadowed boxes per number | Flat typographic strip separated by hairline borders (`sm:divide-x divide-border`) |
+| **FAQs / Reference Details** | Nested bordered boxes inside bordered panels | Native `<details>` / `<summary>` or unboxed `divide-y` accordion |
+| **Independent Catalog Items / Single Isolated Form** | Card-inside-card nesting | Single-level `Card` (`border border-border` OR `shadow-sm`, never both) |
+
+---
+
+## 2. Structural Reference Templates
+
+### 2.1 Sequential Process -> Connected Stepper (`<ol>`)
+```html
+<ol class="grid grid-cols-1 gap-6 border-t border-border pt-6 md:grid-cols-4">
+  <li class="space-y-1.5">
+    <span class="text-xs font-mono font-semibold text-muted-foreground">Step 1</span>
+    <h3 class="text-sm font-semibold text-foreground">Authenticate Account</h3>
+    <p class="text-sm text-muted-foreground">Sign in with your assigned unit credentials.</p>
+  </li>
+  <li class="space-y-1.5">
+    <span class="text-xs font-mono font-semibold text-muted-foreground">Step 2</span>
+    <h3 class="text-sm font-semibold text-foreground">Submit Assessment</h3>
+    <p class="text-sm text-muted-foreground">Complete indicator scores per evaluation category.</p>
+  </li>
+</ol>
+```
+
+### 2.2 Weighted Criteria / Structured Records -> Matrix `<table>`
+```html
+<div class="overflow-x-auto border-y border-border">
+  <table class="w-full text-left text-sm">
+    <thead class="sticky top-0 bg-background border-b border-border text-xs font-medium text-muted-foreground">
+      <tr>
+        <th scope="col" class="py-3 pr-4">Category</th>
+        <th scope="col" class="py-3 px-4">Required Evidence</th>
+        <th scope="col" class="py-3 px-4 text-right">Weight</th>
+        <th scope="col" class="py-3 pl-4 text-right">Action</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-border">
+      <tr class="hover:bg-muted/40 transition-colors">
+        <td class="py-3 pr-4 font-medium text-foreground">Governance &amp; Records</td>
+        <td class="py-3 px-4 text-muted-foreground">Decree PDF, annual roster</td>
+        <td class="py-3 px-4 text-right font-mono tabular-nums">20%</td>
+        <td class="py-3 pl-4 text-right"><a href="#details" class="font-medium text-primary hover:underline">Inspect</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+### 2.3 Team / Roster Directory -> Compact `divide-y` List
+```html
+<ul class="divide-y divide-border border-y border-border">
+  <li class="flex flex-col gap-1 py-3.5 sm:flex-row sm:items-baseline sm:justify-between">
+    <div>
+      <span class="font-medium text-foreground">Dr. Budi Santoso</span>
+      <span class="ml-2 text-sm text-muted-foreground">Lead Auditor — Administrative Verification</span>
+    </div>
+    <span class="text-xs font-mono text-muted-foreground">District I–II</span>
+  </li>
+</ul>
+```
+
+### 2.4 Summary Figures -> Flat Stat Strip
+```html
+<dl class="grid grid-cols-2 gap-6 border-y border-border py-6 sm:grid-cols-4 sm:gap-0 sm:divide-x sm:divide-border">
+  <div class="sm:px-6 first:sm:pl-0">
+    <dt class="text-xs text-muted-foreground">Registered Units</dt>
+    <dd class="mt-1 text-2xl font-semibold tracking-tight font-mono tabular-nums text-foreground">40</dd>
+  </div>
+  <div class="sm:px-6">
+    <dt class="text-xs text-muted-foreground">Evaluation Domains</dt>
+    <dd class="mt-1 text-2xl font-semibold tracking-tight font-mono tabular-nums text-foreground">5</dd>
+  </div>
+</dl>
+```
+
+---
+
+## 3. Page Rhythm Rules
+
+1. **Maximum One Card Grid Per View:** A single page must never stack two or more multi-column card grids consecutively. Alternate dense sections (`<table>`, `divide-y` list, `<dl>` stat strip, split 2-column prose/form).
+2. **No Placeholder Avatars or Fake Chrome:** Omit empty gray silhouette circles when real user photos do not exist. Omit fake macOS traffic-light window dots (`red/yellow/green`) outside developer CLI documentation.
+3. **Single Elevation Per Surface:** Use either `border border-border` OR `shadow-sm` on an isolated container—never combine heavy borders with drop shadows, and never nest a bordered card inside another bordered card.
+

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

@@ -0,0 +1,32 @@
+# Token Reuse, Responsive Containment & Microcopy Hygiene
+
+---
+
+## 1. Brownfield Token & Component Reuse
+
+1. **Inspect Existing Primitives First:** Before creating any markup or CSS, inspect `components/ui/`, `components/`, `app.css` / `globals.css`, and `tailwind.config.*`.
+2. **Never Override Workspace Tokens:** When a repository already defines brand variables (`--primary`, `--background`, `--border`, `--radius`) or installed component primitives (Radix, Shadcn, Headless UI, Blade components), compose directly from them. Never introduce raw hex values (`#6366f1`) or competing neutral gray scales (do not mix `slate` with `stone` or `zinc` on the same surface).
+3. **External Design Sources:** When Figma frames, design specs, or pre-built component blocks exist, translate those exact token and spacing contracts rather than inventing decorative CSS from scratch.
+
+---
+
+## 2. Responsive Layout & GPU Motion
+
+1. **Dynamic Viewport Height:** Use `min-h-dvh` (`100dvh`) for full-height shells—never `h-screen` or `100vh`, which clip behind mobile browser toolbars.
+2. **Horizontal Overflow Containment:** Apply `overflow-x: clip` on the root layout shell. Wrap wide data tables in `<div class="overflow-x-auto">` so tables scroll internally without breaking mobile page width.
+3. **Touch Hit Targets:** Interactive controls on mobile/touch viewports must provide at least a **44x44px** hit area (`min-h-11 min-w-11` or equivalent padding) with $\ge$ 8px gap between adjacent actions.
+4. **Expansion Buffer (+30% Text Length):** Never hardcode fixed pixel widths on text buttons (`w-[120px]`). Use `px-4 py-2` with `min-w-*` so localized strings (such as Indonesian or German) expand without clipping.
+5. **GPU-Only Transitions:** Never use `transition-all`. Specify exact properties (`transition-colors`, `transition-opacity`, `transition-transform`) and never animate layout geometry (`width`, `height`, `top`, `left`, `margin`).
+
+---
+
+## 3. Microcopy & Single-Language Purity
+
+1. **50% Word Reduction:** Cut ornamental filler. Write direct operational labels:
+   - Button labels use `Verb + Object`: `Save Changes`, `Export CSV`, `Revoke Key` (avoid vague `Submit` or `Click Here`).
+   - Omit small-caps kicker tags (`text-[11px] uppercase tracking-wider`) above headings; let headings stand on their own.
+2. **Strict Single-Language Surface:** Keep every visible string on a page—headings, table headers, placeholders, empty states, validation messages, and buttons—in one language.
+   - Never mix English and Indonesian (`meng-generate`, `di-submit`).
+   - In Indonesian interfaces, use natural idiomatic terms established in the codebase (*panel samping*, *garis pemisah*, *jendela dialog*, *unggah berkas*) rather than awkward literal calques (*laci sembul*, *garis rambut*, *jendela sembul*).
+3. **Zero Fabricated Content:** Never invent customer quotes, partner company names, fake user counts (`10,000+ teams`), or unbacked telemetry metrics. Omit absent marketing proof entirely.
+

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

@@ -0,0 +1,38 @@
+# Data States, Mutation Feedback & Accessibility Floor
+
+Every interactive interface must enforce deterministic state coverage and WCAG 2.2 AA accessibility invariants before handoff.
+
+---
+
+## 1. The 4-State Data Contract
+
+Every asynchronous view, table, or list must explicitly handle all four states:
+
+1. **Loading State:** Render layout-preserving skeletons matching actual row/column heights (`animate-pulse bg-muted`). Avoid full-screen blocking spinners on incremental refetches.
+2. **Empty State:** State factually what is absent and provide one direct primary action when applicable (for example: *"No API keys created." -> `[Create API Key]`). Never write poetic or motivational empty-state essays.
+3. **Error State:** Display a safe, specific failure reason (`role="alert"`) paired with an immediate `[Retry]` button that re-triggers the failed query without losing form inputs.
+4. **Populated State:** Handle text overflow (`truncate` or `line-clamp-2` with accessible full value), missing optional fields (`—`), and pagination/virtualization when rows exceed 100 items.
+
+---
+
+## 2. Mutation & Form Safety
+
+1. **Immediate Pending Lock:** Disable submit/destructive buttons (`disabled={isPending}` + `aria-busy="true"`) on click to prevent duplicate submissions.
+2. **Preserve User Input on Failure:** Never clear form fields when a server request fails. Surface field-level validation errors adjacent to each input via `aria-describedby` and `aria-invalid="true"`.
+3. **Explicit Outcome Notification:** Confirm non-obvious background mutations via a concise status banner or toast; never swallow caught errors silently.
+4. **Destructive Confirmations Only:** Reserve modal dialogs strictly for irreversible destructive actions (delete, revoke) or isolated multi-step imports. Use inline forms or drawers for routine edits.
+
+---
+
+## 3. WCAG 2.2 AA & Keyboard Operability
+
+1. **Contrast Ratios:**
+   - Normal text (`< 18pt` / `< 14pt bold`): minimum **4.5:1** against its background.
+   - Large text, icons, and input boundaries: minimum **3:1**.
+2. **Visible Focus Ring:** Never apply `outline-none` or `focus:outline-none` without pairing `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`.
+3. **Semantic Landmarks & Controls:**
+   - Use `<button type="button">` for actions and `<a href="...">` for navigation. Never attach `onClick` to non-interactive `<div>` or `<span>`.
+   - Pair every `<input>`, `<select>`, and `<textarea>` with an explicit `<label htmlFor="...">` or `aria-label`.
+   - Icon-only buttons require `aria-label` describing the action (`aria-label="Close panel"`), with inner SVG marked `aria-hidden="true"`.
+4. **Reduced Motion:** Wrap non-essential CSS transitions and keyframe animations in `@media (prefers-reduced-motion: reduce)` fallbacks (`transition: none; animation: none;`).
+

package/gemini-extension.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-senior-core",
-  "version": "6.16.6",
+  "version": "6.17.0",
   "description": "Universal AI coding rules. Write code like a staff engineer.",
   "author": "fatidaprilian",
   "license": "MIT",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryuenn3123/agentic-senior-core",
-  "version": "6.16.6",
+  "version": "6.17.0",
   "type": "module",
   "description": "Agentic Senior Core: Universal AI coding rules and workflows. Write code like a staff engineer, not a junior.",
   "bin": {

package/plugin.yaml

@@ -1,5 +1,5 @@
 name: agentic-senior-core
-version: 6.16.6
+version: 6.17.0
 description: Universal AI coding rules. Write code like a staff engineer.
 author: fatidaprilian
 provides_hooks:

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

@@ -1,102 +0,0 @@
-# Accessibility Engineering & WCAG 2.2 Compliance
-
-Accessibility is not an afterthought or an optional overlay. It is the structural floor of web engineering. Every component must be perceivable, operable, understandable, and robust.
-
----
-
-## 1. Contrast Ratios & WCAG Compliance
-
-All text and critical visual indicators must meet WCAG 2.2 Level AA mathematical contrast floors.
-
-### 1.1 Contrast Floors
-- **Normal Body Text (< 18pt / 24px regular, < 14pt bold):** Minimum `4.5:1` contrast ratio against its background.
-- **Large Text ($\ge$ 18pt / 24px regular, $\ge$ 14pt bold):** Minimum `3:1` contrast ratio.
-- **UI Components & Graphical Boundaries:** Active input borders, toggle switches, and focus indicators require minimum `3:1` against adjacent background colors.
-
-### 1.2 Avoiding Low-Contrast Surfaces
-A frequent aesthetic failure is using low-contrast grey text for "subtle elegance":
-- **Failing example:** `text-zinc-500` (`#71717a`) on `bg-zinc-900` (`#18181b`) = **3.8:1** (Fails 4.5:1 AA for body copy).
-- **Compliant fix:** `text-zinc-400` (`#a1a1aa`) on `bg-zinc-900` = **6.2:1** (Passes AA).
-- **Light mode equivalent:** `text-zinc-400` (`#a1a1aa`) on `bg-white` = **2.6:1** (Fails). Must use `text-zinc-600` (`#52525b`, 5.7:1) or darker for readable secondary copy.
-
----
-
-## 2. Focus Management & Keyboard Operability
-
-Every capability available via pointer must be fully operable via keyboard alone.
-
-### 2.1 The Focus-Visible Rule
-Never remove browser focus indicators without providing an immediate high-contrast replacement:
-
-```html
-<!-- BANNED: Strips focus visibility entirely -->
-<button class="outline-none">Action</button>
-
-<!-- ENFORCED: High-contrast focus ring on keyboard interaction -->
-<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background">
-  Action
-</button>
-```
-
-### 2.2 Dialog Focus Traps & Escape Key Contract
-Any modal, drawer, or sheet must obey the modal contract:
-1. **Focus Trap:** When opened, focus moves to the first focusable element inside the modal. Keyboard `Tab` cycles strictly inside the dialog.
-2. **Escape Key Dismissal:** Pressing `Escape` must immediately close the dialog.
-3. **Return Focus:** Upon closing, focus must return to the element that triggered the dialog open event.
-4. **ARIA Metadata:** Outer container must declare `role="dialog"`, `aria-modal="true"`, and `aria-labelledby="dialog-title-id"`.
-
----
-
-## 3. Accessible Form Controls
-
-Forms must convey intent, association, and error states programmatically.
-
-```html
-<div class="space-y-1.5">
-  <label for="user-email" class="text-sm font-medium text-foreground">
-    Work email
-  </label>
-  <input
-    id="user-email"
-    name="email"
-    type="email"
-    aria-invalid="true"
-    aria-describedby="email-error-msg"
-    class="w-full px-3 py-2 rounded-md border border-destructive bg-background text-foreground focus-visible:ring-2 focus-visible:ring-destructive"
-  />
-  <p id="email-error-msg" class="text-xs text-destructive flex items-center gap-1" role="alert">
-    <svg class="w-3.5 h-3.5" aria-hidden="true">...</svg>
-    <span>Enter a valid corporate email address (e.g. name@company.com).</span>
-  </p>
-</div>
-```
-
-- Every `<input>` must be explicitly linked via `for` and `id` to a `<label>`. Do not rely solely on `placeholder`.
-- Errors must use `role="alert"` and link via `aria-describedby`.
-- When invalid, set `aria-invalid="true"`.
-
----
-
-## 4. Icon & Image Semantics
-
-1. **Decorative Icons:**
-   All decorative SVG icons alongside visible text must be hidden from screen readers:
-   ```html
-   <button>
-     <svg aria-hidden="true" class="w-4 h-4">...</svg>
-     <span>Download receipt</span>
-   </button>
-   ```
-
-2. **Standalone Icon Buttons:**
-   Buttons containing only an icon must supply an accessible name via `aria-label`:
-   ```html
-   <button type="button" aria-label="Delete document" class="p-2">
-     <svg aria-hidden="true" class="w-4 h-4">...</svg>
-   </button>
-   ```
-
-3. **Images:**
-   - Informative graphics, charts, and photos: descriptive `alt="Graph showing 42% revenue increase in Q3"`.
-   - Purely aesthetic background patterns or decorative dividers: empty `alt=""` so screen readers ignore them.
-