tribunal-kit 4.0.1 → 4.3.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 (196) hide show
  1. package/.agent/ARCHITECTURE.md +21 -14
  2. package/.agent/GEMINI.md +4 -2
  3. package/.agent/agents/api-architect.md +66 -0
  4. package/.agent/agents/db-latency-auditor.md +216 -0
  5. package/.agent/agents/precedence-reviewer.md +41 -4
  6. package/.agent/agents/resilience-reviewer.md +88 -0
  7. package/.agent/agents/schema-reviewer.md +67 -0
  8. package/.agent/agents/swarm-worker-contracts.md +5 -5
  9. package/.agent/agents/throughput-optimizer.md +299 -0
  10. package/.agent/agents/ui-ux-auditor.md +292 -0
  11. package/.agent/agents/vitals-reviewer.md +223 -0
  12. package/.agent/history/case-law/cases/case-0001.json +33 -0
  13. package/.agent/history/case-law/index.json +35 -0
  14. package/.agent/rules/GEMINI.md +28 -11
  15. package/.agent/scripts/__pycache__/_colors.cpython-311.pyc +0 -0
  16. package/.agent/scripts/__pycache__/_utils.cpython-311.pyc +0 -0
  17. package/.agent/scripts/__pycache__/case_law_manager.cpython-311.pyc +0 -0
  18. package/.agent/scripts/_colors.js +18 -0
  19. package/.agent/scripts/_utils.js +42 -0
  20. package/.agent/scripts/auto_preview.js +197 -0
  21. package/.agent/scripts/bundle_analyzer.js +290 -0
  22. package/.agent/scripts/case_law_manager.js +684 -0
  23. package/.agent/scripts/checklist.js +266 -0
  24. package/.agent/scripts/colors.js +17 -0
  25. package/.agent/scripts/compress_skills.js +141 -0
  26. package/.agent/scripts/consolidate_skills.js +149 -0
  27. package/.agent/scripts/context_broker.js +609 -0
  28. package/.agent/scripts/deep_compress.js +150 -0
  29. package/.agent/scripts/dependency_analyzer.js +272 -0
  30. package/.agent/scripts/inner_loop_validator.js +465 -0
  31. package/.agent/scripts/lint_runner.js +187 -0
  32. package/.agent/scripts/minify_context.js +100 -0
  33. package/.agent/scripts/patch_skills_meta.js +156 -0
  34. package/.agent/scripts/patch_skills_output.js +244 -0
  35. package/.agent/scripts/schema_validator.js +297 -0
  36. package/.agent/scripts/security_scan.js +303 -0
  37. package/.agent/scripts/session_manager.js +276 -0
  38. package/.agent/scripts/skill_evolution.js +644 -0
  39. package/.agent/scripts/skill_integrator.js +313 -0
  40. package/.agent/scripts/strengthen_skills.js +193 -0
  41. package/.agent/scripts/strip_tribunal.js +47 -0
  42. package/.agent/scripts/swarm_dispatcher.js +360 -0
  43. package/.agent/scripts/test_runner.js +193 -0
  44. package/.agent/scripts/utils.js +32 -0
  45. package/.agent/scripts/verify_all.js +256 -0
  46. package/.agent/skills/agent-organizer/SKILL.md +42 -0
  47. package/.agent/skills/agentic-patterns/SKILL.md +42 -0
  48. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +42 -0
  49. package/.agent/skills/api-patterns/SKILL.md +42 -0
  50. package/.agent/skills/api-security-auditor/SKILL.md +42 -0
  51. package/.agent/skills/app-builder/SKILL.md +42 -0
  52. package/.agent/skills/app-builder/templates/SKILL.md +70 -0
  53. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +1 -1
  54. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +1 -1
  55. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +1 -1
  56. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +1 -1
  57. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +1 -1
  58. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +1 -1
  59. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +1 -1
  60. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +1 -1
  61. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +1 -1
  62. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +1 -1
  63. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +1 -1
  64. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +1 -1
  65. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +1 -1
  66. package/.agent/skills/appflow-wireframe/SKILL.md +42 -0
  67. package/.agent/skills/architecture/SKILL.md +42 -0
  68. package/.agent/skills/authentication-best-practices/SKILL.md +42 -0
  69. package/.agent/skills/bash-linux/SKILL.md +42 -0
  70. package/.agent/skills/behavioral-modes/SKILL.md +42 -0
  71. package/.agent/skills/brainstorming/SKILL.md +42 -0
  72. package/.agent/skills/building-native-ui/SKILL.md +42 -0
  73. package/.agent/skills/clean-code/SKILL.md +42 -0
  74. package/.agent/skills/code-review-checklist/SKILL.md +42 -0
  75. package/.agent/skills/config-validator/SKILL.md +42 -0
  76. package/.agent/skills/csharp-developer/SKILL.md +42 -0
  77. package/.agent/skills/data-validation-schemas/SKILL.md +320 -0
  78. package/.agent/skills/database-design/SKILL.md +42 -0
  79. package/.agent/skills/deployment-procedures/SKILL.md +42 -0
  80. package/.agent/skills/devops-engineer/SKILL.md +42 -0
  81. package/.agent/skills/devops-incident-responder/SKILL.md +42 -0
  82. package/.agent/skills/doc.md +1 -1
  83. package/.agent/skills/documentation-templates/SKILL.md +42 -0
  84. package/.agent/skills/edge-computing/SKILL.md +42 -0
  85. package/.agent/skills/error-resilience/SKILL.md +420 -0
  86. package/.agent/skills/extract-design-system/SKILL.md +42 -0
  87. package/.agent/skills/framer-motion-expert/SKILL.md +42 -1
  88. package/.agent/skills/frontend-design/SKILL.md +42 -0
  89. package/.agent/skills/game-design-expert/SKILL.md +42 -0
  90. package/.agent/skills/game-engineering-expert/SKILL.md +42 -0
  91. package/.agent/skills/geo-fundamentals/SKILL.md +42 -0
  92. package/.agent/skills/github-operations/SKILL.md +42 -0
  93. package/.agent/skills/gsap-core/SKILL.md +300 -0
  94. package/.agent/skills/gsap-frameworks/SKILL.md +199 -0
  95. package/.agent/skills/gsap-performance/SKILL.md +125 -0
  96. package/.agent/skills/gsap-plugins/SKILL.md +472 -0
  97. package/.agent/skills/gsap-react/SKILL.md +181 -0
  98. package/.agent/skills/gsap-scrolltrigger/SKILL.md +342 -0
  99. package/.agent/skills/gsap-timeline/SKILL.md +153 -0
  100. package/.agent/skills/gsap-utils/SKILL.md +330 -0
  101. package/.agent/skills/i18n-localization/SKILL.md +42 -0
  102. package/.agent/skills/intelligent-routing/SKILL.md +72 -1
  103. package/.agent/skills/lint-and-validate/SKILL.md +42 -0
  104. package/.agent/skills/llm-engineering/SKILL.md +42 -0
  105. package/.agent/skills/local-first/SKILL.md +42 -0
  106. package/.agent/skills/mcp-builder/SKILL.md +42 -0
  107. package/.agent/skills/mobile-design/SKILL.md +42 -0
  108. package/.agent/skills/monorepo-management/SKILL.md +326 -0
  109. package/.agent/skills/motion-engineering/SKILL.md +42 -0
  110. package/.agent/skills/nextjs-react-expert/SKILL.md +42 -0
  111. package/.agent/skills/nodejs-best-practices/SKILL.md +42 -0
  112. package/.agent/skills/observability/SKILL.md +42 -0
  113. package/.agent/skills/parallel-agents/SKILL.md +42 -0
  114. package/.agent/skills/performance-profiling/SKILL.md +42 -0
  115. package/.agent/skills/plan-writing/SKILL.md +42 -0
  116. package/.agent/skills/platform-engineer/SKILL.md +42 -0
  117. package/.agent/skills/playwright-best-practices/SKILL.md +42 -0
  118. package/.agent/skills/powershell-windows/SKILL.md +42 -0
  119. package/.agent/skills/project-idioms/SKILL.md +42 -0
  120. package/.agent/skills/python-patterns/SKILL.md +42 -0
  121. package/.agent/skills/python-pro/SKILL.md +42 -0
  122. package/.agent/skills/react-specialist/SKILL.md +42 -0
  123. package/.agent/skills/readme-builder/SKILL.md +42 -0
  124. package/.agent/skills/realtime-patterns/SKILL.md +42 -0
  125. package/.agent/skills/red-team-tactics/SKILL.md +42 -0
  126. package/.agent/skills/rust-pro/SKILL.md +42 -0
  127. package/.agent/skills/seo-fundamentals/SKILL.md +42 -0
  128. package/.agent/skills/server-management/SKILL.md +42 -0
  129. package/.agent/skills/shadcn-ui-expert/SKILL.md +42 -0
  130. package/.agent/skills/skill-creator/SKILL.md +42 -0
  131. package/.agent/skills/sql-pro/SKILL.md +42 -0
  132. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +42 -0
  133. package/.agent/skills/swiftui-expert/SKILL.md +42 -0
  134. package/.agent/skills/systematic-debugging/SKILL.md +42 -0
  135. package/.agent/skills/tailwind-patterns/SKILL.md +42 -0
  136. package/.agent/skills/tdd-workflow/SKILL.md +42 -0
  137. package/.agent/skills/test-result-analyzer/SKILL.md +42 -0
  138. package/.agent/skills/testing-patterns/SKILL.md +42 -0
  139. package/.agent/skills/trend-researcher/SKILL.md +42 -0
  140. package/.agent/skills/typescript-advanced/SKILL.md +327 -0
  141. package/.agent/skills/ui-ux-pro-max/SKILL.md +42 -0
  142. package/.agent/skills/ui-ux-researcher/SKILL.md +42 -0
  143. package/.agent/skills/vue-expert/SKILL.md +42 -0
  144. package/.agent/skills/vulnerability-scanner/SKILL.md +42 -0
  145. package/.agent/skills/web-accessibility-auditor/SKILL.md +42 -0
  146. package/.agent/skills/web-design-guidelines/SKILL.md +42 -0
  147. package/.agent/skills/webapp-testing/SKILL.md +42 -0
  148. package/.agent/skills/whimsy-injector/SKILL.md +42 -0
  149. package/.agent/skills/workflow-optimizer/SKILL.md +42 -0
  150. package/.agent/workflows/audit.md +6 -6
  151. package/.agent/workflows/deploy.md +1 -1
  152. package/.agent/workflows/generate.md +23 -6
  153. package/.agent/workflows/session.md +5 -5
  154. package/.agent/workflows/swarm.md +2 -2
  155. package/.agent/workflows/tribunal-backend.md +13 -2
  156. package/.agent/workflows/tribunal-full.md +15 -8
  157. package/.agent/workflows/tribunal-speed.md +183 -0
  158. package/README.md +64 -8
  159. package/bin/tribunal-kit.js +281 -41
  160. package/package.json +9 -6
  161. package/scripts/changelog.js +167 -0
  162. package/scripts/sync-version.js +81 -0
  163. package/.agent/scripts/__pycache__/auto_preview.cpython-311.pyc +0 -0
  164. package/.agent/scripts/__pycache__/bundle_analyzer.cpython-311.pyc +0 -0
  165. package/.agent/scripts/__pycache__/checklist.cpython-311.pyc +0 -0
  166. package/.agent/scripts/__pycache__/dependency_analyzer.cpython-311.pyc +0 -0
  167. package/.agent/scripts/__pycache__/security_scan.cpython-311.pyc +0 -0
  168. package/.agent/scripts/__pycache__/session_manager.cpython-311.pyc +0 -0
  169. package/.agent/scripts/__pycache__/skill_integrator.cpython-311.pyc +0 -0
  170. package/.agent/scripts/__pycache__/swarm_dispatcher.cpython-311.pyc +0 -0
  171. package/.agent/scripts/__pycache__/test_runner.cpython-311.pyc +0 -0
  172. package/.agent/scripts/__pycache__/verify_all.cpython-311.pyc +0 -0
  173. package/.agent/scripts/auto_preview.py +0 -180
  174. package/.agent/scripts/bundle_analyzer.py +0 -259
  175. package/.agent/scripts/case_law_manager.py +0 -525
  176. package/.agent/scripts/checklist.py +0 -209
  177. package/.agent/scripts/compress_skills.py +0 -167
  178. package/.agent/scripts/consolidate_skills.py +0 -173
  179. package/.agent/scripts/deep_compress.py +0 -202
  180. package/.agent/scripts/dependency_analyzer.py +0 -247
  181. package/.agent/scripts/lint_runner.py +0 -188
  182. package/.agent/scripts/minify_context.py +0 -80
  183. package/.agent/scripts/patch_skills_meta.py +0 -177
  184. package/.agent/scripts/patch_skills_output.py +0 -285
  185. package/.agent/scripts/schema_validator.py +0 -279
  186. package/.agent/scripts/security_scan.py +0 -224
  187. package/.agent/scripts/session_manager.py +0 -261
  188. package/.agent/scripts/skill_evolution.py +0 -563
  189. package/.agent/scripts/skill_integrator.py +0 -234
  190. package/.agent/scripts/strengthen_skills.py +0 -220
  191. package/.agent/scripts/strip_tribunal.py +0 -41
  192. package/.agent/scripts/swarm_dispatcher.py +0 -350
  193. package/.agent/scripts/test_runner.py +0 -192
  194. package/.agent/scripts/test_swarm_dispatcher.py +0 -163
  195. package/.agent/scripts/verify_all.py +0 -195
  196. package/.agent/skills/gsap-expert/SKILL.md +0 -194
@@ -1,195 +0,0 @@
1
- #!/usr/bin/env python3
2
- """
3
- verify_all.py — Full pre-deploy validation suite for the Tribunal Agent Kit.
4
-
5
- Runs comprehensive checks before any production deployment.
6
-
7
- Usage:
8
- python .agent/scripts/verify_all.py
9
- python .agent/scripts/verify_all.py --skip build,deps
10
- """
11
-
12
- import os
13
- import sys
14
- import subprocess
15
- import argparse
16
- from pathlib import Path
17
-
18
- RED = "\033[91m"
19
- GREEN = "\033[92m"
20
- YELLOW = "\033[93m"
21
- BLUE = "\033[94m"
22
- BOLD = "\033[1m"
23
- RESET = "\033[0m"
24
-
25
- RESULTS: list[tuple[str, bool, str]] = []
26
-
27
-
28
- def section(title: str) -> None:
29
- print(f"\n{BOLD}{BLUE}━━━ {title} ━━━{RESET}")
30
-
31
-
32
- def ok(label: str, note: str = "") -> None:
33
- msg = f"{GREEN}✅ {label}{RESET}" + (f" {YELLOW}({note}){RESET}" if note else "")
34
- print(f" {msg}")
35
- RESULTS.append((label, True, note))
36
-
37
-
38
- def fail(label: str, note: str = "") -> None:
39
- note_str = f"\n {note}" if note else ""
40
- print(f" {RED}❌ {label}{RESET}{note_str}")
41
- RESULTS.append((label, False, note))
42
-
43
-
44
- def skip(label: str, reason: str) -> None:
45
- print(f" {YELLOW}⏭️ {label} — {reason}{RESET}")
46
- RESULTS.append((label, True, f"skipped: {reason}"))
47
-
48
-
49
- def run(label: str, cmd: list[str], cwd: str) -> bool:
50
- try:
51
- result = subprocess.run(cmd, cwd=cwd, capture_output=True, text=True, timeout=120)
52
- if result.returncode == 0:
53
- ok(label)
54
- return True
55
- output = (result.stdout + result.stderr).strip()
56
- fail(label, output[:500] if output else "non-zero exit code")
57
- return False
58
- except FileNotFoundError:
59
- skip(label, "tool not installed — skipping")
60
- return True
61
- except subprocess.TimeoutExpired:
62
- fail(label, "timed out after 120s")
63
- return False
64
-
65
-
66
- def scan_secrets(cwd: str) -> bool:
67
- """Scan source files for obviously hardcoded credentials."""
68
- patterns = ["password=", "secret=", "api_key=", "private_key=", "auth_token="]
69
- found = []
70
- for root, dirs, files in os.walk(cwd):
71
- dirs[:] = [d for d in dirs if d not in {"node_modules", ".git", "dist", "__pycache__", ".agent"}]
72
- for fname in files:
73
- if not fname.endswith((".ts", ".js", ".tsx", ".jsx", ".py")):
74
- continue
75
- fpath = os.path.join(root, fname)
76
- try:
77
- with open(fpath, encoding="utf-8", errors="ignore") as f:
78
- for i, line in enumerate(f, 1):
79
- low = line.lower().strip()
80
- if any(p in low for p in patterns) and not low.startswith("#") and "=" in low:
81
- rel = os.path.relpath(fpath, cwd)
82
- found.append(f"{rel}:{i}")
83
- except (IOError, PermissionError):
84
- pass
85
- if found:
86
- fail("Secret scan", "\n ".join(found[:5]))
87
- return False
88
- ok("Secret scan — no hardcoded credentials found")
89
- return True
90
-
91
-
92
- def has_npm(cwd: str) -> bool:
93
- """Check if there's a package.json to run npm commands against."""
94
- return Path(cwd, "package.json").exists()
95
-
96
-
97
- def verify_all(cwd: str, skipped: list[str]) -> int:
98
- failures = 0
99
-
100
- section("1 — Secret Scan")
101
- if "secrets" not in skipped:
102
- if not scan_secrets(cwd):
103
- failures += 1
104
- else:
105
- skip("Secret scan", "skipped by flag")
106
-
107
- section("2 — TypeScript")
108
- if "typescript" not in skipped:
109
- if has_npm(cwd):
110
- if not run("tsc --noEmit", ["npx", "tsc", "--noEmit"], cwd):
111
- failures += 1
112
- else:
113
- skip("TypeScript", "no package.json found in project")
114
- else:
115
- skip("TypeScript", "skipped by flag")
116
-
117
- section("3 — ESLint")
118
- if "lint" not in skipped:
119
- if has_npm(cwd):
120
- if not run("ESLint", ["npx", "eslint", ".", "--max-warnings=0"], cwd):
121
- failures += 1
122
- else:
123
- skip("ESLint", "no package.json found in project")
124
- else:
125
- skip("ESLint", "skipped by flag")
126
-
127
- section("4 — Unit Tests")
128
- if "tests" not in skipped:
129
- if has_npm(cwd):
130
- if not run("Test suite", ["npm", "test", "--", "--passWithNoTests"], cwd):
131
- failures += 1
132
- else:
133
- skip("Tests", "no package.json found in project")
134
- else:
135
- skip("Tests", "skipped by flag")
136
-
137
- section("5 — Build")
138
- if "build" not in skipped:
139
- if has_npm(cwd):
140
- if not run("npm run build", ["npm", "run", "build"], cwd):
141
- failures += 1
142
- else:
143
- skip("Build", "no package.json found in project")
144
- else:
145
- skip("Build", "skipped by flag")
146
-
147
- section("6 — Dependency Audit")
148
- if "deps" not in skipped:
149
- if has_npm(cwd):
150
- if not run("npm audit", ["npm", "audit", "--audit-level=high"], cwd):
151
- failures += 1
152
- else:
153
- skip("Dependency audit", "no package.json found in project")
154
- else:
155
- skip("Dependency audit", "skipped by flag")
156
-
157
- print(f"\n{BOLD}━━━ Summary ━━━{RESET}")
158
- for label, passed, note in RESULTS:
159
- status = f"{GREEN}✅{RESET}" if passed else f"{RED}❌{RESET}"
160
- note_str = f" {YELLOW}({note}){RESET}" if not passed and note else ""
161
- print(f" {status} {label}{note_str}")
162
-
163
- print()
164
- if failures == 0:
165
- print(f"{GREEN}{BOLD}All checks passed — safe to deploy.{RESET}")
166
- else:
167
- print(f"{RED}{BOLD}{failures} check(s) failed — fix before deploying.{RESET}")
168
-
169
- return failures
170
-
171
-
172
- def main() -> None:
173
- parser = argparse.ArgumentParser(
174
- description="Tribunal pre-deploy validation suite",
175
- usage="%(prog)s [--skip CHECKS]"
176
- )
177
- parser.add_argument(
178
- "--skip",
179
- default="",
180
- help="Comma-separated checks to skip: secrets,typescript,lint,tests,build,deps"
181
- )
182
- args = parser.parse_args()
183
-
184
- cwd = os.getcwd()
185
- skipped = [s.strip().lower() for s in args.skip.split(",") if s.strip()]
186
-
187
- print(f"{BOLD}Tribunal — verify_all.py{RESET}")
188
- print(f"Project: {cwd}\n")
189
-
190
- failures = verify_all(cwd, skipped)
191
- sys.exit(1 if failures > 0 else 0)
192
-
193
-
194
- if __name__ == "__main__":
195
- main()
@@ -1,194 +0,0 @@
1
- ---
2
- name: gsap-expert
3
- description: GreenSock Animation Platform (GSAP 3.12+) mastery. Core tweens, timelines, ScrollTrigger, ScrollSmoother, plugins, React useGSAP hook, responsive animations, performance. Use when building scroll-driven animations, complex sequencing, SVG morphing, or any animation beyond CSS capabilities.
4
- allowed-tools: Read, Write, Edit, Glob, Grep
5
- version: 3.2.0
6
- last-updated: 2026-04-07
7
- applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
8
- ---
9
-
10
- # GSAP Expert — 3.12+ Dense Reference
11
-
12
- ## Hallucination Traps (Read First)
13
- - ❌ `gsap.registerPlugin(ScrollTrigger)` optional → ✅ **REQUIRED** before any use — must call before component mounts
14
- - ❌ `easeInOut`, `Power2.easeOut` (GSAP 2 syntax) → ✅ `"power2.inOut"` (string, GSAP 3)
15
- - ❌ `raw useEffect` for GSAP in React → ✅ `useGSAP` from `@gsap/react` — handles cleanup automatically
16
- - ❌ Timeline position as 2nd arg → ✅ position is the **3rd** arg: `tl.to(el, { x: 100 }, "<")`
17
- - ❌ `markers: true` in production → ✅ Debug only — never ship. `gsap.config({ markers: false })`
18
- - ❌ Animate `width`, `height`, `top`, `left` → ✅ Only `x`, `y`, `scale`, `rotation`, `opacity` (GPU composited)
19
- - ❌ 1 ScrollTrigger per list item → ✅ Use `ScrollTrigger.batch()` for lists — 1 battery per N items
20
- - ❌ `dependencies` option spelled `deps` → ✅ option is `dependencies` (not `deps`)
21
- - ❌ GSAP in Next.js Server Components → ✅ Always `"use client"` — GSAP is browser-only
22
-
23
- ---
24
-
25
- ## Core Tweens
26
-
27
- ```javascript
28
- gsap.to(".box", { x: 100, opacity: 1, duration: 1, ease: "power2.out" });
29
- gsap.from(".box", { y: -50, opacity: 0, duration: 0.8 });
30
- gsap.fromTo(".box", { x: -100 }, { x: 0, duration: 1, ease: "expo.out" });
31
- gsap.set(".box", { transformOrigin: "center center", willChange: "transform" });
32
-
33
- // Stagger (multiple elements)
34
- gsap.from(".item", { opacity: 0, y: 30, stagger: 0.08, ease: "power3.out" });
35
- gsap.from(".item", { opacity: 0, stagger: { each: 0.1, from: "center", grid: "auto" } });
36
- ```
37
-
38
- ---
39
-
40
- ## Timelines
41
-
42
- ```javascript
43
- const tl = gsap.timeline({ defaults: { ease: "power2.out", duration: 0.6 } });
44
-
45
- tl.from(".hero-title", { y: 60, opacity: 0 })
46
- .from(".hero-sub", { y: 40, opacity: 0 }, "-=0.4") // overlap 0.4s
47
- .from(".hero-cta", { scale: 0.9, opacity: 0 }, "<0.1") // 0.1s after prev starts
48
- .to(".hero-img", { x: 0, opacity: 1 }, 0.3); // absolute 0.3s into tl
49
-
50
- // Position symbols:
51
- // "<" → same start time as previous tween
52
- // ">" → after previous ends
53
- // "-=0.5" → 0.5s before previous ends (overlap)
54
- // "+=0.5" → 0.5s after previous ends (gap)
55
- // "2" → absolute 2s from timeline start
56
-
57
- // Runtime control
58
- tl.play(); tl.pause(); tl.reverse(); tl.seek(1.5); tl.timeScale(2); // 2x speed
59
- ```
60
-
61
- ---
62
-
63
- ## ScrollTrigger
64
-
65
- ```javascript
66
- import { gsap } from "gsap";
67
- import { ScrollTrigger } from "gsap/ScrollTrigger";
68
- gsap.registerPlugin(ScrollTrigger); // REQUIRED — call once at module level
69
-
70
- // Basic scroll-triggered animation
71
- gsap.from(".section", {
72
- scrollTrigger: {
73
- trigger: ".section",
74
- start: "top 80%", // "triggerEdge viewportEdge"
75
- end: "bottom 20%",
76
- scrub: 1, // smooth scrubbing (seconds to catch up) | true = instant
77
- pin: true, // pin element during scroll
78
- anticipatePin: 1, // prevents jump on pin
79
- markers: false, // NEVER true in production
80
- },
81
- y: 100, opacity: 0,
82
- });
83
-
84
- // Batch — for lists (1 ST instance per group, not per item)
85
- ScrollTrigger.batch(".card", {
86
- onEnter: (elements) => gsap.from(elements, { opacity: 0, y: 40, stagger: 0.08 }),
87
- start: "top 85%",
88
- });
89
-
90
- // Pin + scrub storytelling
91
- const tl = gsap.timeline({
92
- scrollTrigger: { trigger: ".scene", pin: true, scrub: true, end: "+=3000" }
93
- });
94
- tl.from(".layer-1", { x: -200 }).from(".layer-2", { x: 200 }, "<");
95
-
96
- // Cleanup — MANDATORY on SPA route unmount
97
- ScrollTrigger.killAll(); // in component cleanup / router onChange
98
- ```
99
-
100
- ---
101
-
102
- ## React Integration (`useGSAP`)
103
-
104
- ```tsx
105
- import { useGSAP } from "@gsap/react";
106
- import { gsap } from "gsap";
107
- import { ScrollTrigger } from "gsap/ScrollTrigger";
108
- import { useRef } from "react";
109
-
110
- gsap.registerPlugin(ScrollTrigger); // once, outside component
111
-
112
- export function HeroSection() {
113
- const container = useRef<HTMLDivElement>(null);
114
-
115
- useGSAP(() => {
116
- // ✅ All GSAP code here is automatically scoped & cleaned up
117
- gsap.from(".hero-title", { y: 60, opacity: 0, duration: 0.8 });
118
-
119
- gsap.from(".hero-card", {
120
- scrollTrigger: { trigger: ".hero-card", start: "top 80%" },
121
- y: 40, opacity: 0, stagger: 0.1,
122
- });
123
- }, { scope: container, dependencies: [] }); // re-runs when dependencies change
124
-
125
- return <div ref={container}><h1 className="hero-title">...</h1></div>;
126
- }
127
-
128
- // With cleanup for dynamic content:
129
- useGSAP(() => {
130
- const ctx = gsap.context(() => {
131
- gsap.from(".item", { opacity: 0, stagger: 0.05 });
132
- }, container);
133
- return () => ctx.revert(); // explicit cleanup if needed beyond useGSAP scope
134
- }, { scope: container, dependencies: [items] });
135
- ```
136
-
137
- ---
138
-
139
- ## Responsive Animations (`gsap.matchMedia`)
140
-
141
- ```javascript
142
- // Replaces window.matchMedia listeners + resize handlers
143
- const mm = gsap.matchMedia();
144
-
145
- mm.add("(min-width: 768px)", () => {
146
- gsap.to(".sidebar", { x: 0, duration: 0.5 });
147
- // Return cleanup function
148
- return () => gsap.set(".sidebar", { x: -300 });
149
- });
150
-
151
- mm.add("(max-width: 767px)", () => {
152
- gsap.to(".mobile-menu", { y: 0, duration: 0.4 });
153
- });
154
-
155
- // In React — use inside useGSAP
156
- useGSAP(() => {
157
- const mm = gsap.matchMedia();
158
- mm.add("(prefers-reduced-motion: no-preference)", () => {
159
- gsap.from(".hero", { y: 100, duration: 1 });
160
- });
161
- mm.add("(prefers-reduced-motion: reduce)", () => {
162
- gsap.set(".hero", { opacity: 1 }); // instant, no animation
163
- });
164
- });
165
- ```
166
-
167
- ---
168
-
169
- ## Plugin Reference
170
-
171
- | Plugin | Use For | Registration |
172
- |--------|---------|-------------|
173
- | `ScrollTrigger` | Scroll-driven animations | `gsap.registerPlugin(ScrollTrigger)` |
174
- | `ScrollSmoother` | Smooth native scroll momentum | Requires `ScrollTrigger` + Club GSAP |
175
- | `Flip` | Stateful layout morphing (FLIP technique) | `gsap.registerPlugin(Flip)` |
176
- | `Draggable` | Interactive drag/sort/resize | `gsap.registerPlugin(Draggable)` |
177
- | `SplitText` | Character/word/line text splits | Call `.revert()` after use to prevent SEO damage |
178
- | `DrawSVG` | SVG stroke-dasharray animations | Club GSAP |
179
- | `MorphSVG` | SVG path morphing | Club GSAP |
180
- | `ScrollToPlugin` | Programmatic scroll-to | `gsap.registerPlugin(ScrollToPlugin)` |
181
-
182
- ---
183
-
184
- ## Performance Rules
185
-
186
- ```
187
- ✅ Animate: x, y, scale, rotation, skewX/Y, opacity (GPU composited transforms)
188
- ❌ Never: width, height, top, left, padding, margin (triggers layout/paint)
189
- ✅ Use willChange: "transform" on elements that will animate
190
- ✅ overwrite: "auto" to kill conflicting tweens automatically
191
- ✅ ScrollTrigger.batch() for lists — NOT 1 instance per item
192
- ✅ gsap.ticker.lagSmoothing(0) in high-framerate contexts (optional)
193
- ❌ Don't animate SVG path 'd' attribute directly — use MorphSVG plugin
194
- ```