@ryuenn3123/agentic-senior-core 6.16.5 → 6.17.0

package/.agents/plugins/agentic-senior-core/skills/asc-develop/references/subagent-orchestration.md

@@ -0,0 +1,55 @@
+# Subagent Orchestration & Worktree Isolation
+
+Delegate independent implementation tasks to fresh subagents to keep parent coordination context small while enforcing two-stage verification gates.
+
+---
+
+## 1. Dispatch Criteria
+
+Use subagents **only** when all three conditions hold:
+1. An implementation plan contains $\ge$ 2 tasks with clearly separated module responsibilities.
+2. Target file write sets do not overlap (preventing concurrent file write collisions).
+3. Subagent tooling (`invoke_subagent` or host equivalent) is available in the runtime.
+
+Keep tightly coupled sequential edits inline in the current session—subagent handoff overhead outweighs benefits when tasks mutate the same files.
+
+---
+
+## 2. Self-Contained Subagent Prompts
+
+Subagents must never guess missing context. Every subagent prompt must explicitly state:
+1. **Scoped Objective:** The single task deliverable and explicit non-goals (which files NOT to touch).
+2. **Exact File Paths & Signatures:** Target implementation file(s), test file(s), and required input/output contracts.
+3. **Analogous Pattern Reference:** One existing file path in the workspace whose naming, error handling, and layer split must be matched.
+4. **Verification Command:** The exact test command (`ascx npm test -- ...`, `ascx pytest ...`) the subagent must run and pass before reporting back.
+
+---
+
+## 3. Two-Pass Review Gate Per Task
+
+Never trust a subagent's verbal summary alone. After each subagent finishes, inspect `ascx git status` and `ascx git diff`, then verify two gates in order:
+
+1. **Pass 1 — Spec Compliance:**
+   - Did the subagent implement every requirement and edge case in the task contract?
+   - Did it introduce unrequested features, extra files, or unauthorized dependencies?
+2. **Pass 2 — Code Quality & Security:**
+   - Are inputs validated at trust boundaries, queries parameterized, and resource-level authorization checks enforced?
+   - Does the happy path use flat early returns without duplicated codebase utilities?
+   - Run the task test command fresh and confirm `exit 0`.
+
+When all tasks finish, run the full repository test suite once across the combined diff before handoff.
+
+---
+
+## 4. Git Worktree Isolation (`git worktree`)
+
+When running parallel feature streams or risky refactors without disturbing the active working directory:
+
+1. **Verify Ignore Rule:** Confirm `.worktrees/` is listed in `.gitignore` before creating local worktrees (or place worktrees in a sibling temp directory outside the repo).
+2. **Create Isolated Worktree:**
+   ```bash
+   ascx git worktree add -b feat/<short-name> .worktrees/<short-name>
+   ```
+3. **Baseline Check:** Run the existing test suite inside the new worktree before writing changes to confirm a clean starting baseline.
+4. **Clean Teardown:** After changes are verified and merged (with user confirmation), remove the worktree via `ascx git worktree remove .worktrees/<short-name>`.
+

package/.agents/plugins/agentic-senior-core/skills/asc-pentest/references/fuzzing-dsl.md

@@ -53,7 +53,7 @@ All dynamic injection tests must use non-destructive canary strings. Never injec
 
 ---
 
-## 3. The Failure Oracle (Crash & Error Triage)
+## 3. Crash Detection & Error Triage
 
 When fuzzing an endpoint, every server response is categorized against three automated oracles:
 

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
@@ -10,9 +10,9 @@ Staff-grade testing playbook and verification gates. Enforces test-first discipl
 
 ---
 
-## 1. The Iron Law of TDD
+## 1. Test-Driven Development Protocol
 
-> **THE IRON LAW:** No production code shall be written without a failing test first.
+> **CORE PROTOCOL:** No production code shall be written without a failing test first.
 
 Every feature, bugfix, or refactor must follow the Red-Green-Refactor sequence:
 1. **RED:** Write a minimal failing test. Execute it and confirm it fails for the expected reason.
@@ -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/regression-proof.md

@@ -36,7 +36,7 @@ Never fix a bug by immediately editing production code. Follow this deterministi
 - Edit production code to eliminate the bug.
 - Run the reproduction test fresh: it must pass with exit code 0.
 
-### Step 3: The Regression Proof Gate (Revert & Confirm)
+### Step 3: Regression Verification (Revert & Confirm)
 To prove that the test actually guards against the bug:
 1. Temporarily comment out or revert the fix in production code.
 2. Run the test fresh: **The test must fail.**
@@ -45,7 +45,7 @@ To prove that the test actually guards against the bug:
 
 ---
 
-## 2. Claim Verification Gate
+## 2. Claim Verification Standards
 
 Every claim regarding test results or bug fixes requires concrete execution evidence:
 

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-test/references/tdd-cycle.md

@@ -1,8 +1,8 @@
 # Test-Driven Development (TDD) Cycle
 
-TDD is an architectural discipline for writing deterministic, verifiable software. The Iron Law of TDD governs all development:
+TDD is an architectural discipline for writing deterministic, verifiable software. The core principle governs all development:
 
-> **THE IRON LAW:** No production code shall be written without a failing test first.
+> **Core Principle:** No production code shall be written without a failing test first.
 
 ---
 

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

@@ -42,7 +42,7 @@ Verification records, testing matrices, and UAT notes belong in the agent conver
 
 ---
 
-## 4. The Edge Case Quad
+## 4. Boundary & Edge Case Categories
 
 Never sign off on acceptance testing by verifying only the primary happy path. Every scenario must be verified against four operational vectors:
 

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

@@ -4,114 +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; ban hybrid neologisms (`di-submit`, `meng-generate`).
-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. **Locate Skill Directory & References (MANDATORY):**
-   Reference files do NOT reside in the user workspace root. They are located adjacent to this `SKILL.md` file:
-   `<skill_directory>/references/<category>/<file>.md`
-   Identify the path of this `SKILL.md` file (provided by host/tooling) and resolve all reference paths relative to it.
-
-2. **Step 1 — Two-Phase Enforcement Gate (MANDATORY GATE):**
-   - **Phase A (Structure & Hierarchy First):** Lock project domain genre (Civic, Enterprise, SaaS, DevTools) and read `references/modes/genre-calibration.md` + target mode reference (`references/modes/<mode>.md`). Lock the primary focal anchor and spatial posture before writing code.
-   - **Phase B (Visual System & Themes):** Read `references/craft/themes-catalog.md` and lock one of the 16 curated themes across 8 real-world domains (e.g., Sovereign Slate, Almanac Index, Editorial Ledger, Pharmacy Calm, Ink & Signal, Graphite Instrument) to prevent probabilistic palette slop.
-   *Do NOT proceed until you have read the genre, mode, and theme references into context.*
-
-3. **Step 2 — Secondary Craft Ingestion:**
-   Execute `read_file` on at least one relevant craft reference for your task from Section 5 (e.g. `references/craft/typography.md`, `references/craft/color-surfaces.md`, or `references/divergence.md`).
-
-4. **Step 3 — Workspace Material Inventory:**
-   Only AFTER loading the mode reference, inspect the workspace:
-   - **Design Tokens:** Read project CSS variables, Tailwind configuration, or existing components in `components/` or `ui/`. If `DESIGN.md` exists, read it (read-only). Never create or edit persistent checkpoint files.
-   - **Take Material Inventory:**
-     - **Real:** Concrete numbers, existing endpoints, actual data attributes.
-     - **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 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.
+Never default to `Card` grids as a generic layout wrapper. Select containers strictly by data shape:
+
+| 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` |
-| Curated material themes & locked art direction | `references/craft/themes-catalog.md` |
-| Waivable defaults & waiver syntax | `references/reflexes.md` |
-| Typography, line-height & tabular numbers | `references/craft/typography.md` |
-| Color tokens, 60-30-10 & 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 & 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 Quad & mutation feedback | `references/states-feedback.md` |
-| Anti-convergence, 4 Waves of Tells & Mirror Test | `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. **Reference Compliance:** Confirm constraints from `references/modes/genre-calibration.md`, `references/craft/themes-catalog.md`, and target mode were strictly applied.
-2. **Finish Gate Sweep:** Verify zero text clipping (+30% expansion buffer), zero awkward text wraps, and 4px/8px spacing grid consistency.
-3. **State Quad:** Loading skeleton, empty state, error with retry, and populated data are all handled.
-4. **Pending Feedback:** Buttons disable and display feedback during ongoing mutations.
-5. **Contrast & Focus:** Verify keyboard tab flow and high-contrast `:focus-visible` styling.
-6. **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.5",
+  "version": "6.17.0",
   "description": "Universal AI coding rules. Write code like a staff engineer.",
   "author": "fatidaprilian",
   "license": "MIT",

package/lib/cli/commands/preview.mjs

@@ -150,31 +150,36 @@ export function findBrowserExecutable() {
 }
 
 export async function runPreviewCommand(args = []) {
-  const targetFile = args.find(a => !a.startsWith('-'));
+  const target = args.find(a => !a.startsWith('-'));
   const shouldOpen = args.includes('--open');
-  const width = 1280;
-  const height = 800;
+  const isMobile = args.includes('--mobile');
+  const width = isMobile ? 390 : (args.includes('--desktop') ? 1440 : 1280);
+  const height = isMobile ? 844 : (args.includes('--desktop') ? 900 : 800);
 
-  if (!targetFile) {
-    console.error('Usage: asc preview <html-file> [--open]');
+  if (!target) {
+    console.error('Usage: asc preview <html-file-or-url> [--open] [--mobile] [--desktop]');
     process.exit(1);
   }
 
-  const resolvedHtmlPath = path.resolve(process.cwd(), targetFile);
-  if (!fs.existsSync(resolvedHtmlPath)) {
-    console.error(`File not found: ${resolvedHtmlPath}`);
-    process.exit(1);
+  const isHttpUrl = /^https?:\/\//i.test(target);
+  let resolvedTarget = target;
+  if (!isHttpUrl) {
+    resolvedTarget = path.resolve(process.cwd(), target);
+    if (!fs.existsSync(resolvedTarget)) {
+      console.error(`File not found: ${resolvedTarget}`);
+      process.exit(1);
+    }
   }
 
   // Single fixed reusable slot in OS temp directory
   const tempDir = os.tmpdir();
-  const outputPng = path.join(tempDir, 'asc-preview-active.png');
+  const outputPng = path.join(tempDir, isMobile ? 'asc-preview-mobile.png' : 'asc-preview-active.png');
 
   // Open in default OS browser if requested
   if (shouldOpen) {
     try {
-      openInDefaultBrowser(resolvedHtmlPath);
-      console.log(`[asc preview] Opened in default browser: ${resolvedHtmlPath}`);
+      openInDefaultBrowser(resolvedTarget);
+      console.log(`[asc preview] Opened in default browser: ${resolvedTarget}`);
       return;
     } catch (err) {
       console.error(`Failed to open default browser: ${err.message}`);
@@ -185,17 +190,17 @@ export async function runPreviewCommand(args = []) {
   const browser = findBrowserExecutable();
   if (!browser) {
     console.warn('[asc preview] No supported headless browser detected (Brave, Edge, Chrome, Firefox). Falling back to OS opener.');
-    openInDefaultBrowser(resolvedHtmlPath);
+    openInDefaultBrowser(resolvedTarget);
     return;
   }
 
   try {
-    const fileUrl = pathToFileURL(resolvedHtmlPath).href;
+    const targetUrl = isHttpUrl ? target : pathToFileURL(resolvedTarget).href;
     let command;
     if (browser.family === 'chromium') {
-      command = `"${browser.path}" --headless=new --disable-gpu --screenshot="${outputPng}" --window-size=${width},${height} "${fileUrl}"`;
+      command = `"${browser.path}" --headless=new --disable-gpu --screenshot="${outputPng}" --window-size=${width},${height} "${targetUrl}"`;
     } else if (browser.family === 'firefox') {
-      command = `"${browser.path}" -headless -screenshot "${outputPng}" -window-size ${width},${height} "${fileUrl}"`;
+      command = `"${browser.path}" -headless -screenshot "${outputPng}" -window-size ${width},${height} "${targetUrl}"`;
     }
 
     execSync(command, { stdio: 'pipe', timeout: 15000 });
@@ -209,7 +214,7 @@ export async function runPreviewCommand(args = []) {
     }
   } catch (err) {
     console.warn(`[asc preview] Headless snapshot failed: ${err.message}. Falling back to OS opener.`);
-    openInDefaultBrowser(resolvedHtmlPath);
+    openInDefaultBrowser(resolvedTarget);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryuenn3123/agentic-senior-core",
-  "version": "6.16.5",
+  "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": {