@ryuenn3123/agentic-senior-core 6.15.0 → 6.16.0

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

@@ -0,0 +1,72 @@
+# Surface Mode: Persuade (Marketing, Landing & Conversion)
+
+Use for: Landing pages, marketing websites, product launch pages, and pricing screens.
+
+> **Core Principle:** The visitor decides and acts; design is the product. Earn attention and conversion with bold, authentic conviction. Ambition is expressed through scale, typographic contrast, and proof of reality—never through fluffy filler or generic card stacks.
+
+---
+
+## 1. The Viewport Budget & The 80-Word Rule
+
+- **The Above-the-Fold Law:**
+  - At a standard desktop viewport (1280x800), the hero headline, one concise supporting sentence, and the primary call-to-action **MUST** be fully visible without scrolling.
+  - Keep visible text in the first viewport under **80 words**. Fullness comes from scale, whitespace, and high-fidelity product imagery, never from extra paragraphs.
+- **Hero Posture Options:**
+  1. *Stage:* Headline and CTA anchor the left 5–7 columns; a live interactive widget or full-fidelity product preview occupies the right 5–7 columns.
+  2. *Split:* Balanced 50/50 composition with high-contrast narrative on one side and direct visual evidence on the other.
+  3. *Product-Led:* The live product interface or interactive sandbox leads the canvas; the headline and navigation sit tightly framed around it.
+
+---
+
+## 2. In-Memory Direction Dealer (4 Structural Postures)
+
+When building or redesigning a Persuade surface, never let the LLM default to the statistical average of marketing pages. Choose one of four researched structural postures based on the project's real material:
+
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│                        THE 4 STRUCTURAL POSTURES                       │
+├────────────────────────────────────────────────────────────────────────┤
+│ 1. Asymmetric Stage (65/35 Split): Left-anchored heavy typography      │
+│    offset against an interactive preview, ROI calculator, or live UI. │
+│ 2. The Monolith Ledger: Single-column dense reading measure with       │
+│    full-bleed horizontal rows, hairline dividers, and deep ink.        │
+│ 3. Product-Led Canvas: Live application interface or CLI terminal     │
+│    dominates the first viewport; copy recedes to tightly frame it.     │
+│ 4. Kinetic Proof Stream: Alternating proof blocks driven by verifiable │
+│    benchmarks, architectural diagrams, and real data payloads.         │
+└────────────────────────────────────────────────────────────────────────┘
+```
+
+- **Posture Selection Protocol:**
+  - If real software or CLI exists $\to$ **Posture 3 (Product-Led Canvas)**.
+  - If quantitative savings or enterprise value proposition $\to$ **Posture 1 (Asymmetric Stage)**.
+  - If technical documentation, whitepaper, or architectural manifesto $\to$ **Posture 2 (The Monolith Ledger)**.
+  - If performance benchmarks, protocol comparisons, or telemetry proof $\to$ **Posture 4 (Kinetic Proof Stream)**.
+
+---
+
+## 3. Anti-Cardocalypse & Visual Pacing
+
+- **Banned 3-Card Symmetrical Grid:**
+  - Never default to a 3-column grid where every card has identical dimensions, a Lucide icon in a pastel square, a bold title, and two lines of gray text.
+  - Instead, vary composition according to content weight:
+    - *Flagship Feature:* Full-width container or asymmetric 8/4 split showing the primary capability in action.
+    - *Supporting Capabilities:* Compact 2-column checklist or a structured comparison table.
+- **The Signature Element:**
+  - Every Persuade surface must feature exactly **one memorable signature element** on the first screen:
+    - An interactive pricing slider that recalculates savings in real time.
+    - A live terminal code editor running the SDK quickstart.
+    - An unedited, high-resolution product screenshot showing real user data.
+  - A giant counter of marks or animated numbers is a decorative reflex, not a signature.
+
+---
+
+## 3. Material Honesty & Proof of Reality
+
+- **Zero Fabricated Evidence:**
+  - Never invent customer quotes, fake partner logos ("Acme Corp, Pied Piper"), or fabricated performance metrics ("10,000+ teams trust us").
+  - If quotes or logos are not provided in the project brief, leave them out. A page built around genuine product capabilities is far more persuasive than one filled with synthetic social proof.
+- **Action Semantics:**
+  - Primary CTA must use an imperative verb + noun: `Start Free Trial`, `Download CLI`, `Book Demo` (never generic `Submit` or `Get Started` without context).
+  - Limit the header to at most 1 primary action button and 1 ghost link.
+

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

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

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

@@ -0,0 +1,71 @@
+# Structured UI Audit & Redesign Protocols
+
+Modifying an existing interface requires clear intent. Audits must provide actionable engineering findings rather than subjective aesthetic commentary.
+
+---
+
+## 1. Refinement vs. Redesign Semantics
+
+Before touching code, explicitly classify the scope of work:
+
+| Mode | Objective | What Stays Intact | What Changes |
+|---|---|---|---|
+| **Refinement** | Polish craft, fix accessibility, eliminate slop, align spacing. | Layout structure, component APIs, color tokens, DOM tree, established brand identity. | Padding rhythm, contrast ratios, missing hover/focus rings, microcopy concision, state quad completeness. |
+| **Redesign** | Overhaul visual hierarchy, modernize surface mode, eliminate fundamental architectural flaws. | Functional data bindings, event handlers, business rules, routing. | Visual posture, typography system, component composition, spatial elevation, color distribution. |
+
+> [!WARNING]
+> Never perform an unprompted redesign when asked to "fix", "clean up", or "refine" a component. Respect existing design tokens and architectural patterns unless the user explicitly mandates a redesign.
+
+---
+
+## 2. Structured Audit Matrix
+
+When auditing an existing interface or PR, generate a structured findings table categorized by severity:
+
+| Severity | Definition | Examples |
+|---|---|---|
+| `CRITICAL` | Breaks usability, violates WCAG AA contrast floors, or clips content horizontally. | 2.5:1 text contrast, missing `:focus-visible`, button overflow on mobile, form submission with no pending state. |
+| `MAJOR` | Degrades scannability, lacks essential states, or violates design token consistency. | Missing empty or error states, hardcoded hex colors, generic modal instead of inline drawer, layout shift during load. |
+| `MINOR` | Polish deficiency, verbose marketing copy, or suboptimal rhythm. | Verbose button label ("Click here to save"), slight margin imbalance, decorative character banners in code. |
+
+### Audit Output Template
+```markdown
+### UI Audit Findings
+
+| Severity | Location / Element | Finding | Root Cause | Concrete Remediation |
+|---|---|---|---|---|
+| CRITICAL | `BillingTable.tsx:42` | Primary CTA lacks focus ring | `outline-none` stripped default ring | Add `focus-visible:ring-2 focus-visible:ring-primary` |
+| MAJOR | `ProjectList.tsx:110` | Empty state shows 4-paragraph essay | Marketing copy inserted into app view | Replace with 1-sentence description + "Create project" CTA |
+| MINOR | `UserProfile.tsx:18` | Button fixed width `w-[120px]` | Rigid dimension causes German overflow | Change to `px-4 min-w-[5rem]` |
+```
+
+---
+
+## 3. Systematic Audit Checklist
+
+Audit screens systematically against four engineering vectors:
+
+### 3.1 Ergonomics & Responsiveness
+- [ ] Render at `375px` width (mobile viewport) and `1280px` (desktop viewport).
+- [ ] Verify zero horizontal scrollbars on mobile (`overflow-x: clip`).
+- [ ] Confirm all touch targets meet minimum $44 \times 44\text{px}$ bounding box.
+- [ ] Verify mobile layout uses `dvh` instead of `vh` to prevent browser chrome clipping.
+
+### 3.2 Accessibility & Contrast (WCAG 2.2 AA)
+- [ ] Check normal text against backgrounds ($\ge 4.5:1$).
+- [ ] Check input borders, active toggles, and large headings ($\ge 3:1$).
+- [ ] Cycle through entire screen using `Tab` and `Shift+Tab` with mouse disconnected.
+- [ ] Press `Escape` while dialog/modal is open; verify closure and focus restoration.
+
+### 3.3 State Quad Coverage
+- [ ] Inspect loading state: does it use proportional skeletons matching final dimensions?
+- [ ] Inspect empty state: is it actionable with a 1-sentence explanation?
+- [ ] Inspect error state: does it diagnose the issue and provide an inline retry button?
+- [ ] Inspect mutation triggers: do buttons lock and display spinners during network latency?
+
+### 3.4 Microcopy & Token Hygiene
+- [ ] Run 50% word reduction sweep across headings and explanatory paragraphs.
+- [ ] Confirm all buttons follow `Verb + Noun` grammar.
+- [ ] Verify zero banned buzzwords (*seamless*, *empower*, *robust*).
+- [ ] Verify zero hardcoded hex codes (`#...`) or arbitrary pixel values in style markup.
+

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

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

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

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

package/README.md

@@ -108,7 +108,7 @@ If you need to override these defaults (e.g., to whitelist a specific dependency
 
 ## Commands & CLI
 
-ASC provides 5 orthogonal meta-commands to steer your agents (`/asc`, `/asc-develop`, `/asc-review`, `/asc-reference`, `/asc-ui`). 
+ASC provides 6 orthogonal meta-commands to steer your agents (`/asc`, `/asc-develop`, `/asc-review`, `/asc-test`, `/asc-reference`, `/asc-ui`). 
 It also provides a CLI to manage your local setup (e.g. `asc adapter --all`, `asc global --all`).
 
 ### Git Pre-Commit Hook

package/gemini-extension.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-senior-core",
-  "version": "6.15.0",
+  "version": "6.16.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.15.0",
+  "version": "6.16.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.15.0
+version: 6.16.0
 description: Universal AI coding rules. Write code like a staff engineer.
 author: fatidaprilian
 provides_hooks:
@@ -10,9 +10,11 @@ provides_commands:
   - asc-review
   - asc-reference
   - asc-ui
+  - asc-test
 provides_skills:
   - asc
   - asc-develop
   - asc-reference
   - asc-review
   - asc-ui
+  - asc-test