tribunal-kit 4.5.1 → 4.6.1
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/.shared/ui-ux-pro-max/README.md +4 -4
- package/.agent/ARCHITECTURE.md +282 -277
- package/.agent/agents/accessibility-reviewer.md +187 -187
- package/.agent/agents/ai-code-reviewer.md +199 -199
- package/.agent/agents/api-architect.md +71 -66
- package/.agent/agents/backend-specialist.md +219 -215
- package/.agent/agents/cloud-engineer.md +98 -0
- package/.agent/agents/code-archaeologist.md +168 -161
- package/.agent/agents/database-architect.md +184 -184
- package/.agent/agents/db-latency-auditor.md +213 -216
- package/.agent/agents/debugger.md +198 -191
- package/.agent/agents/dependency-reviewer.md +106 -103
- package/.agent/agents/devops-engineer.md +218 -218
- package/.agent/agents/documentation-writer.md +209 -201
- package/.agent/agents/explorer-agent.md +167 -160
- package/.agent/agents/frontend-reviewer.md +162 -160
- package/.agent/agents/frontend-specialist.md +257 -248
- package/.agent/agents/game-developer.md +48 -48
- package/.agent/agents/logic-reviewer.md +118 -116
- package/.agent/agents/mobile-developer.md +197 -200
- package/.agent/agents/mobile-reviewer.md +159 -162
- package/.agent/agents/orchestrator.md +187 -181
- package/.agent/agents/penetration-tester.md +160 -157
- package/.agent/agents/performance-optimizer.md +183 -183
- package/.agent/agents/performance-reviewer.md +178 -178
- package/.agent/agents/precedence-reviewer.md +251 -250
- package/.agent/agents/product-manager.md +149 -142
- package/.agent/agents/product-owner.md +81 -80
- package/.agent/agents/project-planner.md +152 -142
- package/.agent/agents/qa-automation-engineer.md +216 -225
- package/.agent/agents/resilience-reviewer.md +88 -88
- package/.agent/agents/schema-reviewer.md +67 -67
- package/.agent/agents/security-auditor.md +180 -174
- package/.agent/agents/seo-specialist.md +188 -193
- package/.agent/agents/sql-reviewer.md +159 -161
- package/.agent/agents/supervisor-agent.md +173 -184
- package/.agent/agents/swarm-worker-contracts.md +170 -166
- package/.agent/agents/swarm-worker-registry.md +92 -92
- package/.agent/agents/system-architect.md +85 -0
- package/.agent/agents/test-coverage-reviewer.md +158 -160
- package/.agent/agents/test-engineer.md +118 -118
- package/.agent/agents/throughput-optimizer.md +291 -299
- package/.agent/agents/type-safety-reviewer.md +182 -175
- package/.agent/agents/ui-ux-auditor.md +300 -292
- package/.agent/agents/vitals-reviewer.md +223 -223
- package/.agent/mcp_config.json +37 -40
- package/.agent/patterns/generator.md +11 -9
- package/.agent/patterns/inversion.md +14 -12
- package/.agent/patterns/pipeline.md +11 -9
- package/.agent/patterns/reviewer.md +15 -13
- package/.agent/patterns/tool-wrapper.md +11 -9
- package/.agent/routing_index.json +714 -0
- package/.agent/rules/GEMINI.md +359 -352
- package/.agent/scripts/compile_router.py +112 -0
- package/.agent/scripts/migrate_skills_frontmatter.py +64 -0
- package/.agent/scripts/strengthen_skills.js +1 -1
- package/.agent/skills/advanced-rag-pipelines/SKILL.md +56 -0
- package/.agent/skills/agent-organizer/SKILL.md +156 -150
- package/.agent/skills/agentic-patterns/SKILL.md +313 -315
- package/.agent/skills/ai-prompt-injection-defense/SKILL.md +190 -184
- package/.agent/skills/api-patterns/SKILL.md +253 -247
- package/.agent/skills/api-security-auditor/SKILL.md +195 -193
- package/.agent/skills/app-builder/SKILL.md +573 -572
- package/.agent/skills/app-builder/templates/SKILL.md +108 -115
- package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -76
- package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -92
- package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -88
- package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -88
- package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -83
- package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -90
- package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -90
- package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +126 -122
- package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +127 -122
- package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +172 -169
- package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +139 -134
- package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -83
- package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +122 -119
- package/.agent/skills/appflow-wireframe/SKILL.md +146 -145
- package/.agent/skills/architecture/SKILL.md +226 -219
- package/.agent/skills/authentication-best-practices/SKILL.md +197 -189
- package/.agent/skills/backend-security-expert/SKILL.md +16 -2
- package/.agent/skills/bash-linux/SKILL.md +179 -179
- package/.agent/skills/behavioral-modes/SKILL.md +239 -223
- package/.agent/skills/brainstorming/SKILL.md +498 -486
- package/.agent/skills/browser-native-ai/SKILL.md +57 -4
- package/.agent/skills/building-native-ui/SKILL.md +202 -202
- package/.agent/skills/cicd-pro/SKILL.md +442 -0
- package/.agent/skills/clean-code/SKILL.md +400 -381
- package/.agent/skills/cloud-architect/SKILL.md +439 -0
- package/.agent/skills/code-review-checklist/SKILL.md +203 -194
- package/.agent/skills/config-validator/SKILL.md +165 -165
- package/.agent/skills/containerization-pro/SKILL.md +452 -0
- package/.agent/skills/csharp-developer/SKILL.md +518 -518
- package/.agent/skills/data-validation-schemas/SKILL.md +333 -328
- package/.agent/skills/database-design/SKILL.md +247 -240
- package/.agent/skills/deployment-procedures/SKILL.md +172 -169
- package/.agent/skills/devops-engineer/SKILL.md +345 -345
- package/.agent/skills/devops-incident-responder/SKILL.md +143 -137
- package/.agent/skills/documentation-templates/SKILL.md +291 -279
- package/.agent/skills/edge-computing/SKILL.md +183 -181
- package/.agent/skills/emil-design-eng/SKILL.md +147 -0
- package/.agent/skills/error-resilience/SKILL.md +411 -428
- package/.agent/skills/extract-design-system/SKILL.md +160 -158
- package/.agent/skills/framer-motion-expert/SKILL.md +253 -244
- package/.agent/skills/frontend-design/SKILL.md +208 -201
- package/.agent/skills/frontend-security-expert/SKILL.md +16 -3
- package/.agent/skills/game-design-expert/SKILL.md +132 -129
- package/.agent/skills/game-engineering-expert/SKILL.md +148 -146
- package/.agent/skills/generative-ui-expert/SKILL.md +57 -1
- package/.agent/skills/geo-fundamentals/SKILL.md +148 -147
- package/.agent/skills/git-pro/SKILL.md +435 -0
- package/.agent/skills/github-operations/SKILL.md +335 -329
- package/.agent/skills/gsap-core/SKILL.md +319 -308
- package/.agent/skills/gsap-frameworks/SKILL.md +213 -207
- package/.agent/skills/gsap-performance/SKILL.md +139 -133
- package/.agent/skills/gsap-plugins/SKILL.md +486 -480
- package/.agent/skills/gsap-react/SKILL.md +202 -189
- package/.agent/skills/gsap-scrolltrigger/SKILL.md +357 -350
- package/.agent/skills/gsap-timeline/SKILL.md +165 -161
- package/.agent/skills/gsap-utils/SKILL.md +344 -338
- package/.agent/skills/harness-protocol/SKILL.md +48 -0
- package/.agent/skills/i18n-localization/SKILL.md +174 -163
- package/.agent/skills/intelligent-routing/SKILL.md +202 -246
- package/.agent/skills/knowledge-graph/SKILL.md +60 -52
- package/.agent/skills/lint-and-validate/SKILL.md +261 -261
- package/.agent/skills/llm-engineering/SKILL.md +400 -394
- package/.agent/skills/local-first/SKILL.md +178 -178
- package/.agent/skills/mcp-builder/SKILL.md +143 -142
- package/.agent/skills/mobile-design/SKILL.md +272 -263
- package/.agent/skills/monorepo-management/SKILL.md +335 -334
- package/.agent/skills/motion-engineering/SKILL.md +266 -234
- package/.agent/skills/nextjs-react-expert/SKILL.md +236 -234
- package/.agent/skills/nodejs-best-practices/SKILL.md +547 -548
- package/.agent/skills/observability/SKILL.md +343 -343
- package/.agent/skills/parallel-agents/SKILL.md +143 -146
- package/.agent/skills/performance-profiling/SKILL.md +259 -267
- package/.agent/skills/plan-writing/SKILL.md +150 -142
- package/.agent/skills/platform-engineer/SKILL.md +148 -147
- package/.agent/skills/playwright-best-practices/SKILL.md +188 -187
- package/.agent/skills/powershell-windows/SKILL.md +162 -162
- package/.agent/skills/project-idioms/SKILL.md +137 -137
- package/.agent/skills/python-patterns/SKILL.md +260 -259
- package/.agent/skills/python-pro/SKILL.md +324 -323
- package/.agent/skills/react-specialist/SKILL.md +305 -277
- package/.agent/skills/readme-builder/SKILL.md +310 -300
- package/.agent/skills/realtime-patterns/SKILL.md +323 -319
- package/.agent/skills/red-team-tactics/SKILL.md +231 -218
- package/.agent/skills/review-animations/SKILL.md +72 -0
- package/.agent/skills/review-animations/STANDARDS.md +73 -0
- package/.agent/skills/rust-pro/SKILL.md +671 -673
- package/.agent/skills/seo-fundamentals/SKILL.md +179 -179
- package/.agent/skills/server-management/SKILL.md +218 -214
- package/.agent/skills/shadcn-ui-expert/SKILL.md +231 -231
- package/.agent/skills/skill-creator/SKILL.md +87 -86
- package/.agent/skills/sql-pro/SKILL.md +629 -629
- package/.agent/skills/supabase-postgres-best-practices/SKILL.md +97 -97
- package/.agent/skills/swiftui-expert/SKILL.md +204 -201
- package/.agent/skills/system-design-pro/SKILL.md +345 -0
- package/.agent/skills/systematic-debugging/SKILL.md +153 -142
- package/.agent/skills/tailwind-patterns/SKILL.md +610 -566
- package/.agent/skills/tdd-workflow/SKILL.md +169 -161
- package/.agent/skills/test-result-analyzer/SKILL.md +313 -309
- package/.agent/skills/testing-patterns/SKILL.md +566 -579
- package/.agent/skills/trend-researcher/SKILL.md +243 -237
- package/.agent/skills/typescript-advanced/SKILL.md +336 -335
- package/.agent/skills/ui-ux-pro-max/SKILL.md +590 -562
- package/.agent/skills/ui-ux-researcher/SKILL.md +244 -244
- package/.agent/skills/vue-expert/SKILL.md +294 -275
- package/.agent/skills/vulnerability-scanner/SKILL.md +416 -404
- package/.agent/skills/web-accessibility-auditor/SKILL.md +219 -218
- package/.agent/skills/web-design-guidelines/SKILL.md +192 -186
- package/.agent/skills/webapp-testing/SKILL.md +167 -169
- package/.agent/skills/webgpu-performance/SKILL.md +56 -2
- package/.agent/skills/whimsy-injector/SKILL.md +346 -325
- package/.agent/skills/workflow-optimizer/SKILL.md +231 -229
- package/.agent/workflows/acf.md +141 -0
- package/.agent/workflows/api-tester.md +176 -151
- package/.agent/workflows/audit.md +150 -127
- package/.agent/workflows/brainstorm.md +134 -110
- package/.agent/workflows/changelog.md +140 -112
- package/.agent/workflows/create.md +168 -124
- package/.agent/workflows/debug.md +190 -165
- package/.agent/workflows/deploy.md +201 -180
- package/.agent/workflows/enhance.md +154 -128
- package/.agent/workflows/fix.md +136 -114
- package/.agent/workflows/generate.md +198 -183
- package/.agent/workflows/marathon.md +37 -11
- package/.agent/workflows/migrate.md +184 -160
- package/.agent/workflows/orchestrate.md +192 -168
- package/.agent/workflows/performance-benchmarker.md +135 -114
- package/.agent/workflows/plan.md +196 -173
- package/.agent/workflows/preview.md +103 -80
- package/.agent/workflows/refactor.md +192 -161
- package/.agent/workflows/review-ai.md +125 -101
- package/.agent/workflows/review.md +141 -116
- package/.agent/workflows/session.md +122 -94
- package/.agent/workflows/status.md +101 -79
- package/.agent/workflows/strengthen-skills.md +164 -138
- package/.agent/workflows/super-prompt.md +24 -0
- package/.agent/workflows/swarm.md +193 -179
- package/.agent/workflows/test.md +211 -189
- package/.agent/workflows/tribunal-backend.md +136 -105
- package/.agent/workflows/tribunal-database.md +129 -95
- package/.agent/workflows/tribunal-frontend.md +140 -96
- package/.agent/workflows/tribunal-full.md +131 -100
- package/.agent/workflows/tribunal-mobile.md +129 -95
- package/.agent/workflows/tribunal-performance.md +136 -110
- package/.agent/workflows/tribunal-speed.md +209 -183
- package/.agent/workflows/ui-ux-pro-max.md +155 -122
- package/README.md +107 -55
- package/mcp_config.json +1 -3
- package/package.json +94 -94
- package/.agent/GEMINI.md +0 -121
- package/.agent/skills/doc.md +0 -177
|
@@ -1,329 +1,348 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: whimsy-injector
|
|
3
|
-
description: Micro-delight generator for frontend interfaces. Suggests and implements subtle animations, playful transitions, and interaction polish across any frontend stack.
|
|
4
|
-
skills:
|
|
5
|
-
- frontend-design
|
|
6
|
-
- trend-researcher
|
|
7
|
-
- ui-ux-researcher
|
|
8
|
-
version: 1.0.0
|
|
9
|
-
last-updated: 2026-03-12
|
|
10
|
-
applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
- When
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
.card
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
animation:
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
###
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
|
232
|
-
|
|
|
233
|
-
|
|
|
234
|
-
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
###
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
**
|
|
295
|
-
**
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
Review these questions before confirming output:
|
|
306
|
-
```
|
|
307
|
-
✅ Did I rely ONLY on real, verified tools and methods?
|
|
308
|
-
✅ Is this solution appropriately scoped to the user's constraints?
|
|
309
|
-
✅ Did I handle potential failure modes and edge cases?
|
|
310
|
-
✅ Have I avoided generic boilerplate that doesn't add value?
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
### 🛑 Verification-Before-Completion (VBC) Protocol
|
|
314
|
-
|
|
315
|
-
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
316
|
-
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
317
|
-
- ✅ **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.
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
## Pre-Flight Checklist
|
|
321
|
-
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
322
|
-
- [ ] Have I checked the environment for relevant existing implementations?
|
|
323
|
-
|
|
324
|
-
## VBC Protocol (Verification-Before-Completion)
|
|
325
|
-
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
1
|
+
---
|
|
2
|
+
name: whimsy-injector
|
|
3
|
+
description: Micro-delight generator for frontend interfaces. Suggests and implements subtle animations, playful transitions, and interaction polish across any frontend stack.
|
|
4
|
+
skills:
|
|
5
|
+
- frontend-design
|
|
6
|
+
- trend-researcher
|
|
7
|
+
- ui-ux-researcher
|
|
8
|
+
version: 1.0.0
|
|
9
|
+
last-updated: 2026-03-12
|
|
10
|
+
applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
|
|
11
|
+
routing:
|
|
12
|
+
domain: general
|
|
13
|
+
tier: basic
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
# Whimsy Injector Skill
|
|
17
|
+
|
|
18
|
+
You are a specialized agent for injecting "micro-delights" into user interfaces — small, tasteful animations and interaction polish that make an app feel alive and premium. You work across all frontend stacks: vanilla CSS, React, Vue, Svelte, Angular, and static HTML.
|
|
19
|
+
|
|
20
|
+
## When to Activate
|
|
21
|
+
|
|
22
|
+
- During `/enhance` or `/ui-ux-pro-max` workflows as a polish pass.
|
|
23
|
+
- When user asks to "add animations", "make it feel alive", "add polish", "add delight", or "make it premium".
|
|
24
|
+
- During the `VERIFICATION` phase of any frontend build, for a final quality pass.
|
|
25
|
+
- When `ui-ux-researcher` flags P2.5 (missing micro-interactions).
|
|
26
|
+
- When `trend-researcher` provides a motion intent that needs implementation.
|
|
27
|
+
|
|
28
|
+
## Whimsy Philosophy
|
|
29
|
+
|
|
30
|
+
**Whimsy is not decoration.** Every animation must serve a purpose:
|
|
31
|
+
|
|
32
|
+
- Guide attention → where should the user look?
|
|
33
|
+
- Confirm action → did the thing work?
|
|
34
|
+
- Create continuity → where did I come from, where am I going?
|
|
35
|
+
- Build personality → does this app feel human?
|
|
36
|
+
|
|
37
|
+
**If an animation doesn't serve one of these purposes, don't add it.**
|
|
38
|
+
|
|
39
|
+
## Animation Pattern Library
|
|
40
|
+
|
|
41
|
+
### Category 1: Entrance Animations
|
|
42
|
+
|
|
43
|
+
| Pattern | Purpose | Duration | Trigger |
|
|
44
|
+
| --------------- | ------------------------------- | ------------------ | ------------------------- |
|
|
45
|
+
| Fade-up | Content appearing naturally | 300-400ms | On mount / viewport entry |
|
|
46
|
+
| Scale-in | Modal or card emphasis | 200-300ms | On open / on mount |
|
|
47
|
+
| Stagger cascade | List items loading sequentially | 50ms delay × index | On mount / data load |
|
|
48
|
+
| Slide-in | Side panels, drawers | 250-350ms | On toggle |
|
|
49
|
+
| Blur-to-sharp | Hero images, lazy content | 400-600ms | On image load |
|
|
50
|
+
|
|
51
|
+
**Framework Implementations:**
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
/* Vanilla CSS — Fade-up on scroll */
|
|
55
|
+
.reveal {
|
|
56
|
+
opacity: 0;
|
|
57
|
+
transform: translateY(20px);
|
|
58
|
+
transition:
|
|
59
|
+
opacity 0.4s ease-out,
|
|
60
|
+
transform 0.4s ease-out;
|
|
61
|
+
}
|
|
62
|
+
.reveal.visible {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
transform: translateY(0);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```javascript
|
|
69
|
+
// Vanilla JS — IntersectionObserver trigger
|
|
70
|
+
const observer = new IntersectionObserver(
|
|
71
|
+
(entries) => {
|
|
72
|
+
entries.forEach((entry) => {
|
|
73
|
+
if (entry.isIntersecting) {
|
|
74
|
+
entry.target.classList.add("visible");
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
},
|
|
78
|
+
{ threshold: 0.1 },
|
|
79
|
+
);
|
|
80
|
+
document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
```jsx
|
|
84
|
+
// React — Framer Motion stagger (only if framer-motion is in package.json)
|
|
85
|
+
<motion.ul variants={{ show: { transition: { staggerChildren: 0.05 } } }}>
|
|
86
|
+
{items.map((item, i) => (
|
|
87
|
+
<motion.li key={item.id} variants={{ hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }} />
|
|
88
|
+
))}
|
|
89
|
+
</motion.ul>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
```vue
|
|
93
|
+
<!-- Vue 3 — TransitionGroup stagger -->
|
|
94
|
+
<TransitionGroup name="list" tag="ul" appear>
|
|
95
|
+
<li v-for="(item, i) in items" :key="item.id"
|
|
96
|
+
:style="{ transitionDelay: `${i * 50}ms` }">
|
|
97
|
+
{{ item.name }}
|
|
98
|
+
</li>
|
|
99
|
+
</TransitionGroup>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Category 2: Hover & Interaction States
|
|
103
|
+
|
|
104
|
+
| Pattern | CSS Implementation | Purpose |
|
|
105
|
+
| ------------------- | ---------------------------------------------------------------------- | ----------------------- |
|
|
106
|
+
| Card lift | `transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Clickable affordance |
|
|
107
|
+
| Button press | `transform: scale(0.97)` on `:active` | Tactile feedback |
|
|
108
|
+
| Link underline draw | `background-size: 100% 2px` from `0% 2px` | Navigation affordance |
|
|
109
|
+
| Icon rotate | `transform: rotate(90deg)` on expand | State change indicator |
|
|
110
|
+
| Color shift | `background-color` transition on hover | Interactive affordance |
|
|
111
|
+
| Border glow | `box-shadow: 0 0 0 3px rgba(primary, 0.2)` on focus | Accessibility + delight |
|
|
112
|
+
|
|
113
|
+
```css
|
|
114
|
+
/* Card Lift — Universal */
|
|
115
|
+
.card {
|
|
116
|
+
transition:
|
|
117
|
+
transform 0.2s ease-out,
|
|
118
|
+
box-shadow 0.2s ease-out;
|
|
119
|
+
}
|
|
120
|
+
.card:hover {
|
|
121
|
+
transform: translateY(-2px);
|
|
122
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
123
|
+
}
|
|
124
|
+
.card:active {
|
|
125
|
+
transform: translateY(0);
|
|
126
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
```css
|
|
131
|
+
/* Underline Draw — Link Hover */
|
|
132
|
+
.link {
|
|
133
|
+
background-image: linear-gradient(currentColor, currentColor);
|
|
134
|
+
background-position: 0% 100%;
|
|
135
|
+
background-repeat: no-repeat;
|
|
136
|
+
background-size: 0% 2px;
|
|
137
|
+
transition: background-size 0.3s ease-out;
|
|
138
|
+
text-decoration: none;
|
|
139
|
+
}
|
|
140
|
+
.link:hover {
|
|
141
|
+
background-size: 100% 2px;
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Category 3: Loading & Skeleton States
|
|
146
|
+
|
|
147
|
+
| Pattern | When | Duration |
|
|
148
|
+
| ------------------ | ---------------------------- | ------------------------- |
|
|
149
|
+
| Shimmer pulse | Data fetching, image loading | Continuous until loaded |
|
|
150
|
+
| Spinner-to-content | Short waits (< 2s) | Until complete |
|
|
151
|
+
| Progress bar | File uploads, long processes | Mapped to actual progress |
|
|
152
|
+
| Skeleton screen | Initial page paint | Until first data render |
|
|
153
|
+
|
|
154
|
+
```css
|
|
155
|
+
/* Shimmer Skeleton */
|
|
156
|
+
.skeleton {
|
|
157
|
+
background: linear-gradient(90deg, hsl(0, 0%, 90%) 25%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 90%) 75%);
|
|
158
|
+
background-size: 200% 100%;
|
|
159
|
+
animation: shimmer 1.5s infinite;
|
|
160
|
+
border-radius: 4px;
|
|
161
|
+
}
|
|
162
|
+
@keyframes shimmer {
|
|
163
|
+
0% {
|
|
164
|
+
background-position: 200% 0;
|
|
165
|
+
}
|
|
166
|
+
100% {
|
|
167
|
+
background-position: -200% 0;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Category 4: Micro-Feedback
|
|
173
|
+
|
|
174
|
+
| Pattern | Trigger | Duration |
|
|
175
|
+
| ---------------------- | ---------------------------------- | ---------------------- |
|
|
176
|
+
| Success checkmark draw | Form submit success | 300ms |
|
|
177
|
+
| Error shake | Validation failure | 300ms (3 oscillations) |
|
|
178
|
+
| Counter tick-up | Stat change | 600ms (ease-out) |
|
|
179
|
+
| Toast slide-in | Notification | 250ms in, 200ms out |
|
|
180
|
+
| Confetti burst | Achievement, first-time completion | 1.5s |
|
|
181
|
+
|
|
182
|
+
```css
|
|
183
|
+
/* Error Shake */
|
|
184
|
+
@keyframes shake {
|
|
185
|
+
0%,
|
|
186
|
+
100% {
|
|
187
|
+
transform: translateX(0);
|
|
188
|
+
}
|
|
189
|
+
20%,
|
|
190
|
+
60% {
|
|
191
|
+
transform: translateX(-4px);
|
|
192
|
+
}
|
|
193
|
+
40%,
|
|
194
|
+
80% {
|
|
195
|
+
transform: translateX(4px);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
.shake {
|
|
199
|
+
animation: shake 0.3s ease-in-out;
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Category 5: Page Transitions
|
|
204
|
+
|
|
205
|
+
| Pattern | When | CSS Approach |
|
|
206
|
+
| ------------- | ---------------------------- | -------------------------------------------------------- |
|
|
207
|
+
| Crossfade | Default page change | `view-transition-name` (View Transitions API) |
|
|
208
|
+
| Slide lateral | Tab switching, step wizard | `transform: translateX(±100%)` |
|
|
209
|
+
| Scale + fade | Modal open/close | `scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1` |
|
|
210
|
+
| Morph | Shared element between pages | `view-transition-name` on shared elements |
|
|
211
|
+
|
|
212
|
+
```css
|
|
213
|
+
/* View Transitions API (Chrome 111+) */
|
|
214
|
+
/* VERIFY: View Transitions API — check browser support for your target */
|
|
215
|
+
::view-transition-old(root) {
|
|
216
|
+
animation: fade-out 0.2s ease-out;
|
|
217
|
+
}
|
|
218
|
+
::view-transition-new(root) {
|
|
219
|
+
animation: fade-in 0.3s ease-in;
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Whimsy Quota Rules
|
|
224
|
+
|
|
225
|
+
> [!IMPORTANT]
|
|
226
|
+
> Whimsy must be **tasteful, not invasive**. These are hard limits:
|
|
227
|
+
|
|
228
|
+
### Hard Constraints
|
|
229
|
+
|
|
230
|
+
| Rule | Limit | Reason |
|
|
231
|
+
| ---------------------------- | ------------- | -------------------------- |
|
|
232
|
+
| Max animation types per page | 3 distinct | Visual coherence |
|
|
233
|
+
| Max concurrent animations | 5 elements | Performance |
|
|
234
|
+
| `prefers-reduced-motion` | **MANDATORY** | Accessibility (WCAG 2.3.3) |
|
|
235
|
+
| CLS impact | **Zero** | Core Web Vitals |
|
|
236
|
+
|
|
237
|
+
### Duration Constraints
|
|
238
|
+
|
|
239
|
+
| Animation Type | Min | Max | Sweet Spot |
|
|
240
|
+
| ------------------- | ------ | ------ | ---------- |
|
|
241
|
+
| Entrance | 200ms | 500ms | 300ms |
|
|
242
|
+
| Hover / Interaction | 100ms | 250ms | 150ms |
|
|
243
|
+
| Feedback | 100ms | 400ms | 200ms |
|
|
244
|
+
| Page transition | 150ms | 400ms | 250ms |
|
|
245
|
+
| Loading (loop) | 1000ms | 2000ms | 1500ms |
|
|
246
|
+
|
|
247
|
+
### Easing Reference
|
|
248
|
+
|
|
249
|
+
| Easing | CSS Value | Use For |
|
|
250
|
+
| ----------- | ----------------------------------- | ---------------------------- |
|
|
251
|
+
| Standard | `cubic-bezier(0.4, 0, 0.2, 1)` | Most UI motion |
|
|
252
|
+
| Decelerate | `cubic-bezier(0, 0, 0.2, 1)` | Entrances (coming into view) |
|
|
253
|
+
| Accelerate | `cubic-bezier(0.4, 0, 1, 1)` | Exits (leaving view) |
|
|
254
|
+
| Spring-like | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful UI, toggles |
|
|
255
|
+
| **Never** | `linear` | ❌ Not for UI motion |
|
|
256
|
+
|
|
257
|
+
### Mandatory Accessibility Block
|
|
258
|
+
|
|
259
|
+
Every file with animations MUST include:
|
|
260
|
+
|
|
261
|
+
```css
|
|
262
|
+
@media (prefers-reduced-motion: reduce) {
|
|
263
|
+
*,
|
|
264
|
+
*::before,
|
|
265
|
+
*::after {
|
|
266
|
+
animation-duration: 0.01ms !important;
|
|
267
|
+
animation-iteration-count: 1 !important;
|
|
268
|
+
transition-duration: 0.01ms !important;
|
|
269
|
+
scroll-behavior: auto !important;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Performance Rules
|
|
275
|
+
|
|
276
|
+
- **Only animate `transform` and `opacity`** — these are GPU-composited and won't trigger layout/paint.
|
|
277
|
+
- **Never animate** `width`, `height`, `top`, `left`, `margin`, or `padding` — these trigger layout recalculation.
|
|
278
|
+
- **Use `will-change` sparingly** — only on elements that are actively animating.
|
|
279
|
+
- **Remove observers** when components unmount.
|
|
280
|
+
|
|
281
|
+
## Cross-Skill Integration
|
|
282
|
+
|
|
283
|
+
| Paired Skill | Integration Point |
|
|
284
|
+
| ----------------------- | ---------------------------------------------------------- |
|
|
285
|
+
| `trend-researcher` | Receives motion intent → implements specific animations |
|
|
286
|
+
| `ui-ux-researcher` | Addresses P2.5 audit findings (missing micro-interactions) |
|
|
287
|
+
| `frontend-design` | Ensures animations match component design tokens |
|
|
288
|
+
| `performance-profiling` | Monitors that injections don't degrade Web Vitals |
|
|
289
|
+
| `web-design-guidelines` | Validates animations against established UI patterns |
|
|
290
|
+
|
|
291
|
+
## Anti-Hallucination Guard
|
|
292
|
+
|
|
293
|
+
- **Check `package.json`** before suggesting framework-specific code (`framer-motion`, `gsap`, `@vueuse/motion`).
|
|
294
|
+
- **Only use documented CSS properties** — never invent animation APIs.
|
|
295
|
+
- **Mark experimental APIs** with `// VERIFY: [API] — check browser support for your target`.
|
|
296
|
+
- **Never suggest animations that cause layout shift** — enforce `transform` and `opacity` only.
|
|
297
|
+
- **Verify `will-change` usage** — only apply to actively animating elements, remove after animation completes.
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
---
|
|
302
|
+
|
|
303
|
+
AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
|
|
326
304
|
|
|
305
|
+
1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
|
|
306
|
+
2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
|
|
307
|
+
3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
|
|
308
|
+
4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
309
|
+
5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
|
|
310
|
+
|
|
311
|
+
---
|
|
312
|
+
|
|
313
|
+
**Slash command: `/review` or `/tribunal-full`**
|
|
314
|
+
**Active reviewers: `logic-reviewer` · `security-auditor`**
|
|
315
|
+
|
|
316
|
+
### ❌ Forbidden AI Tropes
|
|
317
|
+
|
|
318
|
+
1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
|
|
319
|
+
2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
|
|
320
|
+
3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
|
|
321
|
+
|
|
322
|
+
Review these questions before confirming output:
|
|
323
|
+
|
|
324
|
+
```
|
|
325
|
+
✅ Did I rely ONLY on real, verified tools and methods?
|
|
326
|
+
✅ Is this solution appropriately scoped to the user's constraints?
|
|
327
|
+
✅ Did I handle potential failure modes and edge cases?
|
|
328
|
+
✅ Have I avoided generic boilerplate that doesn't add value?
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
### 🛑 Verification-Before-Completion (VBC) Protocol
|
|
332
|
+
|
|
333
|
+
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
334
|
+
|
|
335
|
+
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
336
|
+
- ✅ **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.
|
|
337
|
+
|
|
338
|
+
## Pre-Flight Checklist
|
|
339
|
+
|
|
340
|
+
- [ ] Have I reviewed the user's specific constraints and requests?
|
|
341
|
+
- [ ] Have I checked the environment for relevant existing implementations?
|
|
342
|
+
|
|
343
|
+
## VBC Protocol (Verification-Before-Completion)
|
|
344
|
+
|
|
345
|
+
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
|
|
327
346
|
|
|
328
347
|
---
|
|
329
348
|
|
|
@@ -353,6 +372,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
|
|
|
353
372
|
### ✅ Pre-Flight Self-Audit
|
|
354
373
|
|
|
355
374
|
Review these questions before confirming output:
|
|
375
|
+
|
|
356
376
|
```
|
|
357
377
|
✅ Did I rely ONLY on real, verified tools and methods?
|
|
358
378
|
✅ Is this solution appropriately scoped to the user's constraints?
|
|
@@ -363,5 +383,6 @@ Review these questions before confirming output:
|
|
|
363
383
|
### 🛑 Verification-Before-Completion (VBC) Protocol
|
|
364
384
|
|
|
365
385
|
**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
|
|
386
|
+
|
|
366
387
|
- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
|
|
367
388
|
- ✅ **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.
|