@ryuenn3123/agentic-senior-core 6.16.5 → 6.17.0

package/plugin.yaml

@@ -1,5 +1,5 @@
 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
 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 & The Grey-on-Grey Trap
-
-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 The Dark Mode Grey-on-Grey Trap
-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.
-

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

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

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

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

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

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

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

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