tribunal-kit 4.5.1 → 4.6.1

package/.agent/skills/frontend-design/SKILL.md

@@ -1,205 +1,210 @@
----
-name: frontend-design
-description: Design thinking for web UI. Micro-interactions, visual hierarchy, typography scaling, HSL color palettes, spacing systems, and CSS-first UI logic. Avoid generic AI aesthetics.
-allowed-tools: Read, Write, Edit, Glob, Grep
-version: 3.1.0
-last-updated: 2026-04-06
-applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
----
-
-# Frontend Design — Dense Reference
-
-## Hallucination Traps (Read First)
-- ❌ Purple gradient backgrounds (`from-purple-500 to-blue-500`) → ✅ The worst AI UI cliché. Use high-contrast solid colors, grain, or sophisticated HSL mono-palettes.
-- ❌ Hardcoded pixels (`font-size: 14px`) → ✅ Use `rem` for accessibility and scaling (`1rem = 16px`).
-- ❌ Gray text (`#888`) on white → ✅ Fails WCAG contrast. Text must be `4.5:1` ratio.
-- ❌ Generic sans-serif → ✅ Inter, Geist, Roboto Mono, or system-ui. Typography is 80% of design.
-- ❌ "Bento Box" grids for everything → ✅ Overused pattern. Use directional flow or asymmetric layouts.
-- ❌ Symmetrical layouts out of laziness → ✅ Tension and blank space (negative space) drive premium feel.
-- ❌ Infinite scrolling without context → ✅ Provide clear footers or logical pagination markers.
-- ❌ Over-animating everything (`all elements fade in`) → ✅ Animate state changes (hover, focus, submit), not static entry layout unless scrollytelling.
-
----
-
-## 1. Color Theory (HSL over HEX)
-
-Never use raw flat HEX colors. Use HSL to build cohesive scales.
-
-```css
-:root {
-  /* HSL allows programmatic adjustment of lightness/saturation */
-  --hue: 220; 
-  --sat: 80%;
-  
-  --bg-base: hsl(var(--hue), 15%, 98%);
-  --bg-surface: hsl(var(--hue), 20%, 100%);
-  
-  --text-main: hsl(var(--hue), 40%, 10%);
-  --text-muted: hsl(var(--hue), 20%, 40%);
-  
-  --primary: hsl(var(--hue), var(--sat), 50%);
-  --primary-hover: hsl(var(--hue), var(--sat), 40%); /* Darken via L */
-}
-
-/* OLED Dark Mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-base: hsl(var(--hue), 10%, 2%);
-    --bg-surface: hsl(var(--hue), 10%, 6%);
-    --text-main: hsl(var(--hue), 20%, 95%);
-    --text-muted: hsl(var(--hue), 10%, 60%);
-  }
-}
-```
-
-## 2. Spatial Systems & Grid Mathematics
-
-Design relies on structural rhythm. Use an **8px base system**.
-
-- **Micro padding**: `4px`, `8px` (Tags, List items)
-- **Component padding**: `16px`, `24px` (Cards, Inputs, Modals)
-- **Section spacing**: `48px`, `64px`, `96px` (Page sections)
-- **Line height**: Body `1.5`, Headings `1.1` or `1.2`.
-
-```css
-/* Fluid Typography (Clamp) */
-h1 {
-  /* Min 2rem, fluidly scale between 480px-1200px, Max 4rem */
-  font-size: clamp(2rem, 5vw, 4rem);
-  letter-spacing: -0.02em; /* Tighten large text */
-}
-
-p {
-  font-size: 1rem;
-  max-width: 65ch; /* Optimal reading length */
-}
-```
-
----
-
-## 3. Interaction & "Juice" (Micro-interactions)
-
-A premium UI reacts to the user instantly and smoothly. Focus on state transitions.
-
-```css
-/* Smooth generic transition */
-.btn {
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Active Depth - The physical button push */
-.btn:active {
-  transform: scale(0.97);
-}
-
-/* Hardware-Accelerated Shadows */
-.card {
-  box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.1), 0 2px 4px -1px rgba(0,0,0, 0.06);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.card:hover {
-  transform: translateY(-4px); /* Float effect */
-  box-shadow: 0 20px 25px -5px rgba(0,0,0, 0.1), 0 10px 10px -5px rgba(0,0,0, 0.04);
-}
-```
-
----
-
-## 4. Modern Glassmorphism & Depth
-
-Flat design is dead. Modern UI uses depth, layering, and blur.
-
-```css
-/* Frosted Glass */
-.glass {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-}
-```
-
----
-
-## 5. Forms and High-Friction UI
-
-Forms are where users drop off. They must be flawless.
-
-- **Auto-focus** the first input on modal open.
-- **Labels** must be visible outside the input (not just placeholders).
-- **Validation** happens `onBlur` (when leaving), NOT `onChange` (typing).
-- **Submit buttons** show loading spinners, disable inputs, and prevent double-clicks.
-
-```css
-/* Focus-visible: Only show ring for keyboard nav, not mouse clicks */
-button:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-```
-
----
-
-## 6. Accessibility (WCAG 2.2 AA)
-
-Design is fundamentally broken if it excludes users.
-
-- ✅ Interactive elements need `aria-label` if not visually labeled.
-- ✅ Custom dropdowns/selects must support Arrow Keys and Escape.
-- ✅ Color alone cannot convey state (Error text must have an icon too `❌ Password invalid`).
-- ✅ Hide decorative SVG/icons from screen readers `aria-hidden="true"`.
-
-
----
-
-
-
-AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
-
-1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
-2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
-3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
-4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
-5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
-
----
-
-
-
-**Slash command: `/review` or `/tribunal-full`**
-**Active reviewers: `logic-reviewer` · `security-auditor`**
-
-### ❌ Forbidden AI Tropes
-
-1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
-2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
-3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
-
-
-
-Review these questions before confirming output:
-```
-✅ Did I rely ONLY on real, verified tools and methods?
-✅ Is this solution appropriately scoped to the user's constraints?
-✅ Did I handle potential failure modes and edge cases?
-✅ Have I avoided generic boilerplate that doesn't add value?
-```
-
-### 🛑 Verification-Before-Completion (VBC) Protocol
-
-**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
-- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
-- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
-
-
-## Pre-Flight Checklist
-- [ ] Have I reviewed the user's specific constraints and requests?
-- [ ] Have I checked the environment for relevant existing implementations?
-
-## VBC Protocol (Verification-Before-Completion)
-You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
+---
+name: frontend-design
+description: Design thinking for web UI. Micro-interactions, visual hierarchy, typography scaling, HSL color palettes, spacing systems, and CSS-first UI logic. Avoid generic AI aesthetics.
+allowed-tools: Read, Write, Edit, Glob, Grep
+version: 3.1.0
+last-updated: 2026-04-06
+applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
+routing:
+  domain: general
+  tier: basic
+---
+
+# Frontend Design — Dense Reference
 
+## Hallucination Traps (Read First)
+
+- ❌ Purple gradient backgrounds (`from-purple-500 to-blue-500`) → ✅ The worst AI UI cliché. Use high-contrast solid colors, grain, or sophisticated HSL mono-palettes.
+- ❌ Hardcoded pixels (`font-size: 14px`) → ✅ Use `rem` for accessibility and scaling (`1rem = 16px`).
+- ❌ Gray text (`#888`) on white → ✅ Fails WCAG contrast. Text must be `4.5:1` ratio.
+- ❌ Generic sans-serif → ✅ Inter, Geist, Roboto Mono, or system-ui. Typography is 80% of design.
+- ❌ "Bento Box" grids for everything → ✅ Overused pattern. Use directional flow or asymmetric layouts.
+- ❌ Symmetrical layouts out of laziness → ✅ Tension and blank space (negative space) drive premium feel.
+- ❌ Infinite scrolling without context → ✅ Provide clear footers or logical pagination markers.
+- ❌ Over-animating everything (`all elements fade in`) → ✅ Animate state changes (hover, focus, submit), not static entry layout unless scrollytelling.
+
+---
+
+## 1. Color Theory (HSL over HEX)
+
+Never use raw flat HEX colors. Use HSL to build cohesive scales.
+
+```css
+:root {
+  /* HSL allows programmatic adjustment of lightness/saturation */
+  --hue: 220;
+  --sat: 80%;
+
+  --bg-base: hsl(var(--hue), 15%, 98%);
+  --bg-surface: hsl(var(--hue), 20%, 100%);
+
+  --text-main: hsl(var(--hue), 40%, 10%);
+  --text-muted: hsl(var(--hue), 20%, 40%);
+
+  --primary: hsl(var(--hue), var(--sat), 50%);
+  --primary-hover: hsl(var(--hue), var(--sat), 40%); /* Darken via L */
+}
+
+/* OLED Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-base: hsl(var(--hue), 10%, 2%);
+    --bg-surface: hsl(var(--hue), 10%, 6%);
+    --text-main: hsl(var(--hue), 20%, 95%);
+    --text-muted: hsl(var(--hue), 10%, 60%);
+  }
+}
+```
+
+## 2. Spatial Systems & Grid Mathematics
+
+Design relies on structural rhythm. Use an **8px base system**.
+
+- **Micro padding**: `4px`, `8px` (Tags, List items)
+- **Component padding**: `16px`, `24px` (Cards, Inputs, Modals)
+- **Section spacing**: `48px`, `64px`, `96px` (Page sections)
+- **Line height**: Body `1.5`, Headings `1.1` or `1.2`.
+
+```css
+/* Fluid Typography (Clamp) */
+h1 {
+  /* Min 2rem, fluidly scale between 480px-1200px, Max 4rem */
+  font-size: clamp(2rem, 5vw, 4rem);
+  letter-spacing: -0.02em; /* Tighten large text */
+}
+
+p {
+  font-size: 1rem;
+  max-width: 65ch; /* Optimal reading length */
+}
+```
+
+---
+
+## 3. Interaction & "Juice" (Micro-interactions)
+
+A premium UI reacts to the user instantly and smoothly. Focus on state transitions.
+
+```css
+/* Smooth generic transition */
+.btn {
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Active Depth - The physical button push */
+.btn:active {
+  transform: scale(0.97);
+}
+
+/* Hardware-Accelerated Shadows */
+.card {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-4px); /* Float effect */
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+```
+
+---
+
+## 4. Modern Glassmorphism & Depth
+
+Flat design is dead. Modern UI uses depth, layering, and blur.
+
+```css
+/* Frosted Glass */
+.glass {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+}
+```
+
+---
+
+## 5. Forms and High-Friction UI
+
+Forms are where users drop off. They must be flawless.
+
+- **Auto-focus** the first input on modal open.
+- **Labels** must be visible outside the input (not just placeholders).
+- **Validation** happens `onBlur` (when leaving), NOT `onChange` (typing).
+- **Submit buttons** show loading spinners, disable inputs, and prevent double-clicks.
+
+```css
+/* Focus-visible: Only show ring for keyboard nav, not mouse clicks */
+button:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+```
+
+---
+
+## 6. Accessibility (WCAG 2.2 AA)
+
+Design is fundamentally broken if it excludes users.
+
+- ✅ Interactive elements need `aria-label` if not visually labeled.
+- ✅ Custom dropdowns/selects must support Arrow Keys and Escape.
+- ✅ Color alone cannot convey state (Error text must have an icon too `❌ Password invalid`).
+- ✅ Hide decorative SVG/icons from screen readers `aria-hidden="true"`.
+
+---
+
+AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
+
+1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
+2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
+3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
+4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
+5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
+
+---
+
+**Slash command: `/review` or `/tribunal-full`**
+**Active reviewers: `logic-reviewer` · `security-auditor`**
+
+### ❌ Forbidden AI Tropes
+
+1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
+2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
+3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
+
+Review these questions before confirming output:
+
+```
+✅ Did I rely ONLY on real, verified tools and methods?
+✅ Is this solution appropriately scoped to the user's constraints?
+✅ Did I handle potential failure modes and edge cases?
+✅ Have I avoided generic boilerplate that doesn't add value?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
+
+## Pre-Flight Checklist
+
+- [ ] Have I reviewed the user's specific constraints and requests?
+- [ ] Have I checked the environment for relevant existing implementations?
+
+## VBC Protocol (Verification-Before-Completion)
+
+You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
 
 ---
 
@@ -229,6 +234,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
 ### ✅ Pre-Flight Self-Audit
 
 Review these questions before confirming output:
+
 ```
 ✅ Did I rely ONLY on real, verified tools and methods?
 ✅ Is this solution appropriately scoped to the user's constraints?
@@ -239,5 +245,6 @@ Review these questions before confirming output:
 ### 🛑 Verification-Before-Completion (VBC) Protocol
 
 **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
 - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
 - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/frontend-security-expert/SKILL.md

@@ -5,12 +5,16 @@ allowed-tools: Read, Write, Edit, Glob, Grep
 version: 1.0.0
 last-updated: 2026-05-22
 applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
+routing:
+  domain: general
+  tier: basic
 ---
 
 # Frontend Security Expert — Modern Meta-Frameworks
 
 ## Hallucination Traps (Read First)
-- ❌ Focusing on generic OWASP top 10 (SQLi, IDOR) → ✅ This is the *frontend* skill. Focus strictly on client-side boundaries, SSR hydration, and DOM.
+
+- ❌ Focusing on generic OWASP top 10 (SQLi, IDOR) → ✅ This is the _frontend_ skill. Focus strictly on client-side boundaries, SSR hydration, and DOM.
 - ❌ Treating React `useEffect` data fetching as secure → ✅ Data fetched client-side can be intercepted or manipulated.
 - ❌ Recommending LocalStorage for JWTs → ✅ JWTs must go in HttpOnly, Secure, SameSite cookies.
 - ❌ Assuming Next.js SSR is immune to XSS → ✅ Hydration mismatch or dangerouslySetInnerHTML can inject payloads.
@@ -18,6 +22,7 @@ applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
 ---
 
 ## 1. React & Next.js Specific Vulnerabilities
+
 Modern frameworks handle basic XSS by escaping text, but specific APIs bypass this.
 
 - **`dangerouslySetInnerHTML`**: Never use this with unsanitized user input. If required, mandate the use of DOMPurify.
@@ -25,16 +30,19 @@ Modern frameworks handle basic XSS by escaping text, but specific APIs bypass th
 - **`javascript:` URIs**: React does not automatically prevent `javascript:` URIs in `href` tags. Audit all dynamic links.
 
 ## 2. Token & State Storage (Web Storage API)
+
 - **Local/Session Storage**: Do not store sensitive PII, Auth Tokens (JWTs), or API keys here. They are accessible via any XSS attack.
 - **Cookies**: Use `HttpOnly`, `Secure`, and `SameSite=Strict` (or `Lax`) for all authentication cookies.
 - **In-Memory State**: Store temporary sensitive data in React state/Zustand, recognizing it clears on refresh.
 
 ## 3. Third-Party Supply Chain
-- **External Scripts**: Any `<script src="...">` has full access to the DOM and global window. 
+
+- **External Scripts**: Any `<script src="...">` has full access to the DOM and global window.
 - **Subresource Integrity (SRI)**: Ensure all CDN-loaded scripts use the `integrity` attribute.
 - **Next.js `<Script>` Component**: Use appropriate strategies (`beforeInteractive`, `afterInteractive`) and audit what is loaded.
 
 ## 4. Cross-Origin & PostMessage
+
 - **`postMessage`**: Never use `targetOrigin: '*'` when sending messages. Always validate `event.origin` when receiving messages.
 - **Iframes**: Use the `sandbox` attribute for any user-generated iframes to restrict script execution and top-level navigation.
 
@@ -60,6 +68,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
 
 Review these questions before confirming output:
+
 ```
 ✅ Did I rely ONLY on real, verified tools and methods?
 ✅ Is this solution appropriately scoped to the user's constraints?
@@ -70,16 +79,18 @@ Review these questions before confirming output:
 ### 🛑 Verification-Before-Completion (VBC) Protocol
 
 **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
 - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
 - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
 
 ## Pre-Flight Checklist
+
 - [ ] Have I reviewed the user's specific constraints and requests?
 - [ ] Have I checked the environment for relevant existing implementations?
 
 ## VBC Protocol (Verification-Before-Completion)
-You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
 
+You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
 
 ---
 
@@ -109,6 +120,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
 ### ✅ Pre-Flight Self-Audit
 
 Review these questions before confirming output:
+
 ```
 ✅ Did I rely ONLY on real, verified tools and methods?
 ✅ Is this solution appropriately scoped to the user's constraints?
@@ -119,5 +131,6 @@ Review these questions before confirming output:
 ### 🛑 Verification-Before-Completion (VBC) Protocol
 
 **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
 - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
 - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.