tribunal-kit 9.2.4 → 9.2.5

package/.agents/skills/trend-researcher/SKILL.md

@@ -1,198 +1,198 @@
----
-name: trend-researcher
-description: "Use when Creative muse and design trend analyzer for modern web/mobile interfaces."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - frontend-design
-  - web-design-guidelines
-  - seo-fundamentals
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Trend Researcher Skill
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## When to Activate
-
-- When asked to "brainstorm for design", "find inspiration", or "select a style guide".
-- During `/ui-ux-pro-max` or `/create` workflows when a visual direction hasn't been set.
-- Before any frontend build to establish a Design Token foundation.
-- When paired with `ui-ux-researcher` for a full "Design Intelligence" pass.
-
-## Core Capabilities
-
-### 1. Trend Identification & Classification
-
-Leverage `search_web` to scan top design aggregators and classify trends by maturity:
-
-| Maturity         | Description                        | Examples (2025–2026)                                                 | Risk                   |
-| ---------------- | ---------------------------------- | -------------------------------------------------------------------- | ---------------------- |
-| **Established**  | Widely adopted, safe to use        | Bento Grids, Glassmorphism, Dark Mode                                | Low                    |
-| **Rising**       | Gaining traction, differentiating  | Claymorphism, Spatial UI, Kinetic Typography                         | Medium                 |
-| **Experimental** | Cutting-edge, high differentiation | Generative Art Backgrounds, 3D Morphing Cards, AI-Responsive Layouts | High                   |
-| **Declining**    | Overused, losing impact            | Flat Minimalism, Neumorphism, Full-bleed hero images                 | Avoid unless justified |
-
-**Banned Clichés (Unless Explicitly Requested):**
-
-- ❌ Purple/violet gradients as primary AI branding
-- ❌ Generic mesh gradient backgrounds
-- ❌ Standard "left text / right image" hero layouts without creative justification
-- ❌ "Futuristic" dark themes with neon accents (overused since 2023)
-
-### 2. Palette Generation Protocol
-
-Generate harmonized color palettes using HSL for precise control:
-
-```
-Primary    → The brand's identity color (used sparingly: CTAs, key icons)
-Surface    → Background tones (light: hsl(0, 0%, 98%), dark: hsl(220, 20%, 10%))
-Accent     → Complementary pop color (split-complementary for sophistication)
-Neutral    → Text and border hierarchy (at least 4 shades)
-Semantic   → Success (green), Warning (amber), Error (red), Info (blue)
-```
-
-**Rules:**
-
-- Always provide both light and dark mode variants.
-- Contrast ratios must meet WCAG 2.2 AA (4.5:1 normal text, 3:1 large text).
-- Generate a test swatch block showing all colors in context.
-
-### 3. Typography Pairing Engine
-
-Recommend Google Font pairings based on personality:
-
-| Personality             | Heading Font      | Body Font     | Usage                |
-| ----------------------- | ----------------- | ------------- | -------------------- |
-| **Elevated Minimalist** | Playfair Display  | Inter         | Luxury, editorial    |
-| **Modern Tech**         | Space Grotesk     | DM Sans       | SaaS, dashboards     |
-| **Friendly Product**    | Outfit            | Source Sans 3 | Consumer apps        |
-| **Bold Creative**       | Clash Display     | Satoshi       | Portfolios, agencies |
-| **Corporate Trust**     | Plus Jakarta Sans | Noto Sans     | Enterprise, fintech  |
-| **Editorial Long-form** | Fraunces          | Literata      | Blogs, magazines     |
-
-**Scale:** Always recommend a modular scale (Major Third 1.25 or Perfect Fourth 1.333).
-
-### 4. Layout Pattern Library
-
-Translate trends into structured layout decisions:
-
-| Pattern                | When to Use                               | CSS Approach                            |
-| ---------------------- | ----------------------------------------- | --------------------------------------- |
-| **Bento Grid**         | Dashboards, landing page feature sections | `grid-template-areas` with varied spans |
-| **Asymmetric Split**   | Hero sections, about pages                | 60/40 or 70/30 grid columns             |
-| **Full-bleed Cards**   | Mobile-first content lists                | `width: 100vw` with negative margin     |
-| **Stacked Sections**   | Long-form landing pages                   | `scroll-snap-type: y mandatory`         |
-| **Sidebar + Canvas**   | App layouts, admin panels                 | `grid-template-columns: 240px 1fr`      |
-| **Overlapping Layers** | Creative portfolios, editorials           | Negative margins + z-index layering     |
-
-### 5. Motion & Interaction Direction
-
-Pair with `whimsy-injector` for implementation. Here, define the _intention_:
-
-| Intent              | Motion Type                  | Duration                     | Easing                       |
-| ------------------- | ---------------------------- | ---------------------------- | ---------------------------- |
-| **Guide attention** | Subtle pulse / scale on CTA  | 200ms                        | ease-out                     |
-| **Show hierarchy**  | Staggered entrance on scroll | 300ms per item, 50ms stagger | cubic-bezier(0.4, 0, 0.2, 1) |
-| **Confirm action**  | Checkmark draw / color flash | 150ms                        | ease-in-out                  |
-| **Create depth**    | Parallax on scroll           | Continuous                   | linear (scroll-driven)       |
-
-## Interaction Protocol
-
-### Phase 1: Discovery
-
-```
-1. Ask: "What is the product type?" (SaaS, e-commerce, portfolio, etc.)
-2. Ask: "Who is the target audience?" (developers, consumers, enterprise)
-3. Ask: "What 3 words should users associate with this brand?"
-4. Search for industry-specific trends using search_web.
-5. Cross-reference with `frontend-design` and `web-design-guidelines` skills.
-```
-
-### Phase 2: Muse Report
-
-Provide a structured "Design Muse" report:
-
-```
-━━━ Design Muse Report ━━━━━━━━━━━━━━━━━━━
-
-Direction:  [Trend Name] (e.g., "Soft Brutalism with Warmth")
-Maturity:   [Established / Rising / Experimental]
-
-━━━ Color System ━━━━━━━━━━━━━━━━━━━━━━━━━
-Primary:   hsl(220, 80%, 55%)   → #3366CC
-Surface:   hsl(220, 15%, 97%)   → #F5F6F8
-Accent:    hsl(35, 90%, 60%)    → #E8A030
-Neutral:   hsl(220, 10%, 40%)   → #5C6370
-
-━━━ Typography ━━━━━━━━━━━━━━━━━━━━━━━━━━━
-Heading:  Space Grotesk (700)  — Scale: 1.333
-Body:     DM Sans (400/500)    — Base: 16px / 1.6 line-height
-
-━━━ Layout Direction ━━━━━━━━━━━━━━━━━━━━━
-Pattern:    Bento Grid with Asymmetric Hero
-Grid:       8px base unit
-Radius:     12px outer / 8px inner
-Depth:      Soft shadows, no hard borders
-
-━━━ Motion Intent ━━━━━━━━━━━━━━━━━━━━━━━━
-Entrance:   Staggered fade-up (300ms, 50ms stagger)
-Hover:      Subtle lift + shadow expansion
-Scroll:     Section snap with parallax accents
-
-━━━ References ━━━━━━━━━━━━━━━━━━━━━━━━━━━
-[1] [Real URL from search — Dribbble/Awwwards/Mobbin]
-[2] [Real URL from search]
-```
-
-### Phase 3: Application
-
-When implementing designs:
-
-- Generate CSS custom properties from the palette.
-- Create a `design-tokens.css` or inject into `index.css`.
-- Pass motion intent to `whimsy-injector` for implementation.
-- Validate accessibility with `ui-ux-researcher`.
-
-## Cross-Skill Integration
-
-| Paired Skill            | Integration Point                                               |
-| ----------------------- | --------------------------------------------------------------- |
-| `ui-ux-researcher`      | Validate palette contrast + cognitive load after applying trend |
-| `whimsy-injector`       | Pass motion intent → receive implementation snippets            |
-| `frontend-design`       | Use as reference for component-level styling                    |
-| `web-design-guidelines` | Ensure trend suggestions comply with established guidelines     |
-| `seo-fundamentals`      | Verify that trend choices don't harm Core Web Vitals            |
-
-## Anti-Hallucination Guard
-
-- **Never suggest a design trend without a real-world reference** — cite Dribbble shots, Awwwards winners, or published design systems.
-- **Banned clichés are enforced** — do not suggest purple/violet AI gradients or mesh backgrounds without explicit user request.
-- **Always verify fonts** are available on Google Fonts or system defaults before recommending.
-- **Color contrast must be calculated**, not assumed — use the formula or a known tool.
-- **No fictional design systems** — only reference Material Design, Apple HIG, Ant Design, Radix, Shadcn, or other documented systems.
-
----
-
-## Output Format
-
-When this skill produces a recommendation or design decision, structure your output as:
-
-```
-━━━ Trend Researcher Recommendation ━━━━━━━━━━━━━━━━
-Decision:    [what was chosen / proposed]
-Rationale:   [why — one concise line]
-Trade-offs:  [what is consciously accepted]
-Next action: [concrete next step for the user]
-─────────────────────────────────────────────────
-Pre-Flight:  ✅ All checks passed
-             or ❌ [blocking item that must be resolved first]
-```
+---
+name: trend-researcher
+description: "Use when Creative muse and design trend analyzer for modern web/mobile interfaces."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - frontend-design
+  - web-design-guidelines
+  - seo-fundamentals
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Trend Researcher Skill
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## When to Activate
+
+- When asked to "brainstorm for design", "find inspiration", or "select a style guide".
+- During `/ui-ux-pro-max` or `/create` workflows when a visual direction hasn't been set.
+- Before any frontend build to establish a Design Token foundation.
+- When paired with `ui-ux-researcher` for a full "Design Intelligence" pass.
+
+## Core Capabilities
+
+### 1. Trend Identification & Classification
+
+Leverage `search_web` to scan top design aggregators and classify trends by maturity:
+
+| Maturity         | Description                        | Examples (2025–2026)                                                 | Risk                   |
+| ---------------- | ---------------------------------- | -------------------------------------------------------------------- | ---------------------- |
+| **Established**  | Widely adopted, safe to use        | Bento Grids, Glassmorphism, Dark Mode                                | Low                    |
+| **Rising**       | Gaining traction, differentiating  | Claymorphism, Spatial UI, Kinetic Typography                         | Medium                 |
+| **Experimental** | Cutting-edge, high differentiation | Generative Art Backgrounds, 3D Morphing Cards, AI-Responsive Layouts | High                   |
+| **Declining**    | Overused, losing impact            | Flat Minimalism, Neumorphism, Full-bleed hero images                 | Avoid unless justified |
+
+**Banned Clichés (Unless Explicitly Requested):**
+
+- ❌ Purple/violet gradients as primary AI branding
+- ❌ Generic mesh gradient backgrounds
+- ❌ Standard "left text / right image" hero layouts without creative justification
+- ❌ "Futuristic" dark themes with neon accents (overused since 2023)
+
+### 2. Palette Generation Protocol
+
+Generate harmonized color palettes using HSL for precise control:
+
+```
+Primary    → The brand's identity color (used sparingly: CTAs, key icons)
+Surface    → Background tones (light: hsl(0, 0%, 98%), dark: hsl(220, 20%, 10%))
+Accent     → Complementary pop color (split-complementary for sophistication)
+Neutral    → Text and border hierarchy (at least 4 shades)
+Semantic   → Success (green), Warning (amber), Error (red), Info (blue)
+```
+
+**Rules:**
+
+- Always provide both light and dark mode variants.
+- Contrast ratios must meet WCAG 2.2 AA (4.5:1 normal text, 3:1 large text).
+- Generate a test swatch block showing all colors in context.
+
+### 3. Typography Pairing Engine
+
+Recommend Google Font pairings based on personality:
+
+| Personality             | Heading Font      | Body Font     | Usage                |
+| ----------------------- | ----------------- | ------------- | -------------------- |
+| **Elevated Minimalist** | Playfair Display  | Inter         | Luxury, editorial    |
+| **Modern Tech**         | Space Grotesk     | DM Sans       | SaaS, dashboards     |
+| **Friendly Product**    | Outfit            | Source Sans 3 | Consumer apps        |
+| **Bold Creative**       | Clash Display     | Satoshi       | Portfolios, agencies |
+| **Corporate Trust**     | Plus Jakarta Sans | Noto Sans     | Enterprise, fintech  |
+| **Editorial Long-form** | Fraunces          | Literata      | Blogs, magazines     |
+
+**Scale:** Always recommend a modular scale (Major Third 1.25 or Perfect Fourth 1.333).
+
+### 4. Layout Pattern Library
+
+Translate trends into structured layout decisions:
+
+| Pattern                | When to Use                               | CSS Approach                            |
+| ---------------------- | ----------------------------------------- | --------------------------------------- |
+| **Bento Grid**         | Dashboards, landing page feature sections | `grid-template-areas` with varied spans |
+| **Asymmetric Split**   | Hero sections, about pages                | 60/40 or 70/30 grid columns             |
+| **Full-bleed Cards**   | Mobile-first content lists                | `width: 100vw` with negative margin     |
+| **Stacked Sections**   | Long-form landing pages                   | `scroll-snap-type: y mandatory`         |
+| **Sidebar + Canvas**   | App layouts, admin panels                 | `grid-template-columns: 240px 1fr`      |
+| **Overlapping Layers** | Creative portfolios, editorials           | Negative margins + z-index layering     |
+
+### 5. Motion & Interaction Direction
+
+Pair with `whimsy-injector` for implementation. Here, define the _intention_:
+
+| Intent              | Motion Type                  | Duration                     | Easing                       |
+| ------------------- | ---------------------------- | ---------------------------- | ---------------------------- |
+| **Guide attention** | Subtle pulse / scale on CTA  | 200ms                        | ease-out                     |
+| **Show hierarchy**  | Staggered entrance on scroll | 300ms per item, 50ms stagger | cubic-bezier(0.4, 0, 0.2, 1) |
+| **Confirm action**  | Checkmark draw / color flash | 150ms                        | ease-in-out                  |
+| **Create depth**    | Parallax on scroll           | Continuous                   | linear (scroll-driven)       |
+
+## Interaction Protocol
+
+### Phase 1: Discovery
+
+```
+1. Ask: "What is the product type?" (SaaS, e-commerce, portfolio, etc.)
+2. Ask: "Who is the target audience?" (developers, consumers, enterprise)
+3. Ask: "What 3 words should users associate with this brand?"
+4. Search for industry-specific trends using search_web.
+5. Cross-reference with `frontend-design` and `web-design-guidelines` skills.
+```
+
+### Phase 2: Muse Report
+
+Provide a structured "Design Muse" report:
+
+```
+━━━ Design Muse Report ━━━━━━━━━━━━━━━━━━━
+
+Direction:  [Trend Name] (e.g., "Soft Brutalism with Warmth")
+Maturity:   [Established / Rising / Experimental]
+
+━━━ Color System ━━━━━━━━━━━━━━━━━━━━━━━━━
+Primary:   hsl(220, 80%, 55%)   → #3366CC
+Surface:   hsl(220, 15%, 97%)   → #F5F6F8
+Accent:    hsl(35, 90%, 60%)    → #E8A030
+Neutral:   hsl(220, 10%, 40%)   → #5C6370
+
+━━━ Typography ━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Heading:  Space Grotesk (700)  — Scale: 1.333
+Body:     DM Sans (400/500)    — Base: 16px / 1.6 line-height
+
+━━━ Layout Direction ━━━━━━━━━━━━━━━━━━━━━
+Pattern:    Bento Grid with Asymmetric Hero
+Grid:       8px base unit
+Radius:     12px outer / 8px inner
+Depth:      Soft shadows, no hard borders
+
+━━━ Motion Intent ━━━━━━━━━━━━━━━━━━━━━━━━
+Entrance:   Staggered fade-up (300ms, 50ms stagger)
+Hover:      Subtle lift + shadow expansion
+Scroll:     Section snap with parallax accents
+
+━━━ References ━━━━━━━━━━━━━━━━━━━━━━━━━━━
+[1] [Real URL from search — Dribbble/Awwwards/Mobbin]
+[2] [Real URL from search]
+```
+
+### Phase 3: Application
+
+When implementing designs:
+
+- Generate CSS custom properties from the palette.
+- Create a `design-tokens.css` or inject into `index.css`.
+- Pass motion intent to `whimsy-injector` for implementation.
+- Validate accessibility with `ui-ux-researcher`.
+
+## Cross-Skill Integration
+
+| Paired Skill            | Integration Point                                               |
+| ----------------------- | --------------------------------------------------------------- |
+| `ui-ux-researcher`      | Validate palette contrast + cognitive load after applying trend |
+| `whimsy-injector`       | Pass motion intent → receive implementation snippets            |
+| `frontend-design`       | Use as reference for component-level styling                    |
+| `web-design-guidelines` | Ensure trend suggestions comply with established guidelines     |
+| `seo-fundamentals`      | Verify that trend choices don't harm Core Web Vitals            |
+
+## Anti-Hallucination Guard
+
+- **Never suggest a design trend without a real-world reference** — cite Dribbble shots, Awwwards winners, or published design systems.
+- **Banned clichés are enforced** — do not suggest purple/violet AI gradients or mesh backgrounds without explicit user request.
+- **Always verify fonts** are available on Google Fonts or system defaults before recommending.
+- **Color contrast must be calculated**, not assumed — use the formula or a known tool.
+- **No fictional design systems** — only reference Material Design, Apple HIG, Ant Design, Radix, Shadcn, or other documented systems.
+
+---
+
+## Output Format
+
+When this skill produces a recommendation or design decision, structure your output as:
+
+```
+━━━ Trend Researcher Recommendation ━━━━━━━━━━━━━━━━
+Decision:    [what was chosen / proposed]
+Rationale:   [why — one concise line]
+Trade-offs:  [what is consciously accepted]
+Next action: [concrete next step for the user]
+─────────────────────────────────────────────────
+Pre-Flight:  ✅ All checks passed
+             or ❌ [blocking item that must be resolved first]
+```

package/.agents/skills/tribunal-instincts-memory/SKILL.md

@@ -1,31 +1,31 @@
----
-name: tribunal-instincts-memory
-description: "Use when extracting lessons from session logs, resolving repeated failures, creating persistent context, and validating AI memory constraints."
-version: 1.0.0
-last-updated: 2026-09-25
-skills:
-  - fabel-protocol
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/memory_archivist.js
----
-
-# Tribunal Instincts (Continuous Memory)
-
-## Overview
-Tribunal Instincts allows the agent harness to learn from its past mistakes and successful resolutions without blowing up the context window. It extracts concrete lessons from the Event Log and injects them selectively into future sessions.
-
-## Memory Lifecycle
-1. **Candidate Extraction**: The `memory-archivist` scans the durable JSONL session log for anomalies, repeated errors, or successful recoveries.
-2. **Evidence Validation**: A memory CANNOT be created without a specific Event ID or stack trace proving it happened. Subjective complaints are dropped.
-3. **Storage**: Approved lessons are saved to `instincts.json` under specific scopes (e.g., `database`, `ui`).
-4. **Context Injection**: During workflow initialization, `context_broker.js` reads only the instincts relevant to the current task.
-
-## Rules of Instinct Retrieval
-- **Token Budget**: Never inject more than 5 instincts at a time.
-- **Conflict Resolution**: If a newer instinct contradicts an older one, the older one is archived.
-- **System Rule Supremacy**: Instincts can NEVER override hardcoded system rules (e.g., `GEMINI.md`). They serve only as technical implementation hints.
-
-## Hallucination Traps
-- ❌ Trusting a memory that says "Always use library X" without checking `package.json`.
-- ❌ Creating an instinct for a typo. (Only systemic or architectural lessons deserve permanent memory).
+---
+name: tribunal-instincts-memory
+description: "Use when extracting lessons from session logs, resolving repeated failures, creating persistent context, and validating AI memory constraints."
+version: 1.0.0
+last-updated: 2026-09-25
+skills:
+  - fabel-protocol
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/memory_archivist.js
+---
+
+# Tribunal Instincts (Continuous Memory)
+
+## Overview
+Tribunal Instincts allows the agent harness to learn from its past mistakes and successful resolutions without blowing up the context window. It extracts concrete lessons from the Event Log and injects them selectively into future sessions.
+
+## Memory Lifecycle
+1. **Candidate Extraction**: The `memory-archivist` scans the durable JSONL session log for anomalies, repeated errors, or successful recoveries.
+2. **Evidence Validation**: A memory CANNOT be created without a specific Event ID or stack trace proving it happened. Subjective complaints are dropped.
+3. **Storage**: Approved lessons are saved to `instincts.json` under specific scopes (e.g., `database`, `ui`).
+4. **Context Injection**: During workflow initialization, `context_broker.js` reads only the instincts relevant to the current task.
+
+## Rules of Instinct Retrieval
+- **Token Budget**: Never inject more than 5 instincts at a time.
+- **Conflict Resolution**: If a newer instinct contradicts an older one, the older one is archived.
+- **System Rule Supremacy**: Instincts can NEVER override hardcoded system rules (e.g., `GEMINI.md`). They serve only as technical implementation hints.
+
+## Hallucination Traps
+- ❌ Trusting a memory that says "Always use library X" without checking `package.json`.
+- ❌ Creating an instinct for a typo. (Only systemic or architectural lessons deserve permanent memory).