npm - tribunal-kit - Versions diffs - 3.0.0 → 4.0.0 - Mend

tribunal-kit 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (233) hide show

package/.agent/ARCHITECTURE.md +99 -99
package/.agent/GEMINI.md +52 -52
package/.agent/agents/accessibility-reviewer.md +187 -220
package/.agent/agents/ai-code-reviewer.md +199 -233
package/.agent/agents/backend-specialist.md +215 -238
package/.agent/agents/code-archaeologist.md +161 -181
package/.agent/agents/database-architect.md +184 -207
package/.agent/agents/debugger.md +191 -218
package/.agent/agents/dependency-reviewer.md +103 -136
package/.agent/agents/devops-engineer.md +218 -238
package/.agent/agents/documentation-writer.md +201 -221
package/.agent/agents/explorer-agent.md +160 -180
package/.agent/agents/frontend-reviewer.md +160 -194
package/.agent/agents/frontend-specialist.md +248 -237
package/.agent/agents/game-developer.md +48 -52
package/.agent/agents/logic-reviewer.md +116 -149
package/.agent/agents/mobile-developer.md +200 -223
package/.agent/agents/mobile-reviewer.md +162 -195
package/.agent/agents/orchestrator.md +181 -211
package/.agent/agents/penetration-tester.md +157 -174
package/.agent/agents/performance-optimizer.md +183 -203
package/.agent/agents/performance-reviewer.md +178 -211
package/.agent/agents/precedence-reviewer.md +213 -0
package/.agent/agents/product-manager.md +142 -162
package/.agent/agents/product-owner.md +6 -25
package/.agent/agents/project-planner.md +142 -162
package/.agent/agents/qa-automation-engineer.md +225 -242
package/.agent/agents/security-auditor.md +174 -194
package/.agent/agents/seo-specialist.md +193 -213
package/.agent/agents/sql-reviewer.md +161 -194
package/.agent/agents/supervisor-agent.md +184 -203
package/.agent/agents/swarm-worker-contracts.md +17 -17
package/.agent/agents/swarm-worker-registry.md +46 -46
package/.agent/agents/test-coverage-reviewer.md +160 -193
package/.agent/agents/test-engineer.md +0 -21
package/.agent/agents/type-safety-reviewer.md +175 -208
package/.agent/patterns/generator.md +9 -9
package/.agent/patterns/inversion.md +12 -12
package/.agent/patterns/pipeline.md +9 -9
package/.agent/patterns/reviewer.md +13 -13
package/.agent/patterns/tool-wrapper.md +9 -9
package/.agent/rules/GEMINI.md +63 -63
package/.agent/scripts/append_flow.js +72 -0
package/.agent/scripts/case_law_manager.py +525 -0
package/.agent/scripts/compress_skills.py +167 -0
package/.agent/scripts/consolidate_skills.py +173 -0
package/.agent/scripts/deep_compress.py +202 -0
package/.agent/scripts/minify_context.py +80 -0
package/.agent/scripts/security_scan.py +1 -1
package/.agent/scripts/skill_evolution.py +563 -0
package/.agent/scripts/strip_tribunal.py +41 -0
package/.agent/skills/agent-organizer/SKILL.md +100 -126
package/.agent/skills/agentic-patterns/SKILL.md +0 -70
package/.agent/skills/ai-prompt-injection-defense/SKILL.md +134 -160
package/.agent/skills/api-patterns/SKILL.md +123 -215
package/.agent/skills/api-security-auditor/SKILL.md +143 -177
package/.agent/skills/app-builder/SKILL.md +334 -50
package/.agent/skills/app-builder/templates/SKILL.md +13 -15
package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +16 -16
package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +22 -22
package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +18 -18
package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +20 -20
package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +17 -17
package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +18 -18
package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +21 -21
package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +19 -19
package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +26 -26
package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +26 -26
package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +19 -19
package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +18 -18
package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +20 -20
package/.agent/skills/appflow-wireframe/SKILL.md +95 -121
package/.agent/skills/architecture/SKILL.md +169 -331
package/.agent/skills/authentication-best-practices/SKILL.md +139 -173
package/.agent/skills/bash-linux/SKILL.md +129 -154
package/.agent/skills/behavioral-modes/SKILL.md +8 -69
package/.agent/skills/brainstorming/SKILL.md +436 -104
package/.agent/skills/building-native-ui/SKILL.md +152 -174
package/.agent/skills/clean-code/SKILL.md +331 -360
package/.agent/skills/code-review-checklist/SKILL.md +0 -62
package/.agent/skills/config-validator/SKILL.md +115 -141
package/.agent/skills/csharp-developer/SKILL.md +468 -528
package/.agent/skills/database-design/SKILL.md +104 -369
package/.agent/skills/deployment-procedures/SKILL.md +119 -145
package/.agent/skills/devops-engineer/SKILL.md +295 -332
package/.agent/skills/devops-incident-responder/SKILL.md +87 -113
package/.agent/skills/doc.md +5 -5
package/.agent/skills/documentation-templates/SKILL.md +27 -63
package/.agent/skills/edge-computing/SKILL.md +131 -157
package/.agent/skills/extract-design-system/SKILL.md +108 -134
package/.agent/skills/framer-motion-expert/SKILL.md +111 -855
package/.agent/skills/frontend-design/SKILL.md +151 -499
package/.agent/skills/game-design-expert/SKILL.md +79 -105
package/.agent/skills/game-engineering-expert/SKILL.md +96 -122
package/.agent/skills/geo-fundamentals/SKILL.md +97 -124
package/.agent/skills/github-operations/SKILL.md +279 -314
package/.agent/skills/gsap-expert/SKILL.md +119 -826
package/.agent/skills/i18n-localization/SKILL.md +113 -138
package/.agent/skills/intelligent-routing/SKILL.md +167 -127
package/.agent/skills/lint-and-validate/SKILL.md +16 -52
package/.agent/skills/llm-engineering/SKILL.md +344 -357
package/.agent/skills/local-first/SKILL.md +128 -154
package/.agent/skills/mcp-builder/SKILL.md +92 -118
package/.agent/skills/mobile-design/SKILL.md +213 -219
package/.agent/skills/motion-engineering/SKILL.md +184 -0
package/.agent/skills/nextjs-react-expert/SKILL.md +99 -698
package/.agent/skills/nodejs-best-practices/SKILL.md +498 -559
package/.agent/skills/observability/SKILL.md +293 -330
package/.agent/skills/parallel-agents/SKILL.md +96 -122
package/.agent/skills/performance-profiling/SKILL.md +217 -254
package/.agent/skills/plan-writing/SKILL.md +92 -118
package/.agent/skills/platform-engineer/SKILL.md +97 -123
package/.agent/skills/playwright-best-practices/SKILL.md +137 -162
package/.agent/skills/powershell-windows/SKILL.md +112 -146
package/.agent/skills/project-idioms/SKILL.md +87 -0
package/.agent/skills/python-patterns/SKILL.md +15 -35
package/.agent/skills/python-pro/SKILL.md +148 -754
package/.agent/skills/react-specialist/SKILL.md +123 -827
package/.agent/skills/readme-builder/SKILL.md +23 -85
package/.agent/skills/realtime-patterns/SKILL.md +269 -304
package/.agent/skills/red-team-tactics/SKILL.md +18 -51
package/.agent/skills/rust-pro/SKILL.md +623 -701
package/.agent/skills/seo-fundamentals/SKILL.md +129 -154
package/.agent/skills/server-management/SKILL.md +164 -190
package/.agent/skills/shadcn-ui-expert/SKILL.md +181 -206
package/.agent/skills/skill-creator/SKILL.md +24 -56
package/.agent/skills/sql-pro/SKILL.md +579 -633
package/.agent/skills/supabase-postgres-best-practices/SKILL.md +35 -66
package/.agent/skills/swiftui-expert/SKILL.md +151 -176
package/.agent/skills/systematic-debugging/SKILL.md +92 -118
package/.agent/skills/tailwind-patterns/SKILL.md +516 -576
package/.agent/skills/tdd-workflow/SKILL.md +111 -137
package/.agent/skills/test-result-analyzer/SKILL.md +33 -73
package/.agent/skills/testing-patterns/SKILL.md +512 -573
package/.agent/skills/trend-researcher/SKILL.md +30 -71
package/.agent/skills/ui-ux-pro-max/SKILL.md +8 -41
package/.agent/skills/ui-ux-researcher/SKILL.md +51 -91
package/.agent/skills/vue-expert/SKILL.md +127 -866
package/.agent/skills/vulnerability-scanner/SKILL.md +354 -269
package/.agent/skills/web-accessibility-auditor/SKILL.md +168 -193
package/.agent/skills/web-design-guidelines/SKILL.md +25 -61
package/.agent/skills/webapp-testing/SKILL.md +119 -145
package/.agent/skills/whimsy-injector/SKILL.md +58 -132
package/.agent/skills/workflow-optimizer/SKILL.md +28 -68
package/.agent/workflows/api-tester.md +151 -151
package/.agent/workflows/audit.md +127 -138
package/.agent/workflows/brainstorm.md +110 -110
package/.agent/workflows/changelog.md +112 -112
package/.agent/workflows/create.md +124 -124
package/.agent/workflows/debug.md +165 -189
package/.agent/workflows/deploy.md +180 -189
package/.agent/workflows/enhance.md +128 -151
package/.agent/workflows/fix.md +114 -135
package/.agent/workflows/generate.md +13 -4
package/.agent/workflows/migrate.md +160 -160
package/.agent/workflows/orchestrate.md +168 -168
package/.agent/workflows/performance-benchmarker.md +114 -123
package/.agent/workflows/plan.md +173 -173
package/.agent/workflows/preview.md +80 -80
package/.agent/workflows/refactor.md +161 -183
package/.agent/workflows/review-ai.md +101 -129
package/.agent/workflows/review.md +116 -116
package/.agent/workflows/session.md +94 -94
package/.agent/workflows/status.md +79 -79
package/.agent/workflows/strengthen-skills.md +138 -139
package/.agent/workflows/swarm.md +179 -179
package/.agent/workflows/test.md +189 -211
package/.agent/workflows/tribunal-backend.md +94 -113
package/.agent/workflows/tribunal-database.md +95 -115
package/.agent/workflows/tribunal-frontend.md +96 -118
package/.agent/workflows/tribunal-full.md +93 -133
package/.agent/workflows/tribunal-mobile.md +95 -119
package/.agent/workflows/tribunal-performance.md +110 -133
package/.agent/workflows/ui-ux-pro-max.md +122 -143
package/README.md +30 -1
package/bin/tribunal-kit.js +175 -12
package/package.json +25 -4
package/.agent/skills/api-patterns/api-style.md +0 -42
package/.agent/skills/api-patterns/auth.md +0 -24
package/.agent/skills/api-patterns/documentation.md +0 -26
package/.agent/skills/api-patterns/graphql.md +0 -41
package/.agent/skills/api-patterns/rate-limiting.md +0 -31
package/.agent/skills/api-patterns/response.md +0 -37
package/.agent/skills/api-patterns/rest.md +0 -40
package/.agent/skills/api-patterns/security-testing.md +0 -122
package/.agent/skills/api-patterns/trpc.md +0 -41
package/.agent/skills/api-patterns/versioning.md +0 -22
package/.agent/skills/app-builder/agent-coordination.md +0 -71
package/.agent/skills/app-builder/feature-building.md +0 -53
package/.agent/skills/app-builder/project-detection.md +0 -34
package/.agent/skills/app-builder/scaffolding.md +0 -118
package/.agent/skills/app-builder/tech-stack.md +0 -40
package/.agent/skills/architecture/context-discovery.md +0 -43
package/.agent/skills/architecture/examples.md +0 -94
package/.agent/skills/architecture/pattern-selection.md +0 -68
package/.agent/skills/architecture/patterns-reference.md +0 -50
package/.agent/skills/architecture/trade-off-analysis.md +0 -77
package/.agent/skills/brainstorming/dynamic-questioning.md +0 -360
package/.agent/skills/database-design/database-selection.md +0 -43
package/.agent/skills/database-design/indexing.md +0 -39
package/.agent/skills/database-design/migrations.md +0 -48
package/.agent/skills/database-design/optimization.md +0 -36
package/.agent/skills/database-design/orm-selection.md +0 -30
package/.agent/skills/database-design/schema-design.md +0 -56
package/.agent/skills/frontend-design/animation-guide.md +0 -331
package/.agent/skills/frontend-design/color-system.md +0 -329
package/.agent/skills/frontend-design/decision-trees.md +0 -418
package/.agent/skills/frontend-design/motion-graphics.md +0 -306
package/.agent/skills/frontend-design/typography-system.md +0 -363
package/.agent/skills/frontend-design/ux-psychology.md +0 -1116
package/.agent/skills/frontend-design/visual-effects.md +0 -383
package/.agent/skills/intelligent-routing/router-manifest.md +0 -65
package/.agent/skills/mobile-design/decision-trees.md +0 -516
package/.agent/skills/mobile-design/mobile-backend.md +0 -491
package/.agent/skills/mobile-design/mobile-color-system.md +0 -420
package/.agent/skills/mobile-design/mobile-debugging.md +0 -122
package/.agent/skills/mobile-design/mobile-design-thinking.md +0 -357
package/.agent/skills/mobile-design/mobile-navigation.md +0 -458
package/.agent/skills/mobile-design/mobile-performance.md +0 -767
package/.agent/skills/mobile-design/mobile-testing.md +0 -356
package/.agent/skills/mobile-design/mobile-typography.md +0 -433
package/.agent/skills/mobile-design/platform-android.md +0 -666
package/.agent/skills/mobile-design/platform-ios.md +0 -561
package/.agent/skills/mobile-design/touch-psychology.md +0 -537
package/.agent/skills/nextjs-react-expert/1-async-eliminating-waterfalls.md +0 -312
package/.agent/skills/nextjs-react-expert/2-bundle-bundle-size-optimization.md +0 -240
package/.agent/skills/nextjs-react-expert/3-server-server-side-performance.md +0 -490
package/.agent/skills/nextjs-react-expert/4-client-client-side-data-fetching.md +0 -264
package/.agent/skills/nextjs-react-expert/5-rerender-re-render-optimization.md +0 -581
package/.agent/skills/nextjs-react-expert/6-rendering-rendering-performance.md +0 -432
package/.agent/skills/nextjs-react-expert/7-js-javascript-performance.md +0 -684
package/.agent/skills/nextjs-react-expert/8-advanced-advanced-patterns.md +0 -150
package/.agent/skills/vulnerability-scanner/checklists.md +0 -121

package/.agent/skills/tailwind-patterns/SKILL.md CHANGED Viewed

@@ -1,576 +1,516 @@
----
-name: tailwind-patterns
-description: Tailwind CSS v4+ mastery. CSS-first configuration, @theme directive, container queries, scroll-driven animations, logical properties, clamp(), fluid typography, responsive design, dark mode, custom variants, component extraction, and performance optimization. Use when styling with Tailwind, building design systems, or optimizing CSS output.
-allowed-tools: Read, Write, Edit, Glob, Grep
-version: 2.0.0
-last-updated: 2026-04-01
-applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
----
-# Tailwind CSS v4+ — CSS-First Mastery
-> Tailwind v4 is a ground-up rewrite. The config file is gone. JavaScript is gone.
-> Everything is CSS-first. If you're still writing `tailwind.config.js`, you're writing legacy.
----
-## v4 Configuration (CSS-First)
-### The @theme Directive
-```css
-/* app.css — THE configuration file in Tailwind v4 */
-@import "tailwindcss";
-@theme {
-  /* Colors */
-  --color-primary-50: oklch(0.97 0.02 250);
-  --color-primary-100: oklch(0.93 0.04 250);
-  --color-primary-500: oklch(0.55 0.18 250);
-  --color-primary-600: oklch(0.48 0.18 250);
-  --color-primary-700: oklch(0.40 0.16 250);
-  --color-primary-900: oklch(0.25 0.10 250);
-  --color-surface: oklch(0.99 0.00 0);
-  --color-surface-alt: oklch(0.96 0.00 0);
-  --color-text: oklch(0.15 0.00 0);
-  --color-text-muted: oklch(0.45 0.00 0);
-  /* Typography */
-  --font-sans: "Inter", "system-ui", sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-  /* Spacing (extends the default scale) */
-  --spacing-18: 4.5rem;
-  --spacing-88: 22rem;
-  /* Border radius */
-  --radius-pill: 9999px;
-  --radius-card: 1rem;
-  /* Shadows */
-  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.06);
-  --shadow-elevated: 0 10px 25px oklch(0 0 0 / 0.1), 0 4px 10px oklch(0 0 0 / 0.05);
-  /* Animations */
-  --animate-fade-in: fade-in 0.3s ease-out;
-  --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(12px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-/* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use tailwind.config.js
-   ❌ module.exports = { theme: { extend: { ... } } }  ← REMOVED in v4
-   ✅ Use @theme { } directive in your CSS file
-   ✅ @import "tailwindcss" replaces the three @tailwind directives */
-```
-### Dark Mode
-```css
-/* Tailwind v4 dark mode with @theme */
-@theme {
-  --color-surface: oklch(0.99 0.00 0);
-  --color-text: oklch(0.15 0.00 0);
-}
-/* Dark variant — override variables */
-@variant dark {
-  @theme {
-    --color-surface: oklch(0.13 0.02 260);
-    --color-text: oklch(0.93 0.00 0);
-  }
-}
-/* Usage in HTML: */
-/* <div class="bg-surface text-text dark:bg-surface dark:text-text"> */
-/* With the @variant dark override, classes "just work" in dark mode */
-```
-```html
-<!-- Dark mode toggle pattern -->
-<html class="dark">
-  <body class="bg-surface text-text transition-colors duration-300">
-    <!-- Automatically uses dark @theme values -->
-  </body>
-</html>
-```
-### Custom Variants
-```css
-/* @variant — custom selector-based variants */
-@variant scrolled (&:where([data-scrolled]));
-@variant hocus (&:hover, &:focus-visible);
-/* Usage: */
-/* <nav class="scrolled:shadow-elevated hocus:ring-2"> */
-```
----
-## Layout Patterns
-### Flexbox
-```html
-<!-- Centered hero -->
-<section class="flex min-h-svh flex-col items-center justify-center gap-6 px-6">
-  <h1 class="text-5xl font-bold tracking-tight">Hero Title</h1>
-  <p class="max-w-2xl text-center text-lg text-text-muted">Subtitle text</p>
-  <div class="flex gap-3">
-    <button class="rounded-pill bg-primary-600 px-6 py-3 text-white">Primary</button>
-    <button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">Secondary</button>
-  </div>
-</section>
-<!-- Sidebar layout -->
-<div class="flex min-h-svh">
-  <aside class="w-64 shrink-0 border-r border-gray-200 p-4">Sidebar</aside>
-  <main class="flex-1 overflow-y-auto p-6">Content</main>
-</div>
-<!-- ❌ HALLUCINATION TRAP: Use min-h-svh (small viewport height), NOT min-h-screen
-     min-h-screen = 100vh (broken on mobile — includes browser chrome)
-     min-h-svh = 100svh (accounts for mobile browser chrome)
-     min-h-dvh = 100dvh (dynamic — updates as chrome shows/hides) -->
-```
-### CSS Grid
-```html
-<!-- Auto-fit responsive grid (no breakpoints needed) -->
-<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
-  <div class="rounded-card bg-surface p-6 shadow-card">Card 1</div>
-  <div class="rounded-card bg-surface p-6 shadow-card">Card 2</div>
-  <div class="rounded-card bg-surface p-6 shadow-card">Card 3</div>
-</div>
-<!-- Dashboard grid with named areas -->
-<div class="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr] min-h-svh">
-  <header class="col-span-2 border-b">Header</header>
-  <aside class="border-r p-4">Sidebar</aside>
-  <main class="overflow-y-auto p-6">Content</main>
-</div>
-<!-- Bento grid -->
-<div class="grid auto-rows-[180px] grid-cols-3 gap-4">
-  <div class="col-span-2 row-span-2 rounded-2xl bg-primary-100">Large</div>
-  <div class="rounded-2xl bg-surface-alt">Small 1</div>
-  <div class="rounded-2xl bg-surface-alt">Small 2</div>
-  <div class="col-span-3 rounded-2xl bg-primary-50">Full width</div>
-</div>
-```
-### Container Queries
-```html
-<!-- Container queries — component-level responsiveness -->
-<div class="@container">
-  <div class="flex flex-col gap-3 @sm:flex-row @sm:items-center @lg:gap-6">
-    <img class="size-16 rounded-full @sm:size-20" src="avatar.jpg" alt="">
-    <div>
-      <h3 class="text-lg font-semibold @lg:text-xl">User Name</h3>
-      <p class="text-sm text-text-muted @lg:text-base">Description</p>
-    </div>
-  </div>
-</div>
-<!-- Named container -->
-<div class="@container/card">
-  <div class="@md/card:grid @md/card:grid-cols-2">
-    <!-- Responds to the card container's width, not viewport -->
-  </div>
-</div>
-<!-- ❌ HALLUCINATION TRAP: Container queries use @sm, @md, @lg (with @ prefix)
-     NOT sm:, md:, lg: — those are VIEWPORT breakpoints
-     @sm = container >= 320px   (component-level)
-     sm: = viewport >= 640px    (page-level) -->
-```
----
-## Typography
-### Fluid Typography with clamp()
-```html
-<!-- Fluid heading — scales smoothly from 2rem to 4rem -->
-<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">
-  Responsive Heading
-</h1>
-<!-- Fluid body text -->
-<p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">
-  Body text that scales with viewport
-</p>
-<!-- Prose (for long-form content) -->
-<article class="prose prose-lg mx-auto max-w-3xl dark:prose-invert">
-  <!-- @tailwindcss/typography plugin handles all typography -->
-  <h1>Article Title</h1>
-  <p>Paragraph with <a href="#">links</a> and <code>code</code>.</p>
-</article>
-```
-### Font Loading
-```css
-/* @font-face in your CSS (Tailwind v4 approach) */
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("/fonts/inter-variable.woff2") format("woff2");
-}
-@theme {
-  --font-sans: "Inter", system-ui, sans-serif;
-}
-```
----
-## Component Patterns
-### Button System
-```html
-<!-- Base button with variants -->
-<button class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
-               text-sm font-medium transition-all duration-150
-               focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500
-               active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50">
-  Button Text
-</button>
-<!-- Primary variant -->
-<button class="... bg-primary-600 text-white shadow-sm hover:bg-primary-700">Primary</button>
-<!-- Ghost variant -->
-<button class="... text-text hover:bg-gray-100 dark:hover:bg-gray-800">Ghost</button>
-<!-- Destructive variant -->
-<button class="... bg-red-600 text-white hover:bg-red-700">Delete</button>
-<!-- Icon button -->
-<button class="grid size-10 place-items-center rounded-lg hover:bg-gray-100"
-        aria-label="Settings">
-  <svg class="size-5" ...></svg>
-</button>
-```
-### Input System
-```html
-<!-- Text input -->
-<div class="space-y-1.5">
-  <label for="email" class="text-sm font-medium text-text">Email</label>
-  <input id="email" type="email" placeholder="you@example.com"
-    class="w-full rounded-lg border border-gray-300 bg-surface px-3.5 py-2.5
-           text-sm text-text placeholder:text-text-muted
-           transition-colors duration-150
-           focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
-           disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
-  />
-  <p class="text-xs text-red-500">Error message here</p>
-</div>
-<!-- Checkbox -->
-<label class="flex items-center gap-2.5 text-sm">
-  <input type="checkbox"
-    class="size-4 rounded border-gray-300 text-primary-600
-           focus:ring-2 focus:ring-primary-500/20" />
-  Remember me
-</label>
-```
-### Card Pattern
-```html
-<div class="group overflow-hidden rounded-card bg-surface shadow-card
-            transition-shadow duration-200 hover:shadow-elevated">
-  <div class="aspect-video overflow-hidden bg-gray-100">
-    <img src="cover.jpg" alt="Cover"
-      class="size-full object-cover transition-transform duration-300
-             group-hover:scale-105" />
-  </div>
-  <div class="space-y-2 p-5">
-    <span class="inline-block rounded-full bg-primary-100 px-2.5 py-0.5
-                 text-xs font-medium text-primary-700">Category</span>
-    <h3 class="text-lg font-semibold text-text line-clamp-2">Card Title</h3>
-    <p class="text-sm text-text-muted line-clamp-3">Description text...</p>
-  </div>
-</div>
-```
-### Modal / Dialog
-```html
-<!-- Backdrop -->
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50
-            backdrop-blur-sm animate-fade-in">
-  <!-- Modal -->
-  <div class="w-full max-w-md rounded-2xl bg-surface p-6 shadow-elevated animate-slide-up"
-       role="dialog" aria-modal="true" aria-labelledby="modal-title">
-    <h2 id="modal-title" class="text-lg font-semibold">Dialog Title</h2>
-    <p class="mt-2 text-sm text-text-muted">Dialog description.</p>
-    <div class="mt-6 flex justify-end gap-3">
-      <button class="rounded-lg px-4 py-2 text-sm hover:bg-gray-100">Cancel</button>
-      <button class="rounded-lg bg-primary-600 px-4 py-2 text-sm text-white
-                     hover:bg-primary-700">Confirm</button>
-    </div>
-  </div>
-</div>
-```
----
-## Responsive Design Rules
-```html
-<!-- Tailwind breakpoints (mobile-first) -->
-<!-- sm: 640px  │ md: 768px  │ lg: 1024px  │ xl: 1280px  │ 2xl: 1536px -->
-<!-- Stack on mobile, row on tablet+ -->
-<div class="flex flex-col gap-4 md:flex-row md:items-center">
-  <div class="md:w-1/2">Left</div>
-  <div class="md:w-1/2">Right</div>
-</div>
-<!-- Hide/show at breakpoints -->
-<nav class="hidden lg:flex">Desktop nav</nav>
-<button class="lg:hidden">☰ Mobile menu</button>
-<!-- Responsive padding -->
-<section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-24">
-  <div class="mx-auto max-w-7xl">Content</div>
-</section>
-<!-- Responsive grid -->
-<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-  <!-- Cards -->
-</div>
-```
----
-## Animations & Transitions
-### Transition Utilities
-```html
-<!-- Smooth hover transitions -->
-<a class="text-text-muted transition-colors duration-150 hover:text-primary-600">Link</a>
-<!-- Transform transitions -->
-<div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-105">
-  Hover me
-</div>
-<!-- Combined transition -->
-<button class="rounded-lg bg-primary-600 px-4 py-2 text-white
-               transition-all duration-200
-               hover:bg-primary-700 hover:shadow-lg
-               active:scale-95">
-  Click me
-</button>
-```
-### Custom Keyframe Animations
-```css
-@theme {
-  --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --animate-spin-slow: spin 3s linear infinite;
-  --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
-}
-@keyframes bounce-in {
-  0% { opacity: 0; transform: scale(0.3); }
-  50% { transform: scale(1.05); }
-  70% { transform: scale(0.9); }
-  100% { opacity: 1; transform: scale(1); }
-}
-@keyframes pulse-soft {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-```
-### Scroll-Driven Animations (CSS Native)
-```css
-/* Progress bar that fills as user scrolls */
-.scroll-progress {
-  animation: grow-width linear;
-  animation-timeline: scroll();
-}
-@keyframes grow-width {
-  from { transform: scaleX(0); }
-  to { transform: scaleX(1); }
-}
-```
-```html
-<div class="scroll-progress fixed top-0 left-0 z-50 h-1 w-full origin-left bg-primary-600"></div>
-```
----
-## Performance
-### Purging & Bundle Size
-```css
-/* Tailwind v4 automatically tree-shakes unused CSS at build time */
-/* No manual purge configuration needed */
-/* @source — explicitly add content paths for scanning */
-@source "../components/**/*.tsx";
-@source "../pages/**/*.tsx";
-/* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use purge: [] config
-   ❌ purge: ['./src/**/*.{html,tsx}']  ← REMOVED in v4
-   ✅ Uses automatic content detection based on your project structure
-   ✅ Use @source directive for custom paths */
-```
-### Avoiding Bloat
-```html
-<!-- ✅ GOOD: Use component extraction for repeated patterns -->
-<!-- Create a .btn class in CSS instead of repeating 15 utilities -->
-<!-- ❌ BAD: One-off arbitrary values everywhere -->
-<div class="mt-[13px] mr-[7px] p-[11px] text-[15px]">
-  <!-- Every arbitrary value = unique CSS rule = bundle bloat -->
-</div>
-<!-- ✅ GOOD: Use your design scale -->
-<div class="mt-3 mr-2 p-3 text-sm">
-  <!-- Maps to existing utilities = zero extra CSS -->
-</div>
-```
-### Component Extraction (When to @apply)
-```css
-/* Use @apply ONLY for highly reused component patterns */
-/* Do NOT @apply everything — it defeats Tailwind's purpose */
-.btn {
-  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
-         text-sm font-medium transition-all duration-150
-         focus-visible:outline-2 focus-visible:outline-offset-2
-         active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50;
-}
-.btn-primary {
-  @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700
-         focus-visible:outline-primary-500;
-}
-/* ❌ HALLUCINATION TRAP: @apply is for component patterns shared across files
-   If a pattern appears in only 1-2 places, just use inline utilities
-   Over-extracting with @apply = recreating regular CSS with extra steps */
-```
----
-## Accessibility with Tailwind
-```html
-<!-- Focus visible (keyboard only, not mouse click) -->
-<a class="rounded-lg focus-visible:outline-2 focus-visible:outline-primary-500
-          focus-visible:outline-offset-2">
-  Keyboard accessible link
-</a>
-<!-- Screen reader only text -->
-<button>
-  <svg class="size-5" aria-hidden="true"></svg>
-  <span class="sr-only">Close menu</span>
-</button>
-<!-- Motion-safe / motion-reduce -->
-<div class="motion-safe:animate-bounce-in motion-reduce:animate-none">
-  <!-- Only animates if user hasn't enabled "reduce motion" -->
-</div>
-<!-- Forced colors mode (high contrast) -->
-<button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
-  Accessible button
-</button>
-```
----
-## Output Format
-```
-━━━ Tailwind Expert Report ━━━━━━━━━━━━━━━━━━━━━━━
-Skill:       Tailwind Patterns
-Tailwind:    v4+
-Scope:       [N files · N components]
-─────────────────────────────────────────────────
-✅ Passed:   [checks that passed, or "All clean"]
-⚠️  Warnings: [non-blocking issues, or "None"]
-❌ Blocked:  [blocking issues requiring fix, or "None"]
-─────────────────────────────────────────────────
-VBC status:  PENDING → VERIFIED
-Evidence:    [build output / visual verification]
-```
----
-## 🤖 LLM-Specific Traps
-1. **`tailwind.config.js` in v4:** There is NO JavaScript config file in Tailwind v4. All configuration is CSS-first with `@theme {}`.
-2. **`@tailwind base/components/utilities`:** Replaced by `@import "tailwindcss"` — a single import.
-3. **`purge:` Configuration:** Tailwind v4 auto-detects content files. No purge config exists.
-4. **`min-h-screen` on Mobile:** 100vh is broken on mobile browsers. Use `min-h-svh` (100svh) or `min-h-dvh` (100dvh).
-5. **`@sm` vs `sm:`:** `@sm` = container query (width of parent). `sm:` = viewport breakpoint. They are NOT interchangeable.
-6. **Arbitrary Value Overuse:** `mt-[13px]` generates a unique CSS rule. Use the spacing scale (`mt-3`) whenever possible.
-7. **`@apply` for Everything:** Over-extracting utilities into `@apply` classes defeats Tailwind's purpose. Only extract highly reused patterns.
-8. **Non-oklch Colors:** Tailwind v4 uses oklch for its default palette. Defining custom colors in hex/rgb limits color manipulation.
-9. **Missing `font-display: swap`:** Custom `@font-face` rules without `font-display: swap` cause FOIT (Flash of Invisible Text).
-10. **Ignoring `forced-colors`:** High-contrast mode overrides all colors. Interactive elements MUST have `forced-colors:` fallbacks.
----
-## 🏛️ Tribunal Integration
-**Slash command: `/tribunal-frontend`**
-### ✅ Pre-Flight Self-Audit
-```
-✅ Did I use @theme {} (not tailwind.config.js)?
-✅ Did I use @import "tailwindcss" (not @tailwind directives)?
-✅ Did I use min-h-svh/dvh (not min-h-screen)?
-✅ Did I use the design scale (not arbitrary values)?
-✅ Did I use oklch for custom colors?
-✅ Did I add focus-visible styles to all interactive elements?
-✅ Did I add sr-only labels to icon-only buttons?
-✅ Did I use motion-safe/motion-reduce for animations?
-✅ Did I use @container/@sm for component-level responsiveness?
-✅ Does the CSS build without warnings?
-```
-### 🛑 VBC Protocol
-- ❌ **Forbidden:** Assuming Tailwind classes work without building.
-- ✅ **Required:** Provide build output or visual screenshot evidence.
+---
+name: tailwind-patterns
+description: Tailwind CSS v4+ mastery. CSS-first configuration, @theme directive, container queries, scroll-driven animations, logical properties, clamp(), fluid typography, responsive design, dark mode, custom variants, component extraction, and performance optimization. Use when styling with Tailwind, building design systems, or optimizing CSS output.
+allowed-tools: Read, Write, Edit, Glob, Grep
+version: 2.0.0
+last-updated: 2026-04-01
+applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
+---
+# Tailwind CSS v4+ — CSS-First Mastery
+---
+## v4 Configuration (CSS-First)
+### The @theme Directive
+```css
+/* app.css — THE configuration file in Tailwind v4 */
+@import "tailwindcss";
+@theme {
+  /* Colors */
+  --color-primary-50: oklch(0.97 0.02 250);
+  --color-primary-100: oklch(0.93 0.04 250);
+  --color-primary-500: oklch(0.55 0.18 250);
+  --color-primary-600: oklch(0.48 0.18 250);
+  --color-primary-700: oklch(0.40 0.16 250);
+  --color-primary-900: oklch(0.25 0.10 250);
+  --color-surface: oklch(0.99 0.00 0);
+  --color-surface-alt: oklch(0.96 0.00 0);
+  --color-text: oklch(0.15 0.00 0);
+  --color-text-muted: oklch(0.45 0.00 0);
+  /* Typography */
+  --font-sans: "Inter", "system-ui", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  /* Spacing (extends the default scale) */
+  --spacing-18: 4.5rem;
+  --spacing-88: 22rem;
+  /* Border radius */
+  --radius-pill: 9999px;
+  --radius-card: 1rem;
+  /* Shadows */
+  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.06);
+  --shadow-elevated: 0 10px 25px oklch(0 0 0 / 0.1), 0 4px 10px oklch(0 0 0 / 0.05);
+  /* Animations */
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+/* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use tailwind.config.js
+   ❌ module.exports = { theme: { extend: { ... } } }  ← REMOVED in v4
+   ✅ Use @theme { } directive in your CSS file
+   ✅ @import "tailwindcss" replaces the three @tailwind directives */
+```
+### Dark Mode
+```css
+/* Tailwind v4 dark mode with @theme */
+@theme {
+  --color-surface: oklch(0.99 0.00 0);
+  --color-text: oklch(0.15 0.00 0);
+}
+/* Dark variant — override variables */
+@variant dark {
+  @theme {
+    --color-surface: oklch(0.13 0.02 260);
+    --color-text: oklch(0.93 0.00 0);
+  }
+}
+/* Usage in HTML: */
+/* <div class="bg-surface text-text dark:bg-surface dark:text-text"> */
+/* With the @variant dark override, classes "just work" in dark mode */
+```
+```html
+<!-- Dark mode toggle pattern -->
+<html class="dark">
+  <body class="bg-surface text-text transition-colors duration-300">
+    <!-- Automatically uses dark @theme values -->
+  </body>
+</html>
+```
+### Custom Variants
+```css
+/* @variant — custom selector-based variants */
+@variant scrolled (&:where([data-scrolled]));
+@variant hocus (&:hover, &:focus-visible);
+/* Usage: */
+/* <nav class="scrolled:shadow-elevated hocus:ring-2"> */
+```
+---
+## Layout Patterns
+### Flexbox
+```html
+<!-- Centered hero -->
+<section class="flex min-h-svh flex-col items-center justify-center gap-6 px-6">
+  <h1 class="text-5xl font-bold tracking-tight">Hero Title</h1>
+  <p class="max-w-2xl text-center text-lg text-text-muted">Subtitle text</p>
+  <div class="flex gap-3">
+    <button class="rounded-pill bg-primary-600 px-6 py-3 text-white">Primary</button>
+    <button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">Secondary</button>
+  </div>
+</section>
+<!-- Sidebar layout -->
+<div class="flex min-h-svh">
+  <aside class="w-64 shrink-0 border-r border-gray-200 p-4">Sidebar</aside>
+  <main class="flex-1 overflow-y-auto p-6">Content</main>
+</div>
+<!-- ❌ HALLUCINATION TRAP: Use min-h-svh (small viewport height), NOT min-h-screen
+     min-h-screen = 100vh (broken on mobile — includes browser chrome)
+     min-h-svh = 100svh (accounts for mobile browser chrome)
+     min-h-dvh = 100dvh (dynamic — updates as chrome shows/hides) -->
+```
+### CSS Grid
+```html
+<!-- Auto-fit responsive grid (no breakpoints needed) -->
+<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
+  <div class="rounded-card bg-surface p-6 shadow-card">Card 1</div>
+  <div class="rounded-card bg-surface p-6 shadow-card">Card 2</div>
+  <div class="rounded-card bg-surface p-6 shadow-card">Card 3</div>
+</div>
+<!-- Dashboard grid with named areas -->
+<div class="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr] min-h-svh">
+  <header class="col-span-2 border-b">Header</header>
+  <aside class="border-r p-4">Sidebar</aside>
+  <main class="overflow-y-auto p-6">Content</main>
+</div>
+<!-- Bento grid -->
+<div class="grid auto-rows-[180px] grid-cols-3 gap-4">
+  <div class="col-span-2 row-span-2 rounded-2xl bg-primary-100">Large</div>
+  <div class="rounded-2xl bg-surface-alt">Small 1</div>
+  <div class="rounded-2xl bg-surface-alt">Small 2</div>
+  <div class="col-span-3 rounded-2xl bg-primary-50">Full width</div>
+</div>
+```
+### Container Queries
+```html
+<!-- Container queries — component-level responsiveness -->
+<div class="@container">
+  <div class="flex flex-col gap-3 @sm:flex-row @sm:items-center @lg:gap-6">
+    <img class="size-16 rounded-full @sm:size-20" src="avatar.jpg" alt="">
+    <div>
+      <h3 class="text-lg font-semibold @lg:text-xl">User Name</h3>
+      <p class="text-sm text-text-muted @lg:text-base">Description</p>
+    </div>
+  </div>
+</div>
+<!-- Named container -->
+<div class="@container/card">
+  <div class="@md/card:grid @md/card:grid-cols-2">
+    <!-- Responds to the card container's width, not viewport -->
+  </div>
+</div>
+<!-- ❌ HALLUCINATION TRAP: Container queries use @sm, @md, @lg (with @ prefix)
+     NOT sm:, md:, lg: — those are VIEWPORT breakpoints
+     @sm = container >= 320px   (component-level)
+     sm: = viewport >= 640px    (page-level) -->
+```
+---
+## Typography
+### Fluid Typography with clamp()
+```html
+<!-- Fluid heading — scales smoothly from 2rem to 4rem -->
+<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">
+  Responsive Heading
+</h1>
+<!-- Fluid body text -->
+<p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">
+  Body text that scales with viewport
+</p>
+<!-- Prose (for long-form content) -->
+<article class="prose prose-lg mx-auto max-w-3xl dark:prose-invert">
+  <!-- @tailwindcss/typography plugin handles all typography -->
+  <h1>Article Title</h1>
+  <p>Paragraph with <a href="#">links</a> and <code>code</code>.</p>
+</article>
+```
+### Font Loading
+```css
+/* @font-face in your CSS (Tailwind v4 approach) */
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/inter-variable.woff2") format("woff2");
+}
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+}
+```
+---
+## Component Patterns
+### Button System
+```html
+<!-- Base button with variants -->
+<button class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
+               text-sm font-medium transition-all duration-150
+               focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500
+               active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50">
+  Button Text
+</button>
+<!-- Primary variant -->
+<button class="... bg-primary-600 text-white shadow-sm hover:bg-primary-700">Primary</button>
+<!-- Ghost variant -->
+<button class="... text-text hover:bg-gray-100 dark:hover:bg-gray-800">Ghost</button>
+<!-- Destructive variant -->
+<button class="... bg-red-600 text-white hover:bg-red-700">Delete</button>
+<!-- Icon button -->
+<button class="grid size-10 place-items-center rounded-lg hover:bg-gray-100"
+        aria-label="Settings">
+  <svg class="size-5" ...></svg>
+</button>
+```
+### Input System
+```html
+<!-- Text input -->
+<div class="space-y-1.5">
+  <label for="email" class="text-sm font-medium text-text">Email</label>
+  <input id="email" type="email" placeholder="you@example.com"
+    class="w-full rounded-lg border border-gray-300 bg-surface px-3.5 py-2.5
+           text-sm text-text placeholder:text-text-muted
+           transition-colors duration-150
+           focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
+           disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
+  />
+  <p class="text-xs text-red-500">Error message here</p>
+</div>
+<!-- Checkbox -->
+<label class="flex items-center gap-2.5 text-sm">
+  <input type="checkbox"
+    class="size-4 rounded border-gray-300 text-primary-600
+           focus:ring-2 focus:ring-primary-500/20" />
+  Remember me
+</label>
+```
+### Card Pattern
+```html
+<div class="group overflow-hidden rounded-card bg-surface shadow-card
+            transition-shadow duration-200 hover:shadow-elevated">
+  <div class="aspect-video overflow-hidden bg-gray-100">
+    <img src="cover.jpg" alt="Cover"
+      class="size-full object-cover transition-transform duration-300
+             group-hover:scale-105" />
+  </div>
+  <div class="space-y-2 p-5">
+    <span class="inline-block rounded-full bg-primary-100 px-2.5 py-0.5
+                 text-xs font-medium text-primary-700">Category</span>
+    <h3 class="text-lg font-semibold text-text line-clamp-2">Card Title</h3>
+    <p class="text-sm text-text-muted line-clamp-3">Description text...</p>
+  </div>
+</div>
+```
+### Modal / Dialog
+```html
+<!-- Backdrop -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50
+            backdrop-blur-sm animate-fade-in">
+  <!-- Modal -->
+  <div class="w-full max-w-md rounded-2xl bg-surface p-6 shadow-elevated animate-slide-up"
+       role="dialog" aria-modal="true" aria-labelledby="modal-title">
+    <h2 id="modal-title" class="text-lg font-semibold">Dialog Title</h2>
+    <p class="mt-2 text-sm text-text-muted">Dialog description.</p>
+    <div class="mt-6 flex justify-end gap-3">
+      <button class="rounded-lg px-4 py-2 text-sm hover:bg-gray-100">Cancel</button>
+      <button class="rounded-lg bg-primary-600 px-4 py-2 text-sm text-white
+                     hover:bg-primary-700">Confirm</button>
+    </div>
+  </div>
+</div>
+```
+---
+## Responsive Design Rules
+```html
+<!-- Tailwind breakpoints (mobile-first) -->
+<!-- sm: 640px  │ md: 768px  │ lg: 1024px  │ xl: 1280px  │ 2xl: 1536px -->
+<!-- Stack on mobile, row on tablet+ -->
+<div class="flex flex-col gap-4 md:flex-row md:items-center">
+  <div class="md:w-1/2">Left</div>
+  <div class="md:w-1/2">Right</div>
+</div>
+<!-- Hide/show at breakpoints -->
+<nav class="hidden lg:flex">Desktop nav</nav>
+<button class="lg:hidden">☰ Mobile menu</button>
+<!-- Responsive padding -->
+<section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-24">
+  <div class="mx-auto max-w-7xl">Content</div>
+</section>
+<!-- Responsive grid -->
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+  <!-- Cards -->
+</div>
+```
+---
+## Animations & Transitions
+### Transition Utilities
+```html
+<!-- Smooth hover transitions -->
+<a class="text-text-muted transition-colors duration-150 hover:text-primary-600">Link</a>
+<!-- Transform transitions -->
+<div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-105">
+  Hover me
+</div>
+<!-- Combined transition -->
+<button class="rounded-lg bg-primary-600 px-4 py-2 text-white
+               transition-all duration-200
+               hover:bg-primary-700 hover:shadow-lg
+               active:scale-95">
+  Click me
+</button>
+```
+### Custom Keyframe Animations
+```css
+@theme {
+  --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --animate-spin-slow: spin 3s linear infinite;
+  --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
+}
+@keyframes bounce-in {
+  0% { opacity: 0; transform: scale(0.3); }
+  50% { transform: scale(1.05); }
+  70% { transform: scale(0.9); }
+  100% { opacity: 1; transform: scale(1); }
+}
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+```
+### Scroll-Driven Animations (CSS Native)
+```css
+/* Progress bar that fills as user scrolls */
+.scroll-progress {
+  animation: grow-width linear;
+  animation-timeline: scroll();
+}
+@keyframes grow-width {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+```
+```html
+<div class="scroll-progress fixed top-0 left-0 z-50 h-1 w-full origin-left bg-primary-600"></div>
+```
+---
+## Performance
+### Purging & Bundle Size
+```css
+/* Tailwind v4 automatically tree-shakes unused CSS at build time */
+/* No manual purge configuration needed */
+/* @source — explicitly add content paths for scanning */
+@source "../components/**/*.tsx";
+@source "../pages/**/*.tsx";
+/* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use purge: [] config
+   ❌ purge: ['./src/**/*.{html,tsx}']  ← REMOVED in v4
+   ✅ Uses automatic content detection based on your project structure
+   ✅ Use @source directive for custom paths */
+```
+### Avoiding Bloat
+```html
+<!-- ✅ GOOD: Use component extraction for repeated patterns -->
+<!-- Create a .btn class in CSS instead of repeating 15 utilities -->
+<!-- ❌ BAD: One-off arbitrary values everywhere -->
+<div class="mt-[13px] mr-[7px] p-[11px] text-[15px]">
+  <!-- Every arbitrary value = unique CSS rule = bundle bloat -->
+</div>
+<!-- ✅ GOOD: Use your design scale -->
+<div class="mt-3 mr-2 p-3 text-sm">
+  <!-- Maps to existing utilities = zero extra CSS -->
+</div>
+```
+### Component Extraction (When to @apply)
+```css
+/* Use @apply ONLY for highly reused component patterns */
+/* Do NOT @apply everything — it defeats Tailwind's purpose */
+.btn {
+  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
+         text-sm font-medium transition-all duration-150
+         focus-visible:outline-2 focus-visible:outline-offset-2
+         active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50;
+}
+.btn-primary {
+  @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700
+         focus-visible:outline-primary-500;
+}
+/* ❌ HALLUCINATION TRAP: @apply is for component patterns shared across files
+   If a pattern appears in only 1-2 places, just use inline utilities
+   Over-extracting with @apply = recreating regular CSS with extra steps */
+```
+---
+## Accessibility with Tailwind
+```html
+<!-- Focus visible (keyboard only, not mouse click) -->
+<a class="rounded-lg focus-visible:outline-2 focus-visible:outline-primary-500
+          focus-visible:outline-offset-2">
+  Keyboard accessible link
+</a>
+<!-- Screen reader only text -->
+<button>
+  <svg class="size-5" aria-hidden="true"></svg>
+  <span class="sr-only">Close menu</span>
+</button>
+<!-- Motion-safe / motion-reduce -->
+<div class="motion-safe:animate-bounce-in motion-reduce:animate-none">
+  <!-- Only animates if user hasn't enabled "reduce motion" -->
+</div>
+<!-- Forced colors mode (high contrast) -->
+<button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
+  Accessible button
+</button>
+```
+---