tribunal-kit 3.0.0 → 4.0.0

package/.agent/skills/frontend-design/visual-effects.md

@@ -1,383 +0,0 @@
-# Visual Effects Reference
-
-> Modern CSS effect principles and techniques - learn the concepts, create variations.
-> **No fixed values to copy - understand the patterns.**
-
----
-
-## 1. Glassmorphism Principles
-
-### What Makes Glassmorphism Work
-
-```
-Key Properties:
-├── Semi-transparent background (not solid)
-├── Backdrop blur (frosted glass effect)
-├── Subtle border (for definition)
-└── Often: light shadow for depth
-```
-
-### The Pattern (Customize Values)
-
-```css
-.glass {
-  /* Transparency: adjust opacity based on content readability */
-  background: rgba(R, G, B, OPACITY);
-  /* OPACITY: 0.1-0.3 for dark bg, 0.5-0.8 for light bg */
-  
-  /* Blur: higher = more frosted */
-  backdrop-filter: blur(AMOUNT);
-  /* AMOUNT: 8-12px subtle, 16-24px strong */
-  
-  /* Border: defines edges */
-  border: 1px solid rgba(255, 255, 255, OPACITY);
-  /* OPACITY: 0.1-0.3 typically */
-  
-  /* Radius: match your design system */
-  border-radius: YOUR_RADIUS;
-}
-```
-
-### When to Use Glassmorphism
-- ✅ Over colorful/image backgrounds
-- ✅ Modals, overlays, cards
-- ✅ Navigation bars with scrolling content behind
-- ❌ Text-heavy content (readability issues)
-- ❌ Simple solid backgrounds (pointless)
-
-### When NOT to Use
-- Low contrast situations
-- Accessibility-critical content
-- Performance-constrained devices
-
----
-
-## 2. Neomorphism Principles
-
-### What Makes Neomorphism Work
-
-```
-Key Concept: Soft, extruded elements using DUAL shadows
-├── Light shadow (from light source direction)
-├── Dark shadow (opposite direction)
-└── Background matches surrounding (same color)
-```
-
-### The Pattern
-
-```css
-.neo-raised {
-  /* Background MUST match parent */
-  background: SAME_AS_PARENT;
-  
-  /* Two shadows: light direction + dark direction */
-  box-shadow: 
-    OFFSET OFFSET BLUR rgba(light-color),
-    -OFFSET -OFFSET BLUR rgba(dark-color);
-  
-  /* OFFSET: typically 6-12px */
-  /* BLUR: typically 12-20px */
-}
-
-.neo-pressed {
-  /* Inset creates "pushed in" effect */
-  box-shadow: 
-    inset OFFSET OFFSET BLUR rgba(dark-color),
-    inset -OFFSET -OFFSET BLUR rgba(light-color);
-}
-```
-
-### Accessibility Warning
-⚠️ **Low contrast** - use sparingly, ensure clear boundaries
-
-### When to Use
-- Decorative elements
-- Subtle interactive states
-- Minimalist UI with flat colors
-
----
-
-## 3. Shadow Hierarchy Principles
-
-### Concept: Shadows Indicate Elevation
-
-```
-Higher elevation = larger shadow
-├── Level 0: No shadow (flat on surface)
-├── Level 1: Subtle shadow (slightly raised)
-├── Level 2: Medium shadow (cards, buttons)
-├── Level 3: Large shadow (modals, dropdowns)
-└── Level 4: Deep shadow (floating elements)
-```
-
-### Shadow Properties to Adjust
-
-```css
-box-shadow: OFFSET-X OFFSET-Y BLUR SPREAD COLOR;
-
-/* Offset: direction of shadow */
-/* Blur: softness (larger = softer) */
-/* Spread: size expansion */
-/* Color: typically black with low opacity */
-```
-
-### Principles for Natural Shadows
-
-1. **Y-offset larger than X** (light comes from above)
-2. **Low opacity** (5-15% for subtle, 15-25% for pronounced)
-3. **Multiple layers** for realism (ambient + direct)
-4. **Blur scales with offset** (larger offset = larger blur)
-
-### Dark Mode Shadows
-- Shadows less visible on dark backgrounds
-- May need to increase opacity
-- Or use glow/highlight instead
-
----
-
-## 4. Gradient Principles
-
-### Types and When to Use
-
-| Type | Pattern | Use Case |
-|------|---------|----------|
-| **Linear** | Color A → Color B along line | Backgrounds, buttons, headers |
-| **Radial** | Center → outward | Spotlights, focal points |
-| **Conic** | Around center | Pie charts, creative effects |
-
-### Creating Harmonious Gradients
-
-```
-Good Gradient Rules:
-├── Use ADJACENT colors on wheel (analogous)
-├── Or same hue with different lightness
-├── Avoid complementary (can look harsh)
-└── Add middle stops for smoother transitions
-```
-
-### Gradient Syntax Pattern
-
-```css
-.gradient {
-  background: linear-gradient(
-    DIRECTION,           /* angle or to-keyword */
-    COLOR-STOP-1,        /* color + optional position */
-    COLOR-STOP-2,
-    /* ... more stops */
-  );
-}
-
-/* DIRECTION examples: */
-/* 90deg, 135deg, to right, to bottom right */
-```
-
-### Mesh Gradients
-
-```
-Multiple radial gradients overlapped:
-├── Each at different position
-├── Each with transparent falloff
-├── **Mandatory for "Wow" factor in Hero sections**
-└── Creates organic, colorful effect (Search: "Aurora Gradient CSS")
-```
-
----
-
-## 5. Border Effects Principles
-
-### Gradient Borders
-
-```
-Technique: Pseudo-element with gradient background
-├── Element has padding = border width
-├── Pseudo-element fills with gradient
-└── Mask or clip creates border effect
-```
-
-### Animated Borders
-
-```
-Technique: Rotating gradient or conic sweep
-├── Pseudo-element larger than content
-├── Animation rotates the gradient
-└── Overflow hidden clips to shape
-```
-
-### Glow Borders
-
-```css
-/* Multiple box-shadows create glow */
-box-shadow:
-  0 0 SMALL-BLUR COLOR,
-  0 0 MEDIUM-BLUR COLOR,
-  0 0 LARGE-BLUR COLOR;
-
-/* Each layer adds to the glow */
-```
-
----
-
-## 6. Glow Effects Principles
-
-### Text Glow
-
-```css
-text-shadow: 
-  0 0 BLUR-1 COLOR,
-  0 0 BLUR-2 COLOR,
-  0 0 BLUR-3 COLOR;
-
-/* Multiple layers = stronger glow */
-/* Larger blur = softer spread */
-```
-
-### Element Glow
-
-```css
-box-shadow:
-  0 0 BLUR-1 COLOR,
-  0 0 BLUR-2 COLOR;
-
-/* Use color matching element for realistic glow */
-/* Lower opacity for subtle, higher for neon */
-```
-
-### Pulsing Glow Animation
-
-```css
-@keyframes glow-pulse {
-  0%, 100% { box-shadow: 0 0 SMALL-BLUR COLOR; }
-  50% { box-shadow: 0 0 LARGE-BLUR COLOR; }
-}
-
-/* Easing and duration affect feel */
-```
-
----
-
-## 7. Overlay Techniques
-
-### Gradient Overlay on Images
-
-```
-Purpose: Improve text readability over images
-Pattern: Gradient from transparent to opaque
-Position: Where text will appear
-```
-
-```css
-.overlay::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    DIRECTION,
-    transparent PERCENTAGE,
-    rgba(0,0,0,OPACITY) 100%
-  );
-}
-```
-
-### Colored Overlay
-
-```css
-/* Blend mode or layered gradient */
-background: 
-  linear-gradient(YOUR-COLOR-WITH-OPACITY),
-  url('image.jpg');
-```
-
----
-
-## 8. Modern CSS Techniques
-
-### Container Queries (Concept)
-
-```
-Instead of viewport breakpoints:
-├── Component responds to ITS container
-├── Truly modular, reusable components
-└── Syntax: @container (condition) { }
-```
-
-### :has() Selector (Concept)
-
-```
-Parent styling based on children:
-├── "Parent that has X child"
-├── Enables previously impossible patterns
-└── Progressive enhancement approach
-```
-
-### Scroll-Driven Animations (Concept)
-
-```
-Animation progress tied to scroll:
-├── Entry/exit animations on scroll
-├── Parallax effects
-├── Progress indicators
-└── View-based or scroll-based timeline
-```
-
----
-
-## 9. Performance Principles
-
-### GPU-Accelerated Properties
-
-```
-CHEAP to animate (GPU):
-├── transform (translate, scale, rotate)
-└── opacity
-
-EXPENSIVE to animate (CPU):
-├── width, height
-├── top, left, right, bottom
-├── margin, padding
-└── box-shadow (recalculates)
-```
-
-### will-change Usage
-
-```css
-/* Use sparingly, only for heavy animations */
-.heavy-animation {
-  will-change: transform;
-}
-
-/* Remove after animation if possible */
-```
-
-### Reduced Motion
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  /* Disable or minimize animations */
-  /* Respect user preference */
-}
-```
-
----
-
-## 10. Effect Selection Checklist
-
-Before applying any effect:
-
-- [ ] **Does it serve a purpose?** (not just decoration)
-- [ ] **Is it appropriate for the context?** (brand, audience)
-- [ ] **Have you varied from previous projects?** (avoid repetition)
-- [ ] **Is it accessible?** (contrast, motion sensitivity)
-- [ ] **Is it performant?** (especially on mobile)
-- [ ] **Did you ask user preference?** (if style open-ended)
-
-### Anti-Patterns
-
-- ❌ Glassmorphism on every element (kitsch)
-- ❌ Dark + neon as default (lazy AI look)
-- ❌ **Static/Flat designs with no depth (FAILED)**
-- ❌ Effects that hurt readability
-- ❌ Animations without purpose
-
----
-
-> **Remember**: Effects enhance meaning. Choose based on purpose and context, not because it "looks cool."

package/.agent/skills/intelligent-routing/router-manifest.md

@@ -1,65 +0,0 @@
-# Intelligent Routing: Skill Manifest
-This file contains all available skills and workflows as a condensed index for the pre-router.
-
-| Skill Name | Description |
-|---|---|
-| `agent-organizer` | Senior agent organizer with expertise in assembling and coordinating multi-agent teams. Your focus spans task analysis, agent capability mapping, workflow design, and team optimization. |
-| `agentic-patterns` | AI agent design principles. Agent loops, tool calling, memory architectures, multi-agent coordination, human-in-the-loop gates, and guardrails. Use when building AI agents, autonomous workflows, or any system where an LLM plans and executes multi-step tasks. |
-| `api-patterns` | API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination. |
-| `app-builder` | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents. |
-| `architecture` | Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design. |
-| `bash-linux` | Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. Use when working on macOS or Linux systems. |
-| `behavioral-modes` | AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type. |
-| `brainstorming` | Socratic questioning protocol + user communication. MANDATORY for complex requests, new features, or unclear requirements. Includes progress reporting and error handling. |
-| `clean-code` | Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments |
-| `code-review-checklist` | Code review guidelines covering code quality, security, and best practices. |
-| `config-validator` | Self-validation skill for the .agent directory. Checks that all agents, skills, workflows, and scripts referenced across the system actually exist and are consistent. Use after modifying agent configuration files. |
-| `csharp-developer` | Senior C# developer with mastery of .NET 8+ and the Microsoft ecosystem. Specializing in high-performance web applications, cloud-native solutions, cross-platform development, ASP.NET Core, Blazor, and Entity Framework Core. |
-| `database-design` | Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases. |
-| `deployment-procedures` | Production deployment principles and decision-making. Safe deployment workflows, rollback strategies, and verification. Teaches thinking, not scripts. |
-| `devops-engineer` | Senior DevOps engineer with expertise in building scalable, automated infrastructure and deployment pipelines. Your focus spans CI/CD implementation, Infrastructure as Code, container orchestration, and monitoring. |
-| `devops-incident-responder` | Senior DevOps incident responder with expertise in managing critical production incidents, performing rapid diagnostics, and implementing permanent fixes. Reduces MTTR and builds resilient systems. |
-| `documentation-templates` | Documentation templates and structure guidelines. README, API docs, code comments, and AI-friendly documentation. |
-| `dotnet-core-expert` | Senior .NET Core expert with expertise in .NET 10, C# 14, and modern minimal APIs. Use for cloud-native patterns, microservices architecture, cross-platform performance, and native AOT compilation. |
-| `edge-computing` | Edge function design principles. Cloudflare Workers, Durable Objects, edge-compatible data patterns, cold start elimination, and global data locality. Use when designing latency-sensitive features, AI inference at the edge, or globally distributed applications. |
-| `frontend-design` | Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values. |
-| `game-development` | Game development orchestrator. Routes to platform-specific skills based on project needs. |
-| `geo-fundamentals` | Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity). |
-| `i18n-localization` | Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. |
-| `intelligent-routing` | Automatic agent selection and intelligent task routing. Analyzes user requests and automatically selects the best specialist agent(s) without requiring explicit user mentions. |
-| `lint-and-validate` | Linting and validation principles for code quality enforcement. |
-| `llm-engineering` | LLM engineering principles for production AI systems. RAG pipeline design, vector store selection, prompt engineering, evals, and LLMOps. Use when building AI features, chat interfaces, semantic search, or any system calling an LLM API. |
-| `local-first` | Local-first software principles. Offline-capable apps, CRDTs, sync engines (ElectricSQL, Replicache, Zero), conflict resolution, and the migration path from REST-first to local-first architecture. Use when building apps that need offline support, fast UI, or collaborative editing. |
-| `mcp-builder` | MCP (Model Context Protocol) server building principles. Tool design, resource patterns, best practices. |
-| `mobile-design` | Mobile-first and Spatial computing design thinking for iOS, Android, Foldables, and WebXR. Touch interaction, advanced haptics, on-device AI patterns, performance extremis. Teaches principles, not fixed values. |
-| `nextjs-react-expert` | Next.js App Router and React v19+ performance optimization from Vercel Engineering. Use when building React components, optimizing performance, implementing React Compiler patterns, eliminating waterfalls, reducing JS payload, or implementing Streaming/PPR optimizations. |
-| `nodejs-best-practices` | Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying. |
-| `observability` | Production observability principles. OpenTelemetry traces, structured logs, metrics, SLOs/SLIs/error budgets, and AI observability. Use when setting up monitoring, debugging production issues, or designing observable distributed systems. |
-| `parallel-agents` | Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives. |
-| `performance-profiling` | Performance profiling principles. Measurement, analysis, and optimization techniques. |
-| `plan-writing` | Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work. |
-| `platform-engineer` | Senior platform engineer with deep expertise in building internal developer platforms, self-service infrastructure, and developer portals. Reduces cognitive load and accelerates software delivery. |
-| `powershell-windows` | PowerShell Windows patterns. Critical pitfalls, operator syntax, error handling. |
-| `python-patterns` | Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying. |
-| `python-pro` | Senior Python developer (3.11+) specializing in idiomatic, type-safe, and performant Python. Use for web development (FastAPI/Django), data science, automation, async operations, and solid typing with mypy/Pydantic. |
-| `react-specialist` | Senior React specialist (React 18+) focusing on advanced patterns, state management, performance optimization, and production architectures (Next.js/Remix). |
-| `realtime-patterns` | Real-time and collaborative application patterns. WebSockets, Server-Sent Events for AI streaming, CRDTs for conflict-free collaboration, presence, and sync engines. Use when building live collaboration, AI streaming UIs, live dashboards, or multiplayer features. |
-| `red-team-tactics` | Red team tactics principles based on MITRE ATT&CK. Attack phases, detection evasion, reporting. |
-| `rust-pro` | Master Rust 1.75+ with modern async patterns, advanced type system features, and production-ready systems programming. Expert in the latest Rust ecosystem including Tokio, axum, and cutting-edge crates. Use PROACTIVELY for Rust development, performance optimization, or systems programming. |
-| `seo-fundamentals` | SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles. |
-| `server-management` | Server management principles and decision-making. Process management, monitoring strategy, and scaling decisions. Teaches thinking, not commands. |
-| `sql-pro` | Senior SQL developer across major databases (PostgreSQL, MySQL, SQL Server, Oracle). Use for complex query design, performance optimization, indexing strategies, CTEs, window functions, and schema architecture. |
-| `systematic-debugging` | 4-phase systematic debugging methodology with root cause analysis and evidence-based verification. Use when debugging complex issues. |
-| `tailwind-patterns` | Tailwind CSS v4+ principles for extreme frontend engineering. CSS-first configuration, scroll-driven animations, logical properties, advanced container style queries, and `@property` Houdini patterns. |
-| `tdd-workflow` | Test-Driven Development workflow principles. RED-GREEN-REFACTOR cycle. |
-| `test-result-analyzer` | Ingests test logs and identifies root causes across multiple failing test files. Provides actionable fix recommendations. |
-| `testing-patterns` | Testing patterns and principles. Unit, integration, mocking strategies. |
-| `trend-researcher` | Creative muse and design trend analyzer for modern web/mobile interfaces. |
-| `ui-ux-pro-max` | Plan and implement cutting-edge advanced UI/UX. Create distinctive, production-grade frontend interfaces with high design quality. |
-| `ui-ux-researcher` | Expert auditor for accessibility, cognitive load, and premium design heuristics. |
-| `vue-expert` | Vue 3 Composition API and modern Vue ecosystem expert. Use when building Vue applications, optimizing reactivity, component architecture, Nuxt 3 development, performance tuning, and State Management (Pinia). |
-| `vulnerability-scanner` | Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization. |
-| `web-design-guidelines` | Review UI code for Next-Generation Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". |
-| `webapp-testing` | Web application testing principles. E2E, Playwright, deep audit strategies. |
-| `whimsy-injector` | Micro-delight generator for frontend interfaces. Suggests and implements subtle animations, playful transitions, and interaction polish across any frontend stack. |
-| `workflow-optimizer` | Analyzes agent tool-calling patterns and task execution efficiency to suggest process improvements. |