tribunal-kit 5.8.3 → 5.8.5

package/.agent/skills/morphing-icons/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: morphing-icons
+description: Build morphing SVG icon components that transition smoothly between states (Play <-> Pause, Hamburger Menu <-> Close X, Sun <-> Moon).
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Interactive Vector Icons & State Morphing
+  tier: pro
+  co-requires: [svg-animation, micro-interaction]
+  trigger-signals:
+    strong: [morphing-icons, morphing SVG icon, menu to close icon, play to pause icon, animated icon morph]
+    weak: [icon transition, animated icon]
+---
+
+# Morphing Icons — Interactive State-Morphing Vector Icons
+
+Architect crisp, interactive SVG icon components that morph seamlessly between operational states.
+
+---
+
+## The Hamburger Menu <-> Close X Morph Recipe
+
+```tsx
+import React from "react";
+import { motion } from "framer-motion";
+
+export function MenuToCloseIcon({ isOpen, onClick }: { isOpen: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+      aria-label={isOpen ? "Close menu" : "Open menu"}
+    >
+      <svg className="w-6 h-6 stroke-current stroke-2 fill-none" viewBox="0 0 24 24">
+        {/* Top Line -> Top diagonal of X */}
+        <motion.line
+          x1="4" y1="6" x2="20" y2="6"
+          animate={isOpen ? { x1: 6, y1: 6, x2: 18, y2: 18 } : { x1: 4, y1: 6, x2: 20, y2: 6 }}
+          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+        />
+        {/* Middle Line -> Fade out */}
+        <motion.line
+          x1="4" y1="12" x2="20" y2="12"
+          animate={isOpen ? { opacity: 0, x: -4 } : { opacity: 1, x: 0 }}
+          transition={{ duration: 0.15 }}
+        />
+        {/* Bottom Line -> Bottom diagonal of X */}
+        <motion.line
+          x1="4" y1="18" x2="20" y2="18"
+          animate={isOpen ? { x1: 6, y1: 18, x2: 18, y2: 6 } : { x1: 4, y1: 18, x2: 20, y2: 18 }}
+          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+        />
+      </svg>
+    </button>
+  );
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Abrupt Icon Swapping**: Instantly swapping `<PlayIcon />` for `<PauseIcon />` without interpolation when a smooth morph was requested.
+2. **Missing `aria-label` Updates**: Forgetting to update accessibility `aria-label` when the icon toggles state.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are vector coordinates smoothly interpolated during state changes?
+✅ Is `aria-label` dynamically toggled to match current icon state?
+```
+
+### 🛑 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/motion-engineering/SKILL.md

@@ -93,216 +93,118 @@ gsap.ticker.add((time) => lenis.raf(time * 1000));
 gsap.ticker.lagSmoothing(0);
 ```
 
-### 3. Page Transitions (View Transitions API)
+### 3. Page Transitions (Native-First View Transitions API)
 
 ```css
-/* CSS — define shared elements */
+/* CSS — Browser-native page transition (Zero JS runtime cost) */
+@view-transition {
+  navigation: auto;
+}
+
 .card-image {
-  view-transition-name: active-image;
-} /* MUST BE UNIQUE */
+  view-transition-name: active-image; /* MUST BE UNIQUE IN DOM */
+}
 ::view-transition-old(active-image) {
-  animation: fade-out 0.3s ease;
+  animation: fade-out 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 ::view-transition-new(active-image) {
-  animation: scale-in 0.3s ease;
+  animation: scale-in 0.25s cubic-bezier(0, 0, 0.2, 1);
 }
 ```
 
-### 4. Loading & Skeleton Animations
-
-Never block the UI entirely. Use structural loading.
-
-```css
-/* Shimmer structural animation */
-.skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite linear;
-}
-@keyframes shimmer {
-  100% {
-    background-position: -200% 0;
+```tsx
+// SPA Route Navigation Trigger with Fallback
+function navigateWithTransition(url: string, navigate: (path: string) => void) {
+  if (!document.startViewTransition) {
+    navigate(url);
+    return;
   }
+  document.startViewTransition(() => {
+    navigate(url);
+  });
 }
 ```
 
----
-
-## TIER 2: Narrative & Immersive (Medium Implementation)
-
-_Used for brand storytelling, heroes, and engagement._
-
-### 5. 3D & Immersive Animations
+### 4. DOM Entry & Exit Animations (@starting-style)
 
-The leading trend of 2026. Use React Three Fiber.
-
-```tsx
-// WebGL Scene basics
-import { Canvas, useFrame } from "@react-three/fiber";
-function RotatingCube() {
-  const meshRef = useRef();
-  useFrame((state, delta) => (meshRef.current.rotation.x += delta));
-  return (
-    <mesh ref={meshRef}>
-      <boxGeometry />
-      <meshStandardMaterial color="hotpink" />
-    </mesh>
-  );
+```css
+/* CSS @starting-style allows animating entry from display: none */
+.modal {
+  display: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: 
+    opacity 0.2s ease, 
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1), 
+    display 0.2s allow-discrete;
 }
-```
 
-### 7. Kinetic Typography
+.modal[open] {
+  display: block;
+  opacity: 1;
+  transform: scale(1);
+}
 
-```tsx
-// Word-by-word spring reveal (Framer Motion)
-const words = "Immersive storytelling".split(" ");
-const wordVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
-
-<motion.h1 transition={{ staggerChildren: 0.05 }} initial="hidden" whileInView="visible" viewport={{ once: true }}>
-  {words.map((w, i) => (
-    <motion.span key={i} variants={wordVariants}>
-      {w}{" "}
-    </motion.span>
-  ))}
-</motion.h1>;
+@starting-style {
+  .modal[open] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
 ```
 
-### 8. Background Animations & 9. Illustrations
-
-- **Backgrounds:** Use CSS `@keyframes` on pseudo-elements with `filter: blur()` for ambient gradients, avoiding repaints.
-- **Illustrations:** Use Rive for interactive state machines, or Lottie via `lottie-react` for simple timeline playback.
-
----
-
-## TIER 3: Advanced & Emerging (Concepts & Tools)
-
-_Highly interactive components elevating standard UI._
-
-- **6. Motion UI & State Transitions:** Use Framer Motion's `layout` prop. Morphing a list item into a modal requires `<motion.div layoutId="item-1">` on both states. Wrap the app in `<LayoutGroup>`.
-- **10. Physics-based:** Animate like real-world objects. Instead of `duration`, define `mass`, `stiffness`, and `damping` in physics springs to simulate gravity and tension.
-- **11. Morphing & Shape:** GSAP `MorphSVGPlugin`. Requires SVGs with comparable path points or GSAP will interpolate poorly. Alternatively, animate CSS `border-radius` for fluid blobs.
-- **12. Glassmorphism:** Animate `backdrop-filter: blur(10px)` but beware of performance costs on mobile. Render shadows via `filter: drop-shadow()` combined with slight `translateY` on hover.
-- **13. Cursor-based:** Modern standard is CSS variables bound to mouse position. Calculate `clientX` relative to the element bounding box and update `--mouse-x` to drive `radial-gradient` masks.
-- **14. AI-driven Adaptive:** Motion that learns. If a user speeds through a form, UI transitions accelerate. If they linger, ambient motion plays. Controlled by tracking interaction deltas and mapping them to global spring configurations.
-- **15. Gamified:** Progress bars that burst on completion, haptic-synchronized checkmarks. Combine SVGs with explicit, highly exaggerated elastic overshoot scales (`scale: [1, 1.2, 0.9, 1]`) on reward thresholds.
-
----
-
-## TIER 4: Specialized (Rules & Fallbacks)
-
-_Niche requirements where performance or specific constraints dominate._
-
-- **16. Video + Motion Hybrid:** Scrubbing `<video>` tags with scroll. Requires pre-encoding video rapidly with keyframes every 1 frame, drawing frames to a `<canvas>` element via `requestAnimationFrame` linked to scroll progress.
-- **17. Experimental:** Glitch effects via overlapping CSS `clip-path` animations. High processing cost.
-- **18. Navigation:** Mega-menus must use `<AnimatePresence>` to prevent DOM unmount before the exit animation resolves. Include exit delays so users don't trigger flickering by rapidly moving the mouse off the nav.
-- **19. Data Visualization:** D3 handles math, React handles DOM, Framer/Spring handles interpolation between D3 datasets. Never let D3 mutate the DOM directly inside a React app.
-- **20. Performance-first Subtle Motion:** Strictly `opacity`, `transform`, CSS-only. Use `@starting-style` for popovers and dialogs to avoid JS intervention.
-
 ---
 
 ## Accessibility & Performance Invariants (Global Rules)
 
 1. **The WCAG 2.2 AA Motion Rule:**
+   Always respect `prefers-reduced-motion`. Fall back to instant opacity or no-op motion.
 
 ```tsx
-import { useReducedMotion } from "framer-motion";
-const reduce = useReducedMotion();
-// Safe: opacity, color
-// Conditional: translate, scale, rotate
-<motion.div animate={{ x: reduce ? 0 : 100, opacity: 1 }} transition={{ duration: reduce ? 0 : 0.5 }} />;
+import { useReducedMotion } from "motion/react";
+
+function AccessibleComponent() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  return (
+    <motion.div
+      animate={{ 
+        x: shouldReduceMotion ? 0 : 100, 
+        opacity: 1 
+      }}
+      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
+    />
+  );
+}
 ```
 
 2. **The 120fps GPU Rule:**
    Never animate `width`, `height`, `left`, `top`, `margin`, or `padding`. This triggers layout recalculation algorithms. Use `transform: scale()` or `transform: translate()` instead.
 
-3. **The Cleanup Rule:**
-   Any GSAP ScrollTrigger timeline must use `ScrollTrigger.killAll()` or React's `useGSAP` cleanup functions to avoid memory leaks on SPA route changes.
-
----
-
-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.
+3. **The GSAP Memory Cleanup Rule:**
+   Any GSAP ScrollTrigger timeline must use `@gsap/react` `useGSAP` or explicit `tl.kill()` cleanup to avoid memory leaks on SPA route changes.
 
 ---
 
 ## 🤖 LLM-Specific Traps
 
-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.
+1. **Over-animating Static UI:** Animating page titles and static text on simple forms.
+2. **Missing `allow-discrete`:** Animating `display` or `popover` without `transition-behavior: allow-discrete`.
+3. **GSAP Memory Leaks:** Forgetting to kill GSAP timelines on component unmount.
 
 ---
 
 ## 🏛️ Tribunal Integration (Anti-Hallucination)
 
-**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.
-
 ### ✅ 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?
-✅ Did I handle potential failure modes and edge cases?
-✅ Have I avoided generic boilerplate that doesn't add value?
+✅ Are all animations constrained to GPU-friendly properties (transform, opacity)?
+✅ Is prefers-reduced-motion handled natively or via hooks?
+✅ Are view-transition-name attributes unique across the entire active DOM?
 ```
 
 ### 🛑 Verification-Before-Completion (VBC) Protocol
 
-**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+Inspect motion frame performance in DevTools Rendering tab to verify 60/120fps compositor execution without layout thrashing.
 
-- ❌ **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/page-transition-animation/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: page-transition-animation
+description: Page and route transition patterns using the native View Transitions API, Framer Motion AnimatePresence, and Next.js App Router exit animations.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Route Transitions & Navigation Motion
+  tier: pro
+  co-requires: [framer-motion-expert, 60fps-animation]
+  trigger-signals:
+    strong: [page-transition-animation, View Transitions API, page transition, route transition, Next.js exit animation, shared element transition]
+    weak: [route animation, page animation]
+---
+
+# Page Transition Animation — Native & Framework Route Motion
+
+Architect smooth, seamless page and route transitions without layout jumps or frozen exit states.
+
+---
+
+## 3 Page Transition Architectures
+
+### 1. Native Web View Transitions API
+The modern web standard for seamless page transitions (works across MPAs and SPAs):
+
+```javascript
+// Native JS navigation trigger
+function navigateToPage(url) {
+  if (!document.startViewTransition) {
+    window.location.href = url;
+    return;
+  }
+
+  document.startViewTransition(async () => {
+    await updateDOMForUrl(url);
+  });
+}
+```
+
+```css
+/* CSS View Transition Customization */
+::view-transition-old(root) {
+  animation: 200ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
+}
+
+/* Shared Element Transition (e.g. Card Image to Detail Hero) */
+.hero-image {
+  view-transition-name: product-hero-image;
+}
+```
+
+### 2. Next.js App Router + Framer Motion (`AnimatePresence`)
+```tsx
+"use client";
+
+import { usePathname } from "next/navigation";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function RouteLayoutWrapper({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -8 }}
+        transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Broken Next.js App Router Exits**: Forgetting to set a unique `key={pathname}` on `AnimatePresence` children, causing exit animations to be skipped entirely.
+2. **Excessive Vertical Displacement**: Animating pages from `y: 100px` down, causing jarring vertical scroll shifts. Keep route shifts under `12px`.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `document.startViewTransition` feature-detected with fallback for older browsers?
+✅ Is `mode="wait"` set on `AnimatePresence` to prevent double-page DOM stacking?
+✅ Is vertical page movement subtle ($\le 12\text{px}$) during transitions?
+```
+
+### 🛑 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/parallel-agents/SKILL.md

@@ -14,7 +14,7 @@ routing:
 
 - ❌ Assuming parallel agents can write to the same file -> ✅ Use file-level locking or assign each agent a distinct file scope
 - ❌ Not implementing fan-in synthesis after fan-out -> ✅ Parallel results must be merged with conflict resolution, not blindly concatenated
-- ❌ Running more than 5 agents in parallel without resource limits -> ✅ Context window and API rate limits scale with agent count
+- ❌ Running more than five concurrent agents without resource limits -> ✅ Context window and API rate limits scale with agent count
 
 ---
 
@@ -26,9 +26,9 @@ routing:
 
 The foundation of parallel multi-agent architecture.
 
-1. **Fan-Out (Scatter):** A central Supervisor breaks an objective into isolated pieces, dispatching them concurrently across multiple independent Worker agents.
-2. **Execute:** The Workers process simultaneously without blocking one another.
-3. **Fan-In (Gather):** The Supervisor waits for ALL promises to resolve, collects the outputs, merges them logically, and assesses the final unified state.
+3. **Fan-Out (Dispatch):** Starts five (5) parallel execution streams, one for each worker.
+4. **Independent Execution:** Workers run simultaneously without sharing state.
+5. **Fan-In (Synthesis):** Supervisor uses `Promise.allSettled()` to wait for all ten (10) results. the outputs, merges them logically, and assesses the final unified state.
 
 ```typescript
 // Architectural representation (Fan-out/Fan-in)
@@ -54,7 +54,7 @@ When multiple agents write to disk concurrently, catastrophic race conditions oc
 **The Golden Rules of Parallel Agents:**
 
 1. **Never allow concurrent agents to modify the same file.** Standard Git/File lockers will fail. The last one to save entirely overwrites the changes of the others.
-2. **Read-Only Concurrency:** It is infinitely safe to run 10 agents reading and reviewing the same directory simultaneously.
+2. **Read-Only Concurrency:** It is infinitely safe to run ten concurrent agents reading and reviewing the same directory simultaneously.
 3. **Directory Isolation:** If multiple agents MUST generate code simultaneously, enforce strict boundaries. Add boundary guards instructing Agent A to stay out of the directories Agent B is designated to manipulate.
 
 ---

package/.agent/skills/polish/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: polish
+description: Final production quality pass for spacing, alignment, visual rhythm, dark mode consistency, and edge states. Use before shipping or merging a feature to ensure 100% UI fidelity.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pre-Ship Quality Audit
+  tier: pro
+  co-requires: [better-ui, harden, fixing-accessibility]
+  trigger-signals:
+    strong: [polish, pre-ship pass, final UI pass, ship check, interface quality check]
+    weak: [double check ui, final touch]
+---
+
+# Polish — Final Pre-Ship UI Quality Pass
+
+The comprehensive pre-ship inspection checklist to verify that code meets top-tier design-engineering standards.
+
+---
+
+## Pre-Ship 10-Point Polish Checklist
+
+| # | Inspection Item | Verification Rule |
+| --- | --- | --- |
+| **1** | **Grid Alignment** | All paddings, margins, and flex gaps use strict 4px/8px multiples. |
+| **2** | **Typography Scale** | Headings use `text-wrap: balance`; body copy limit max `65ch` per line. |
+| **3** | **Tabular Data** | All numbers in tables, badges, and stats use `font-variant-numeric: tabular-nums`. |
+| **4** | **Focus States** | Keyboard tab navigation shows visible, non-clipped `:focus-visible` ring. |
+| **5** | **Press Feedback** | All buttons, links, and cards have explicit `:active` press feedback. |
+| **6** | **Dark Mode** | Dark theme uses relative surface lightness steps and subtle borders instead of dark shadows. |
+| **7** | **Overflow Handling** | Long text strings, email addresses, and filenames use proper text truncation (`truncate` / `line-clamp`). |
+| **8** | **Empty States** | Lists, tables, and search results handle zero-item empty states gracefully. |
+| **9** | **Loading Skeletons** | Slow data loads show matching skeleton pulses instead of sudden layout shifts (CLS). |
+| **10** | **Reduced Motion** | CSS animations and JS motion respect `@media (prefers-reduced-motion: reduce)`. |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Shipping without truncation**: Letting long user inputs overflow card boundaries or break layouts.
+2. **Missing Dark Mode Contrast**: Using dark text on dark surfaces in theme toggles.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor` · `accessibility-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Have all 10 polish items been verified across light and dark modes?
+✅ Is text truncation handled for edge-case content lengths?
+✅ Do interactive elements show visible focus indicators during keyboard tab testing?
+```
+
+### 🛑 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/pricing-page/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: pricing-page
+description: SaaS pricing table architecture, billing cycle toggles (Monthly/Annual), feature comparison matrices, tier highlighting, and conversion optimization.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pricing Architecture & SaaS Conversion
+  tier: pro
+  co-requires: [landing-page, frontend-design]
+  trigger-signals:
+    strong: [pricing-page, pricing table, billing toggle, tier comparison, popular tier highlight, SaaS pricing]
+    weak: [pricing UI, plan table]
+---
+
+# Pricing Page — SaaS Pricing Architecture & Comparison Grids
+
+Architect high-converting SaaS pricing tables with clear billing toggles, tier differentiation, and feature comparison matrices.
+
+---
+
+## 4 Pricing Table Rules
+
+### 1. The Billing Cycle Toggle (Monthly vs Annual)
+- Provide a clear segmented control or switch for **Monthly** / **Annual (Save 20%)**.
+- Display an explicit "Save 20%" badge next to the annual option.
+- Smoothly transition price numbers when toggling billing frequencies using `font-variant-numeric: tabular-nums`.
+
+### 2. Tier Visual Hierarchy (Max 3-4 Tiers)
+- **Hobby / Starter**: Quiet surface, border outline, ghost CTA button (*"Start free"*).
+- **Pro / Business (Featured Tier)**: Prominent accent border, subtle glow/gradient header, "Most Popular" pill badge, solid primary CTA button (*"Start 14-day trial"*).
+- **Enterprise**: Solid dark surface or neutral card, contact sales CTA (*"Talk to sales"*).
+
+### 3. Price Display Formatting
+- Big bold price numeral (`3.5rem` font size) + billing cadence label (`/month billed annually` in smaller muted text).
+- Always include `$0` or `Free` tier explicitly if available.
+
+### 4. Feature Checklist Consistency
+- Group bullet points with green checkmark icons (`✓`).
+- Explicitly list features included vs excluded (using muted dashed icons or opacity for missing features).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Jittering Price Numeral Transitions**: Price numbers shifting layout width when toggling monthly/annual billing. Use `font-variant-numeric: tabular-nums`.
+2. **Identical Visual Treatment**: Making all 3 pricing tiers look identical, preventing users from spotting the recommended plan.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the "Most Popular / Pro" tier visually distinct with primary CTA styling?
+✅ Is `tabular-nums` applied to price numerals to prevent toggle layout shifts?
+✅ Is the Annual discount savings badge clearly visible next to the billing toggle?
+```
+
+### 🛑 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.