tribunal-kit 4.3.0 → 4.4.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/history/architecture-explorer.html +352 -0
- package/.agent/history/architecture-graph.yaml +109 -0
- package/.agent/history/graph-cache.json +215 -0
- package/.agent/history/snapshots/migrate_refs.js.json +11 -0
- package/.agent/history/snapshots/scripts__changelog.js.json +12 -0
- package/.agent/history/snapshots/scripts__sync-version.js.json +11 -0
- package/.agent/history/snapshots/scripts__validate-payload.js.json +11 -0
- package/.agent/history/snapshots/test__integration__bridges.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__init.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__routing.test.js.json +11 -0
- package/.agent/history/snapshots/test__integration__swarm_dispatcher.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__wave2.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__args.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__case_law_manager.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__copyDir.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__graph_tools.test.js.json +11 -0
- package/.agent/history/snapshots/test__unit__selfInstall.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__semver.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__swarm_dispatcher.test.js.json +11 -0
- package/.agent/scripts/case_law_manager.js +684 -684
- package/.agent/scripts/dependency_analyzer.js +1 -1
- package/.agent/scripts/graph_builder.js +311 -0
- package/.agent/scripts/graph_visualizer.js +384 -0
- package/.agent/scripts/graph_zoom.js +154 -0
- package/.agent/scripts/mutation_runner.js +280 -0
- package/.agent/skills/agent-organizer/SKILL.md +9 -1
- package/.agent/skills/agentic-patterns/SKILL.md +9 -1
- package/.agent/skills/ai-prompt-injection-defense/SKILL.md +9 -1
- package/.agent/skills/api-patterns/SKILL.md +206 -198
- package/.agent/skills/api-security-auditor/SKILL.md +9 -1
- package/.agent/skills/app-builder/SKILL.md +9 -1
- package/.agent/skills/app-builder/templates/SKILL.md +77 -69
- package/.agent/skills/appflow-wireframe/SKILL.md +9 -1
- package/.agent/skills/architecture/SKILL.md +9 -1
- package/.agent/skills/authentication-best-practices/SKILL.md +9 -1
- package/.agent/skills/bash-linux/SKILL.md +9 -1
- package/.agent/skills/behavioral-modes/SKILL.md +9 -1
- package/.agent/skills/brainstorming/SKILL.md +9 -1
- package/.agent/skills/building-native-ui/SKILL.md +9 -1
- package/.agent/skills/clean-code/SKILL.md +9 -1
- package/.agent/skills/code-review-checklist/SKILL.md +9 -1
- package/.agent/skills/config-validator/SKILL.md +9 -1
- package/.agent/skills/csharp-developer/SKILL.md +9 -1
- package/.agent/skills/data-validation-schemas/SKILL.md +287 -279
- package/.agent/skills/database-design/SKILL.md +199 -191
- package/.agent/skills/deployment-procedures/SKILL.md +9 -1
- package/.agent/skills/devops-engineer/SKILL.md +9 -1
- package/.agent/skills/devops-incident-responder/SKILL.md +9 -1
- package/.agent/skills/documentation-templates/SKILL.md +9 -1
- package/.agent/skills/edge-computing/SKILL.md +9 -1
- package/.agent/skills/error-resilience/SKILL.md +387 -379
- package/.agent/skills/extract-design-system/SKILL.md +9 -1
- package/.agent/skills/framer-motion-expert/SKILL.md +203 -195
- package/.agent/skills/frontend-design/SKILL.md +160 -152
- package/.agent/skills/game-design-expert/SKILL.md +9 -1
- package/.agent/skills/game-engineering-expert/SKILL.md +9 -1
- package/.agent/skills/geo-fundamentals/SKILL.md +9 -1
- package/.agent/skills/github-operations/SKILL.md +9 -1
- package/.agent/skills/gsap-core/SKILL.md +54 -46
- package/.agent/skills/gsap-frameworks/SKILL.md +54 -46
- package/.agent/skills/gsap-performance/SKILL.md +54 -46
- package/.agent/skills/gsap-plugins/SKILL.md +54 -46
- package/.agent/skills/gsap-react/SKILL.md +54 -46
- package/.agent/skills/gsap-scrolltrigger/SKILL.md +54 -46
- package/.agent/skills/gsap-timeline/SKILL.md +54 -46
- package/.agent/skills/gsap-utils/SKILL.md +54 -46
- package/.agent/skills/i18n-localization/SKILL.md +9 -1
- package/.agent/skills/intelligent-routing/SKILL.md +38 -30
- package/.agent/skills/knowledge-graph/SKILL.md +52 -0
- package/.agent/skills/lint-and-validate/SKILL.md +9 -1
- package/.agent/skills/llm-engineering/SKILL.md +9 -1
- package/.agent/skills/local-first/SKILL.md +9 -1
- package/.agent/skills/mcp-builder/SKILL.md +9 -1
- package/.agent/skills/mobile-design/SKILL.md +222 -214
- package/.agent/skills/monorepo-management/SKILL.md +293 -285
- package/.agent/skills/motion-engineering/SKILL.md +193 -185
- package/.agent/skills/nextjs-react-expert/SKILL.md +193 -185
- package/.agent/skills/nodejs-best-practices/SKILL.md +9 -1
- package/.agent/skills/observability/SKILL.md +9 -1
- package/.agent/skills/parallel-agents/SKILL.md +9 -1
- package/.agent/skills/performance-profiling/SKILL.md +9 -1
- package/.agent/skills/plan-writing/SKILL.md +9 -1
- package/.agent/skills/platform-engineer/SKILL.md +9 -1
- package/.agent/skills/playwright-best-practices/SKILL.md +9 -1
- package/.agent/skills/powershell-windows/SKILL.md +9 -1
- package/.agent/skills/project-idioms/SKILL.md +9 -1
- package/.agent/skills/python-patterns/SKILL.md +9 -1
- package/.agent/skills/python-pro/SKILL.md +282 -274
- package/.agent/skills/react-specialist/SKILL.md +236 -228
- package/.agent/skills/readme-builder/SKILL.md +9 -1
- package/.agent/skills/realtime-patterns/SKILL.md +9 -1
- package/.agent/skills/red-team-tactics/SKILL.md +9 -1
- package/.agent/skills/rust-pro/SKILL.md +9 -1
- package/.agent/skills/seo-fundamentals/SKILL.md +9 -1
- package/.agent/skills/server-management/SKILL.md +9 -1
- package/.agent/skills/shadcn-ui-expert/SKILL.md +9 -1
- package/.agent/skills/skill-creator/SKILL.md +9 -1
- package/.agent/skills/sql-pro/SKILL.md +9 -1
- package/.agent/skills/supabase-postgres-best-practices/SKILL.md +9 -1
- package/.agent/skills/swiftui-expert/SKILL.md +9 -1
- package/.agent/skills/systematic-debugging/SKILL.md +9 -1
- package/.agent/skills/tailwind-patterns/SKILL.md +9 -1
- package/.agent/skills/tdd-workflow/SKILL.md +9 -1
- package/.agent/skills/test-result-analyzer/SKILL.md +9 -1
- package/.agent/skills/testing-patterns/SKILL.md +28 -3
- package/.agent/skills/trend-researcher/SKILL.md +9 -1
- package/.agent/skills/typescript-advanced/SKILL.md +294 -286
- package/.agent/skills/ui-ux-pro-max/SKILL.md +561 -116
- package/.agent/skills/ui-ux-researcher/SKILL.md +9 -1
- package/.agent/skills/vue-expert/SKILL.md +234 -226
- package/.agent/skills/vulnerability-scanner/SKILL.md +9 -1
- package/.agent/skills/web-accessibility-auditor/SKILL.md +9 -1
- package/.agent/skills/web-design-guidelines/SKILL.md +9 -1
- package/.agent/skills/webapp-testing/SKILL.md +9 -1
- package/.agent/skills/whimsy-injector/SKILL.md +9 -1
- package/.agent/skills/workflow-optimizer/SKILL.md +9 -1
- package/README.md +242 -242
- package/bin/tribunal-kit.js +157 -21
- package/package.json +81 -80
- package/scripts/validate-payload.js +73 -0
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: frontend-design
|
|
3
|
-
description: Design thinking for web UI. Micro-interactions, visual hierarchy, typography scaling, HSL color palettes, spacing systems, and CSS-first UI logic. Avoid generic AI aesthetics.
|
|
4
|
-
allowed-tools: Read, Write, Edit, Glob, Grep
|
|
5
|
-
version: 3.1.0
|
|
6
|
-
last-updated: 2026-04-06
|
|
7
|
-
applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
# Frontend Design — Dense Reference
|
|
11
|
-
|
|
12
|
-
## Hallucination Traps (Read First)
|
|
13
|
-
- ❌ Purple gradient backgrounds (`from-purple-500 to-blue-500`) → ✅ The worst AI UI cliché. Use high-contrast solid colors, grain, or sophisticated HSL mono-palettes.
|
|
14
|
-
- ❌ Hardcoded pixels (`font-size: 14px`) → ✅ Use `rem` for accessibility and scaling (`1rem = 16px`).
|
|
15
|
-
- ❌ Gray text (`#888`) on white → ✅ Fails WCAG contrast. Text must be `4.5:1` ratio.
|
|
16
|
-
- ❌ Generic sans-serif → ✅ Inter, Geist, Roboto Mono, or system-ui. Typography is 80% of design.
|
|
17
|
-
- ❌ "Bento Box" grids for everything → ✅ Overused pattern. Use directional flow or asymmetric layouts.
|
|
18
|
-
- ❌ Symmetrical layouts out of laziness → ✅ Tension and blank space (negative space) drive premium feel.
|
|
19
|
-
- ❌ Infinite scrolling without context → ✅ Provide clear footers or logical pagination markers.
|
|
20
|
-
- ❌ Over-animating everything (`all elements fade in`) → ✅ Animate state changes (hover, focus, submit), not static entry layout unless scrollytelling.
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## 1. Color Theory (HSL over HEX)
|
|
25
|
-
|
|
26
|
-
Never use raw flat HEX colors. Use HSL to build cohesive scales.
|
|
27
|
-
|
|
28
|
-
```css
|
|
29
|
-
:root {
|
|
30
|
-
/* HSL allows programmatic adjustment of lightness/saturation */
|
|
31
|
-
--hue: 220;
|
|
32
|
-
--sat: 80%;
|
|
33
|
-
|
|
34
|
-
--bg-base: hsl(var(--hue), 15%, 98%);
|
|
35
|
-
--bg-surface: hsl(var(--hue), 20%, 100%);
|
|
36
|
-
|
|
37
|
-
--text-main: hsl(var(--hue), 40%, 10%);
|
|
38
|
-
--text-muted: hsl(var(--hue), 20%, 40%);
|
|
39
|
-
|
|
40
|
-
--primary: hsl(var(--hue), var(--sat), 50%);
|
|
41
|
-
--primary-hover: hsl(var(--hue), var(--sat), 40%); /* Darken via L */
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/* OLED Dark Mode */
|
|
45
|
-
@media (prefers-color-scheme: dark) {
|
|
46
|
-
:root {
|
|
47
|
-
--bg-base: hsl(var(--hue), 10%, 2%);
|
|
48
|
-
--bg-surface: hsl(var(--hue), 10%, 6%);
|
|
49
|
-
--text-main: hsl(var(--hue), 20%, 95%);
|
|
50
|
-
--text-muted: hsl(var(--hue), 10%, 60%);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## 2. Spatial Systems & Grid Mathematics
|
|
56
|
-
|
|
57
|
-
Design relies on structural rhythm. Use an **8px base system**.
|
|
58
|
-
|
|
59
|
-
- **Micro padding**: `4px`, `8px` (Tags, List items)
|
|
60
|
-
- **Component padding**: `16px`, `24px` (Cards, Inputs, Modals)
|
|
61
|
-
- **Section spacing**: `48px`, `64px`, `96px` (Page sections)
|
|
62
|
-
- **Line height**: Body `1.5`, Headings `1.1` or `1.2`.
|
|
63
|
-
|
|
64
|
-
```css
|
|
65
|
-
/* Fluid Typography (Clamp) */
|
|
66
|
-
h1 {
|
|
67
|
-
/* Min 2rem, fluidly scale between 480px-1200px, Max 4rem */
|
|
68
|
-
font-size: clamp(2rem, 5vw, 4rem);
|
|
69
|
-
letter-spacing: -0.02em; /* Tighten large text */
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
p {
|
|
73
|
-
font-size: 1rem;
|
|
74
|
-
max-width: 65ch; /* Optimal reading length */
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
---
|
|
79
|
-
|
|
80
|
-
## 3. Interaction & "Juice" (Micro-interactions)
|
|
81
|
-
|
|
82
|
-
A premium UI reacts to the user instantly and smoothly. Focus on state transitions.
|
|
83
|
-
|
|
84
|
-
```css
|
|
85
|
-
/* Smooth generic transition */
|
|
86
|
-
.btn {
|
|
87
|
-
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* Active Depth - The physical button push */
|
|
91
|
-
.btn:active {
|
|
92
|
-
transform: scale(0.97);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/* Hardware-Accelerated Shadows */
|
|
96
|
-
.card {
|
|
97
|
-
box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.1), 0 2px 4px -1px rgba(0,0,0, 0.06);
|
|
98
|
-
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
99
|
-
}
|
|
100
|
-
.card:hover {
|
|
101
|
-
transform: translateY(-4px); /* Float effect */
|
|
102
|
-
box-shadow: 0 20px 25px -5px rgba(0,0,0, 0.1), 0 10px 10px -5px rgba(0,0,0, 0.04);
|
|
103
|
-
}
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
---
|
|
107
|
-
|
|
108
|
-
## 4. Modern Glassmorphism & Depth
|
|
109
|
-
|
|
110
|
-
Flat design is dead. Modern UI uses depth, layering, and blur.
|
|
111
|
-
|
|
112
|
-
```css
|
|
113
|
-
/* Frosted Glass */
|
|
114
|
-
.glass {
|
|
115
|
-
background: rgba(255, 255, 255, 0.7);
|
|
116
|
-
backdrop-filter: blur(16px);
|
|
117
|
-
-webkit-backdrop-filter: blur(16px);
|
|
118
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
119
|
-
border-radius: 16px;
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## 5. Forms and High-Friction UI
|
|
126
|
-
|
|
127
|
-
Forms are where users drop off. They must be flawless.
|
|
128
|
-
|
|
129
|
-
- **Auto-focus** the first input on modal open.
|
|
130
|
-
- **Labels** must be visible outside the input (not just placeholders).
|
|
131
|
-
- **Validation** happens `onBlur` (when leaving), NOT `onChange` (typing).
|
|
132
|
-
- **Submit buttons** show loading spinners, disable inputs, and prevent double-clicks.
|
|
133
|
-
|
|
134
|
-
```css
|
|
135
|
-
/* Focus-visible: Only show ring for keyboard nav, not mouse clicks */
|
|
136
|
-
button:focus-visible {
|
|
137
|
-
outline: 2px solid var(--primary);
|
|
138
|
-
outline-offset: 2px;
|
|
139
|
-
}
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## 6. Accessibility (WCAG 2.2 AA)
|
|
145
|
-
|
|
146
|
-
Design is fundamentally broken if it excludes users.
|
|
147
|
-
|
|
148
|
-
- ✅ Interactive elements need `aria-label` if not visually labeled.
|
|
149
|
-
- ✅ Custom dropdowns/selects must support Arrow Keys and Escape.
|
|
150
|
-
- ✅ Color alone cannot convey state (Error text must have an icon too `❌ Password invalid`).
|
|
151
|
-
- ✅ Hide decorative SVG/icons from screen readers `aria-hidden="true"`.
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: Design thinking for web UI. Micro-interactions, visual hierarchy, typography scaling, HSL color palettes, spacing systems, and CSS-first UI logic. Avoid generic AI aesthetics.
|
|
4
|
+
allowed-tools: Read, Write, Edit, Glob, Grep
|
|
5
|
+
version: 3.1.0
|
|
6
|
+
last-updated: 2026-04-06
|
|
7
|
+
applies-to-model: gemini-3-1-pro, claude-3-7-sonnet
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Frontend Design — Dense Reference
|
|
11
|
+
|
|
12
|
+
## Hallucination Traps (Read First)
|
|
13
|
+
- ❌ Purple gradient backgrounds (`from-purple-500 to-blue-500`) → ✅ The worst AI UI cliché. Use high-contrast solid colors, grain, or sophisticated HSL mono-palettes.
|
|
14
|
+
- ❌ Hardcoded pixels (`font-size: 14px`) → ✅ Use `rem` for accessibility and scaling (`1rem = 16px`).
|
|
15
|
+
- ❌ Gray text (`#888`) on white → ✅ Fails WCAG contrast. Text must be `4.5:1` ratio.
|
|
16
|
+
- ❌ Generic sans-serif → ✅ Inter, Geist, Roboto Mono, or system-ui. Typography is 80% of design.
|
|
17
|
+
- ❌ "Bento Box" grids for everything → ✅ Overused pattern. Use directional flow or asymmetric layouts.
|
|
18
|
+
- ❌ Symmetrical layouts out of laziness → ✅ Tension and blank space (negative space) drive premium feel.
|
|
19
|
+
- ❌ Infinite scrolling without context → ✅ Provide clear footers or logical pagination markers.
|
|
20
|
+
- ❌ Over-animating everything (`all elements fade in`) → ✅ Animate state changes (hover, focus, submit), not static entry layout unless scrollytelling.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 1. Color Theory (HSL over HEX)
|
|
25
|
+
|
|
26
|
+
Never use raw flat HEX colors. Use HSL to build cohesive scales.
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
:root {
|
|
30
|
+
/* HSL allows programmatic adjustment of lightness/saturation */
|
|
31
|
+
--hue: 220;
|
|
32
|
+
--sat: 80%;
|
|
33
|
+
|
|
34
|
+
--bg-base: hsl(var(--hue), 15%, 98%);
|
|
35
|
+
--bg-surface: hsl(var(--hue), 20%, 100%);
|
|
36
|
+
|
|
37
|
+
--text-main: hsl(var(--hue), 40%, 10%);
|
|
38
|
+
--text-muted: hsl(var(--hue), 20%, 40%);
|
|
39
|
+
|
|
40
|
+
--primary: hsl(var(--hue), var(--sat), 50%);
|
|
41
|
+
--primary-hover: hsl(var(--hue), var(--sat), 40%); /* Darken via L */
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* OLED Dark Mode */
|
|
45
|
+
@media (prefers-color-scheme: dark) {
|
|
46
|
+
:root {
|
|
47
|
+
--bg-base: hsl(var(--hue), 10%, 2%);
|
|
48
|
+
--bg-surface: hsl(var(--hue), 10%, 6%);
|
|
49
|
+
--text-main: hsl(var(--hue), 20%, 95%);
|
|
50
|
+
--text-muted: hsl(var(--hue), 10%, 60%);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## 2. Spatial Systems & Grid Mathematics
|
|
56
|
+
|
|
57
|
+
Design relies on structural rhythm. Use an **8px base system**.
|
|
58
|
+
|
|
59
|
+
- **Micro padding**: `4px`, `8px` (Tags, List items)
|
|
60
|
+
- **Component padding**: `16px`, `24px` (Cards, Inputs, Modals)
|
|
61
|
+
- **Section spacing**: `48px`, `64px`, `96px` (Page sections)
|
|
62
|
+
- **Line height**: Body `1.5`, Headings `1.1` or `1.2`.
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
/* Fluid Typography (Clamp) */
|
|
66
|
+
h1 {
|
|
67
|
+
/* Min 2rem, fluidly scale between 480px-1200px, Max 4rem */
|
|
68
|
+
font-size: clamp(2rem, 5vw, 4rem);
|
|
69
|
+
letter-spacing: -0.02em; /* Tighten large text */
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
p {
|
|
73
|
+
font-size: 1rem;
|
|
74
|
+
max-width: 65ch; /* Optimal reading length */
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 3. Interaction & "Juice" (Micro-interactions)
|
|
81
|
+
|
|
82
|
+
A premium UI reacts to the user instantly and smoothly. Focus on state transitions.
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
/* Smooth generic transition */
|
|
86
|
+
.btn {
|
|
87
|
+
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Active Depth - The physical button push */
|
|
91
|
+
.btn:active {
|
|
92
|
+
transform: scale(0.97);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Hardware-Accelerated Shadows */
|
|
96
|
+
.card {
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.1), 0 2px 4px -1px rgba(0,0,0, 0.06);
|
|
98
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
99
|
+
}
|
|
100
|
+
.card:hover {
|
|
101
|
+
transform: translateY(-4px); /* Float effect */
|
|
102
|
+
box-shadow: 0 20px 25px -5px rgba(0,0,0, 0.1), 0 10px 10px -5px rgba(0,0,0, 0.04);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## 4. Modern Glassmorphism & Depth
|
|
109
|
+
|
|
110
|
+
Flat design is dead. Modern UI uses depth, layering, and blur.
|
|
111
|
+
|
|
112
|
+
```css
|
|
113
|
+
/* Frosted Glass */
|
|
114
|
+
.glass {
|
|
115
|
+
background: rgba(255, 255, 255, 0.7);
|
|
116
|
+
backdrop-filter: blur(16px);
|
|
117
|
+
-webkit-backdrop-filter: blur(16px);
|
|
118
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
119
|
+
border-radius: 16px;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## 5. Forms and High-Friction UI
|
|
126
|
+
|
|
127
|
+
Forms are where users drop off. They must be flawless.
|
|
128
|
+
|
|
129
|
+
- **Auto-focus** the first input on modal open.
|
|
130
|
+
- **Labels** must be visible outside the input (not just placeholders).
|
|
131
|
+
- **Validation** happens `onBlur` (when leaving), NOT `onChange` (typing).
|
|
132
|
+
- **Submit buttons** show loading spinners, disable inputs, and prevent double-clicks.
|
|
133
|
+
|
|
134
|
+
```css
|
|
135
|
+
/* Focus-visible: Only show ring for keyboard nav, not mouse clicks */
|
|
136
|
+
button:focus-visible {
|
|
137
|
+
outline: 2px solid var(--primary);
|
|
138
|
+
outline-offset: 2px;
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## 6. Accessibility (WCAG 2.2 AA)
|
|
145
|
+
|
|
146
|
+
Design is fundamentally broken if it excludes users.
|
|
147
|
+
|
|
148
|
+
- ✅ Interactive elements need `aria-label` if not visually labeled.
|
|
149
|
+
- ✅ Custom dropdowns/selects must support Arrow Keys and Escape.
|
|
150
|
+
- ✅ Color alone cannot convey state (Error text must have an icon too `❌ Password invalid`).
|
|
151
|
+
- ✅ Hide decorative SVG/icons from screen readers `aria-hidden="true"`.
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
---
|
|
@@ -190,4 +190,12 @@ Review these questions before confirming output:
|
|
|
190
190
|
|
|
191
191
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
192
192
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
193
|
-
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
193
|
+
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
## Pre-Flight Checklist
|
|
197
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
198
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
199
|
+
|
|
200
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
201
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -118,4 +118,12 @@ Review these questions before confirming output:
|
|
|
118
118
|
|
|
119
119
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
120
120
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
121
|
-
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
121
|
+
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
## Pre-Flight Checklist
|
|
125
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
126
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
127
|
+
|
|
128
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
129
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -135,4 +135,12 @@ Review these questions before confirming output:
|
|
|
135
135
|
|
|
136
136
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
137
137
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
138
|
-
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
138
|
+
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
## Pre-Flight Checklist
|
|
142
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
143
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
144
|
+
|
|
145
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
146
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -136,4 +136,12 @@ Review these questions before confirming output:
|
|
|
136
136
|
|
|
137
137
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
138
138
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
139
|
-
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
139
|
+
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
## Pre-Flight Checklist
|
|
143
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
144
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
145
|
+
|
|
146
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
147
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -318,4 +318,12 @@ Review these questions before confirming output:
|
|
|
318
318
|
|
|
319
319
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
320
320
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
321
|
-
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
321
|
+
- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
## Pre-Flight Checklist
|
|
325
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
326
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
327
|
+
|
|
328
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
329
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -252,49 +252,57 @@ Full docs: [gsap.matchMedia()](https://gsap.com/docs/v3/GSAP/gsap.matchMedia/).
|
|
|
252
252
|
- ❌ Rely on the default **immediateRender: true** when stacking multiple **from()** or **fromTo()** tweens on the same property of the same target; set **immediateRender: false** on the later tweens so they animate correctly.
|
|
253
253
|
- ❌ Use invalid or non-existent ease names; stick to documented eases.
|
|
254
254
|
- ❌ Forget that **gsap.from()** uses the element’s current state as the end state; the initial values in the tween will be applied immediately unless `immediateRender: false` is in the `vars`.
|
|
255
|
-
|
|
256
|
-
---
|
|
257
|
-
|
|
258
|
-
**Slash command: `/review` or `/tribunal-full`**
|
|
259
|
-
**Active reviewers: `logic-reviewer` · `security-auditor`**
|
|
260
|
-
|
|
261
|
-
### ❌ Forbidden AI Tropes
|
|
262
|
-
|
|
263
|
-
1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
|
|
264
|
-
2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
|
|
265
|
-
3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
266
|
-
|
|
267
|
-
---
|
|
268
|
-
|
|
269
|
-
## 🚨 LLM Trap Table
|
|
270
|
-
|
|
271
|
-
|Pattern|What AI Does Wrong|What Is Actually Correct|
|
|
272
|
-
|:---|:---|:---|
|
|
273
|
-
|gsap-core|Animate width, height, top, left|x, y, scale, rotation, opacity (GPU composited)|
|
|
274
|
-
|gsap-core|gsap.to(el, 1, {x: 100}) (GSAP 2)|gsap.to(el, {duration: 1, x: 100}) (GSAP 3)|
|
|
275
|
-
|gsap-core|Power2.easeOut (GSAP 2 format)|"power2.out" (GSAP 3 string format)|
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
## ✅ Pre-Flight Self-Audit
|
|
280
|
-
|
|
281
|
-
Before producing any output, verify:
|
|
282
|
-
```
|
|
283
|
-
✅ Did I read the actual files before making claims about them?
|
|
284
|
-
✅ Did I verify all method names against official GSAP documentation?
|
|
285
|
-
✅ Did I add // VERIFY: on any uncertain API calls?
|
|
286
|
-
✅ Are all imports from packages that actually exist in package.json?
|
|
287
|
-
✅ Did I test my logic with edge cases (null, empty, 0, max)?
|
|
288
|
-
✅ Did I avoid generating code for more than one module at a time?
|
|
289
|
-
✅ Am I working from evidence, not assumption?
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
---
|
|
293
|
-
|
|
294
|
-
## 🔁 VBC Protocol (Verify → Build → Confirm)
|
|
295
|
-
|
|
296
|
-
```
|
|
297
|
-
VERIFY: Read the actual codebase before writing anything
|
|
298
|
-
BUILD: Generate the smallest meaningful unit of code
|
|
299
|
-
CONFIRM: Verify the output is correct before presenting
|
|
300
|
-
```
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
**Slash command: `/review` or `/tribunal-full`**
|
|
259
|
+
**Active reviewers: `logic-reviewer` · `security-auditor`**
|
|
260
|
+
|
|
261
|
+
### ❌ Forbidden AI Tropes
|
|
262
|
+
|
|
263
|
+
1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
|
|
264
|
+
2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
|
|
265
|
+
3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
266
|
+
|
|
267
|
+
---
|
|
268
|
+
|
|
269
|
+
## 🚨 LLM Trap Table
|
|
270
|
+
|
|
271
|
+
|Pattern|What AI Does Wrong|What Is Actually Correct|
|
|
272
|
+
|:---|:---|:---|
|
|
273
|
+
|gsap-core|Animate width, height, top, left|x, y, scale, rotation, opacity (GPU composited)|
|
|
274
|
+
|gsap-core|gsap.to(el, 1, {x: 100}) (GSAP 2)|gsap.to(el, {duration: 1, x: 100}) (GSAP 3)|
|
|
275
|
+
|gsap-core|Power2.easeOut (GSAP 2 format)|"power2.out" (GSAP 3 string format)|
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## ✅ Pre-Flight Self-Audit
|
|
280
|
+
|
|
281
|
+
Before producing any output, verify:
|
|
282
|
+
```
|
|
283
|
+
✅ Did I read the actual files before making claims about them?
|
|
284
|
+
✅ Did I verify all method names against official GSAP documentation?
|
|
285
|
+
✅ Did I add // VERIFY: on any uncertain API calls?
|
|
286
|
+
✅ Are all imports from packages that actually exist in package.json?
|
|
287
|
+
✅ Did I test my logic with edge cases (null, empty, 0, max)?
|
|
288
|
+
✅ Did I avoid generating code for more than one module at a time?
|
|
289
|
+
✅ Am I working from evidence, not assumption?
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
---
|
|
293
|
+
|
|
294
|
+
## 🔁 VBC Protocol (Verify → Build → Confirm)
|
|
295
|
+
|
|
296
|
+
```
|
|
297
|
+
VERIFY: Read the actual codebase before writing anything
|
|
298
|
+
BUILD: Generate the smallest meaningful unit of code
|
|
299
|
+
CONFIRM: Verify the output is correct before presenting
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
## Pre-Flight Checklist
|
|
304
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
305
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
306
|
+
|
|
307
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
308
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
@@ -151,49 +151,57 @@ Do not create GSAP animations in the component’s setup or in a synchronous top
|
|
|
151
151
|
### Learn More
|
|
152
152
|
|
|
153
153
|
- **gsap-react** skill for React-specific patterns (useGSAP, contextSafe).
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
**Slash command: `/review` or `/tribunal-full`**
|
|
158
|
-
**Active reviewers: `logic-reviewer` · `security-auditor`**
|
|
159
|
-
|
|
160
|
-
### ❌ Forbidden AI Tropes
|
|
161
|
-
|
|
162
|
-
1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
|
|
163
|
-
2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
|
|
164
|
-
3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
165
|
-
|
|
166
|
-
---
|
|
167
|
-
|
|
168
|
-
## 🚨 LLM Trap Table
|
|
169
|
-
|
|
170
|
-
|Pattern|What AI Does Wrong|What Is Actually Correct|
|
|
171
|
-
|:---|:---|:---|
|
|
172
|
-
|gsap-frameworks|gsap.to() before onMounted/onMount|DOM must exist before GSAP grabs it. Wait for lifecycle hook|
|
|
173
|
-
|gsap-frameworks|Global selection string (".item")|Use scoped context: gsap.context(() => {}, containerRef)|
|
|
174
|
-
|gsap-frameworks|Forgetting to cleanup on unmount|ctx.revert() inside onUnmounted (Vue) or returned cleanup fn (Svelte)|
|
|
175
|
-
|
|
176
|
-
---
|
|
177
|
-
|
|
178
|
-
## ✅ Pre-Flight Self-Audit
|
|
179
|
-
|
|
180
|
-
Before producing any output, verify:
|
|
181
|
-
```
|
|
182
|
-
✅ Did I read the actual files before making claims about them?
|
|
183
|
-
✅ Did I verify all method names against official GSAP documentation?
|
|
184
|
-
✅ Did I add // VERIFY: on any uncertain API calls?
|
|
185
|
-
✅ Are all imports from packages that actually exist in package.json?
|
|
186
|
-
✅ Did I test my logic with edge cases (null, empty, 0, max)?
|
|
187
|
-
✅ Did I avoid generating code for more than one module at a time?
|
|
188
|
-
✅ Am I working from evidence, not assumption?
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
---
|
|
192
|
-
|
|
193
|
-
## 🔁 VBC Protocol (Verify → Build → Confirm)
|
|
194
|
-
|
|
195
|
-
```
|
|
196
|
-
VERIFY: Read the actual codebase before writing anything
|
|
197
|
-
BUILD: Generate the smallest meaningful unit of code
|
|
198
|
-
CONFIRM: Verify the output is correct before presenting
|
|
199
|
-
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
**Slash command: `/review` or `/tribunal-full`**
|
|
158
|
+
**Active reviewers: `logic-reviewer` · `security-auditor`**
|
|
159
|
+
|
|
160
|
+
### ❌ Forbidden AI Tropes
|
|
161
|
+
|
|
162
|
+
1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
|
|
163
|
+
2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
|
|
164
|
+
3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## 🚨 LLM Trap Table
|
|
169
|
+
|
|
170
|
+
|Pattern|What AI Does Wrong|What Is Actually Correct|
|
|
171
|
+
|:---|:---|:---|
|
|
172
|
+
|gsap-frameworks|gsap.to() before onMounted/onMount|DOM must exist before GSAP grabs it. Wait for lifecycle hook|
|
|
173
|
+
|gsap-frameworks|Global selection string (".item")|Use scoped context: gsap.context(() => {}, containerRef)|
|
|
174
|
+
|gsap-frameworks|Forgetting to cleanup on unmount|ctx.revert() inside onUnmounted (Vue) or returned cleanup fn (Svelte)|
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## ✅ Pre-Flight Self-Audit
|
|
179
|
+
|
|
180
|
+
Before producing any output, verify:
|
|
181
|
+
```
|
|
182
|
+
✅ Did I read the actual files before making claims about them?
|
|
183
|
+
✅ Did I verify all method names against official GSAP documentation?
|
|
184
|
+
✅ Did I add // VERIFY: on any uncertain API calls?
|
|
185
|
+
✅ Are all imports from packages that actually exist in package.json?
|
|
186
|
+
✅ Did I test my logic with edge cases (null, empty, 0, max)?
|
|
187
|
+
✅ Did I avoid generating code for more than one module at a time?
|
|
188
|
+
✅ Am I working from evidence, not assumption?
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## 🔁 VBC Protocol (Verify → Build → Confirm)
|
|
194
|
+
|
|
195
|
+
```
|
|
196
|
+
VERIFY: Read the actual codebase before writing anything
|
|
197
|
+
BUILD: Generate the smallest meaningful unit of code
|
|
198
|
+
CONFIRM: Verify the output is correct before presenting
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
## Pre-Flight Checklist
|
|
203
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
204
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
205
|
+
|
|
206
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
207
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|