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.
- package/.agent/ARCHITECTURE.md +21 -14
- package/.agent/GEMINI.md +4 -2
- package/.agent/agents/api-architect.md +66 -0
- package/.agent/agents/db-latency-auditor.md +216 -0
- package/.agent/agents/precedence-reviewer.md +41 -4
- package/.agent/agents/resilience-reviewer.md +88 -0
- package/.agent/agents/schema-reviewer.md +67 -0
- package/.agent/agents/swarm-worker-contracts.md +5 -5
- package/.agent/agents/throughput-optimizer.md +299 -0
- package/.agent/agents/ui-ux-auditor.md +292 -0
- package/.agent/agents/vitals-reviewer.md +223 -0
- package/.agent/history/case-law/cases/case-0001.json +33 -0
- package/.agent/history/case-law/index.json +35 -0
- package/.agent/rules/GEMINI.md +28 -11
- package/.agent/scripts/__pycache__/_colors.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/_utils.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/case_law_manager.cpython-311.pyc +0 -0
- package/.agent/scripts/_colors.js +18 -0
- package/.agent/scripts/_utils.js +42 -0
- package/.agent/scripts/auto_preview.js +197 -0
- package/.agent/scripts/bundle_analyzer.js +290 -0
- package/.agent/scripts/case_law_manager.js +684 -0
- package/.agent/scripts/checklist.js +266 -0
- package/.agent/scripts/colors.js +17 -0
- package/.agent/scripts/compress_skills.js +141 -0
- package/.agent/scripts/consolidate_skills.js +149 -0
- package/.agent/scripts/context_broker.js +609 -0
- package/.agent/scripts/deep_compress.js +150 -0
- package/.agent/scripts/dependency_analyzer.js +272 -0
- package/.agent/scripts/inner_loop_validator.js +465 -0
- package/.agent/scripts/lint_runner.js +187 -0
- package/.agent/scripts/minify_context.js +100 -0
- package/.agent/scripts/patch_skills_meta.js +156 -0
- package/.agent/scripts/patch_skills_output.js +244 -0
- package/.agent/scripts/schema_validator.js +297 -0
- package/.agent/scripts/security_scan.js +303 -0
- package/.agent/scripts/session_manager.js +276 -0
- package/.agent/scripts/skill_evolution.js +644 -0
- package/.agent/scripts/skill_integrator.js +313 -0
- package/.agent/scripts/strengthen_skills.js +193 -0
- package/.agent/scripts/strip_tribunal.js +47 -0
- package/.agent/scripts/swarm_dispatcher.js +360 -0
- package/.agent/scripts/test_runner.js +193 -0
- package/.agent/scripts/utils.js +32 -0
- package/.agent/scripts/verify_all.js +256 -0
- package/.agent/skills/agent-organizer/SKILL.md +42 -0
- package/.agent/skills/agentic-patterns/SKILL.md +42 -0
- package/.agent/skills/ai-prompt-injection-defense/SKILL.md +42 -0
- package/.agent/skills/api-patterns/SKILL.md +42 -0
- package/.agent/skills/api-security-auditor/SKILL.md +42 -0
- package/.agent/skills/app-builder/SKILL.md +42 -0
- package/.agent/skills/app-builder/templates/SKILL.md +70 -0
- package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +1 -1
- package/.agent/skills/appflow-wireframe/SKILL.md +42 -0
- package/.agent/skills/architecture/SKILL.md +42 -0
- package/.agent/skills/authentication-best-practices/SKILL.md +42 -0
- package/.agent/skills/bash-linux/SKILL.md +42 -0
- package/.agent/skills/behavioral-modes/SKILL.md +42 -0
- package/.agent/skills/brainstorming/SKILL.md +42 -0
- package/.agent/skills/building-native-ui/SKILL.md +42 -0
- package/.agent/skills/clean-code/SKILL.md +42 -0
- package/.agent/skills/code-review-checklist/SKILL.md +42 -0
- package/.agent/skills/config-validator/SKILL.md +42 -0
- package/.agent/skills/csharp-developer/SKILL.md +42 -0
- package/.agent/skills/data-validation-schemas/SKILL.md +320 -0
- package/.agent/skills/database-design/SKILL.md +42 -0
- package/.agent/skills/deployment-procedures/SKILL.md +42 -0
- package/.agent/skills/devops-engineer/SKILL.md +42 -0
- package/.agent/skills/devops-incident-responder/SKILL.md +42 -0
- package/.agent/skills/doc.md +1 -1
- package/.agent/skills/documentation-templates/SKILL.md +42 -0
- package/.agent/skills/edge-computing/SKILL.md +42 -0
- package/.agent/skills/error-resilience/SKILL.md +420 -0
- package/.agent/skills/extract-design-system/SKILL.md +42 -0
- package/.agent/skills/framer-motion-expert/SKILL.md +42 -1
- package/.agent/skills/frontend-design/SKILL.md +42 -0
- package/.agent/skills/game-design-expert/SKILL.md +42 -0
- package/.agent/skills/game-engineering-expert/SKILL.md +42 -0
- package/.agent/skills/geo-fundamentals/SKILL.md +42 -0
- package/.agent/skills/github-operations/SKILL.md +42 -0
- package/.agent/skills/gsap-core/SKILL.md +300 -0
- package/.agent/skills/gsap-frameworks/SKILL.md +199 -0
- package/.agent/skills/gsap-performance/SKILL.md +125 -0
- package/.agent/skills/gsap-plugins/SKILL.md +472 -0
- package/.agent/skills/gsap-react/SKILL.md +181 -0
- package/.agent/skills/gsap-scrolltrigger/SKILL.md +342 -0
- package/.agent/skills/gsap-timeline/SKILL.md +153 -0
- package/.agent/skills/gsap-utils/SKILL.md +330 -0
- package/.agent/skills/i18n-localization/SKILL.md +42 -0
- package/.agent/skills/intelligent-routing/SKILL.md +72 -1
- package/.agent/skills/lint-and-validate/SKILL.md +42 -0
- package/.agent/skills/llm-engineering/SKILL.md +42 -0
- package/.agent/skills/local-first/SKILL.md +42 -0
- package/.agent/skills/mcp-builder/SKILL.md +42 -0
- package/.agent/skills/mobile-design/SKILL.md +42 -0
- package/.agent/skills/monorepo-management/SKILL.md +326 -0
- package/.agent/skills/motion-engineering/SKILL.md +42 -0
- package/.agent/skills/nextjs-react-expert/SKILL.md +42 -0
- package/.agent/skills/nodejs-best-practices/SKILL.md +42 -0
- package/.agent/skills/observability/SKILL.md +42 -0
- package/.agent/skills/parallel-agents/SKILL.md +42 -0
- package/.agent/skills/performance-profiling/SKILL.md +42 -0
- package/.agent/skills/plan-writing/SKILL.md +42 -0
- package/.agent/skills/platform-engineer/SKILL.md +42 -0
- package/.agent/skills/playwright-best-practices/SKILL.md +42 -0
- package/.agent/skills/powershell-windows/SKILL.md +42 -0
- package/.agent/skills/project-idioms/SKILL.md +42 -0
- package/.agent/skills/python-patterns/SKILL.md +42 -0
- package/.agent/skills/python-pro/SKILL.md +42 -0
- package/.agent/skills/react-specialist/SKILL.md +42 -0
- package/.agent/skills/readme-builder/SKILL.md +42 -0
- package/.agent/skills/realtime-patterns/SKILL.md +42 -0
- package/.agent/skills/red-team-tactics/SKILL.md +42 -0
- package/.agent/skills/rust-pro/SKILL.md +42 -0
- package/.agent/skills/seo-fundamentals/SKILL.md +42 -0
- package/.agent/skills/server-management/SKILL.md +42 -0
- package/.agent/skills/shadcn-ui-expert/SKILL.md +42 -0
- package/.agent/skills/skill-creator/SKILL.md +42 -0
- package/.agent/skills/sql-pro/SKILL.md +42 -0
- package/.agent/skills/supabase-postgres-best-practices/SKILL.md +42 -0
- package/.agent/skills/swiftui-expert/SKILL.md +42 -0
- package/.agent/skills/systematic-debugging/SKILL.md +42 -0
- package/.agent/skills/tailwind-patterns/SKILL.md +42 -0
- package/.agent/skills/tdd-workflow/SKILL.md +42 -0
- package/.agent/skills/test-result-analyzer/SKILL.md +42 -0
- package/.agent/skills/testing-patterns/SKILL.md +42 -0
- package/.agent/skills/trend-researcher/SKILL.md +42 -0
- package/.agent/skills/typescript-advanced/SKILL.md +327 -0
- package/.agent/skills/ui-ux-pro-max/SKILL.md +42 -0
- package/.agent/skills/ui-ux-researcher/SKILL.md +42 -0
- package/.agent/skills/vue-expert/SKILL.md +42 -0
- package/.agent/skills/vulnerability-scanner/SKILL.md +42 -0
- package/.agent/skills/web-accessibility-auditor/SKILL.md +42 -0
- package/.agent/skills/web-design-guidelines/SKILL.md +42 -0
- package/.agent/skills/webapp-testing/SKILL.md +42 -0
- package/.agent/skills/whimsy-injector/SKILL.md +42 -0
- package/.agent/skills/workflow-optimizer/SKILL.md +42 -0
- package/.agent/workflows/audit.md +6 -6
- package/.agent/workflows/deploy.md +1 -1
- package/.agent/workflows/generate.md +23 -6
- package/.agent/workflows/session.md +5 -5
- package/.agent/workflows/swarm.md +2 -2
- package/.agent/workflows/tribunal-backend.md +13 -2
- package/.agent/workflows/tribunal-full.md +15 -8
- package/.agent/workflows/tribunal-speed.md +183 -0
- package/README.md +64 -8
- package/bin/tribunal-kit.js +281 -41
- package/package.json +9 -6
- package/scripts/changelog.js +167 -0
- package/scripts/sync-version.js +81 -0
- package/.agent/scripts/__pycache__/auto_preview.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/bundle_analyzer.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/checklist.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/dependency_analyzer.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/security_scan.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/session_manager.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/skill_integrator.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/swarm_dispatcher.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/test_runner.cpython-311.pyc +0 -0
- package/.agent/scripts/__pycache__/verify_all.cpython-311.pyc +0 -0
- package/.agent/scripts/auto_preview.py +0 -180
- package/.agent/scripts/bundle_analyzer.py +0 -259
- package/.agent/scripts/case_law_manager.py +0 -525
- package/.agent/scripts/checklist.py +0 -209
- package/.agent/scripts/compress_skills.py +0 -167
- package/.agent/scripts/consolidate_skills.py +0 -173
- package/.agent/scripts/deep_compress.py +0 -202
- package/.agent/scripts/dependency_analyzer.py +0 -247
- package/.agent/scripts/lint_runner.py +0 -188
- package/.agent/scripts/minify_context.py +0 -80
- package/.agent/scripts/patch_skills_meta.py +0 -177
- package/.agent/scripts/patch_skills_output.py +0 -285
- package/.agent/scripts/schema_validator.py +0 -279
- package/.agent/scripts/security_scan.py +0 -224
- package/.agent/scripts/session_manager.py +0 -261
- package/.agent/scripts/skill_evolution.py +0 -563
- package/.agent/scripts/skill_integrator.py +0 -234
- package/.agent/scripts/strengthen_skills.py +0 -220
- package/.agent/scripts/strip_tribunal.py +0 -41
- package/.agent/scripts/swarm_dispatcher.py +0 -350
- package/.agent/scripts/test_runner.py +0 -192
- package/.agent/scripts/test_swarm_dispatcher.py +0 -163
- package/.agent/scripts/verify_all.py +0 -195
- 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
|
-
```
|