tribunal-kit 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (233) hide show
  1. package/.agent/ARCHITECTURE.md +99 -99
  2. package/.agent/GEMINI.md +52 -52
  3. package/.agent/agents/accessibility-reviewer.md +187 -220
  4. package/.agent/agents/ai-code-reviewer.md +199 -233
  5. package/.agent/agents/backend-specialist.md +215 -238
  6. package/.agent/agents/code-archaeologist.md +161 -181
  7. package/.agent/agents/database-architect.md +184 -207
  8. package/.agent/agents/debugger.md +191 -218
  9. package/.agent/agents/dependency-reviewer.md +103 -136
  10. package/.agent/agents/devops-engineer.md +218 -238
  11. package/.agent/agents/documentation-writer.md +201 -221
  12. package/.agent/agents/explorer-agent.md +160 -180
  13. package/.agent/agents/frontend-reviewer.md +160 -194
  14. package/.agent/agents/frontend-specialist.md +248 -237
  15. package/.agent/agents/game-developer.md +48 -52
  16. package/.agent/agents/logic-reviewer.md +116 -149
  17. package/.agent/agents/mobile-developer.md +200 -223
  18. package/.agent/agents/mobile-reviewer.md +162 -195
  19. package/.agent/agents/orchestrator.md +181 -211
  20. package/.agent/agents/penetration-tester.md +157 -174
  21. package/.agent/agents/performance-optimizer.md +183 -203
  22. package/.agent/agents/performance-reviewer.md +178 -211
  23. package/.agent/agents/precedence-reviewer.md +213 -0
  24. package/.agent/agents/product-manager.md +142 -162
  25. package/.agent/agents/product-owner.md +6 -25
  26. package/.agent/agents/project-planner.md +142 -162
  27. package/.agent/agents/qa-automation-engineer.md +225 -242
  28. package/.agent/agents/security-auditor.md +174 -194
  29. package/.agent/agents/seo-specialist.md +193 -213
  30. package/.agent/agents/sql-reviewer.md +161 -194
  31. package/.agent/agents/supervisor-agent.md +184 -203
  32. package/.agent/agents/swarm-worker-contracts.md +17 -17
  33. package/.agent/agents/swarm-worker-registry.md +46 -46
  34. package/.agent/agents/test-coverage-reviewer.md +160 -193
  35. package/.agent/agents/test-engineer.md +0 -21
  36. package/.agent/agents/type-safety-reviewer.md +175 -208
  37. package/.agent/patterns/generator.md +9 -9
  38. package/.agent/patterns/inversion.md +12 -12
  39. package/.agent/patterns/pipeline.md +9 -9
  40. package/.agent/patterns/reviewer.md +13 -13
  41. package/.agent/patterns/tool-wrapper.md +9 -9
  42. package/.agent/rules/GEMINI.md +63 -63
  43. package/.agent/scripts/append_flow.js +72 -0
  44. package/.agent/scripts/case_law_manager.py +525 -0
  45. package/.agent/scripts/compress_skills.py +167 -0
  46. package/.agent/scripts/consolidate_skills.py +173 -0
  47. package/.agent/scripts/deep_compress.py +202 -0
  48. package/.agent/scripts/minify_context.py +80 -0
  49. package/.agent/scripts/security_scan.py +1 -1
  50. package/.agent/scripts/skill_evolution.py +563 -0
  51. package/.agent/scripts/strip_tribunal.py +41 -0
  52. package/.agent/skills/agent-organizer/SKILL.md +100 -126
  53. package/.agent/skills/agentic-patterns/SKILL.md +0 -70
  54. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +134 -160
  55. package/.agent/skills/api-patterns/SKILL.md +123 -215
  56. package/.agent/skills/api-security-auditor/SKILL.md +143 -177
  57. package/.agent/skills/app-builder/SKILL.md +334 -50
  58. package/.agent/skills/app-builder/templates/SKILL.md +13 -15
  59. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +16 -16
  60. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +22 -22
  61. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +18 -18
  62. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +20 -20
  63. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +17 -17
  64. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +18 -18
  65. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +21 -21
  66. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +19 -19
  67. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +26 -26
  68. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +26 -26
  69. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +19 -19
  70. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +18 -18
  71. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +20 -20
  72. package/.agent/skills/appflow-wireframe/SKILL.md +95 -121
  73. package/.agent/skills/architecture/SKILL.md +169 -331
  74. package/.agent/skills/authentication-best-practices/SKILL.md +139 -173
  75. package/.agent/skills/bash-linux/SKILL.md +129 -154
  76. package/.agent/skills/behavioral-modes/SKILL.md +8 -69
  77. package/.agent/skills/brainstorming/SKILL.md +436 -104
  78. package/.agent/skills/building-native-ui/SKILL.md +152 -174
  79. package/.agent/skills/clean-code/SKILL.md +331 -360
  80. package/.agent/skills/code-review-checklist/SKILL.md +0 -62
  81. package/.agent/skills/config-validator/SKILL.md +115 -141
  82. package/.agent/skills/csharp-developer/SKILL.md +468 -528
  83. package/.agent/skills/database-design/SKILL.md +104 -369
  84. package/.agent/skills/deployment-procedures/SKILL.md +119 -145
  85. package/.agent/skills/devops-engineer/SKILL.md +295 -332
  86. package/.agent/skills/devops-incident-responder/SKILL.md +87 -113
  87. package/.agent/skills/doc.md +5 -5
  88. package/.agent/skills/documentation-templates/SKILL.md +27 -63
  89. package/.agent/skills/edge-computing/SKILL.md +131 -157
  90. package/.agent/skills/extract-design-system/SKILL.md +108 -134
  91. package/.agent/skills/framer-motion-expert/SKILL.md +111 -855
  92. package/.agent/skills/frontend-design/SKILL.md +151 -499
  93. package/.agent/skills/game-design-expert/SKILL.md +79 -105
  94. package/.agent/skills/game-engineering-expert/SKILL.md +96 -122
  95. package/.agent/skills/geo-fundamentals/SKILL.md +97 -124
  96. package/.agent/skills/github-operations/SKILL.md +279 -314
  97. package/.agent/skills/gsap-expert/SKILL.md +119 -826
  98. package/.agent/skills/i18n-localization/SKILL.md +113 -138
  99. package/.agent/skills/intelligent-routing/SKILL.md +167 -127
  100. package/.agent/skills/lint-and-validate/SKILL.md +16 -52
  101. package/.agent/skills/llm-engineering/SKILL.md +344 -357
  102. package/.agent/skills/local-first/SKILL.md +128 -154
  103. package/.agent/skills/mcp-builder/SKILL.md +92 -118
  104. package/.agent/skills/mobile-design/SKILL.md +213 -219
  105. package/.agent/skills/motion-engineering/SKILL.md +184 -0
  106. package/.agent/skills/nextjs-react-expert/SKILL.md +99 -698
  107. package/.agent/skills/nodejs-best-practices/SKILL.md +498 -559
  108. package/.agent/skills/observability/SKILL.md +293 -330
  109. package/.agent/skills/parallel-agents/SKILL.md +96 -122
  110. package/.agent/skills/performance-profiling/SKILL.md +217 -254
  111. package/.agent/skills/plan-writing/SKILL.md +92 -118
  112. package/.agent/skills/platform-engineer/SKILL.md +97 -123
  113. package/.agent/skills/playwright-best-practices/SKILL.md +137 -162
  114. package/.agent/skills/powershell-windows/SKILL.md +112 -146
  115. package/.agent/skills/project-idioms/SKILL.md +87 -0
  116. package/.agent/skills/python-patterns/SKILL.md +15 -35
  117. package/.agent/skills/python-pro/SKILL.md +148 -754
  118. package/.agent/skills/react-specialist/SKILL.md +123 -827
  119. package/.agent/skills/readme-builder/SKILL.md +23 -85
  120. package/.agent/skills/realtime-patterns/SKILL.md +269 -304
  121. package/.agent/skills/red-team-tactics/SKILL.md +18 -51
  122. package/.agent/skills/rust-pro/SKILL.md +623 -701
  123. package/.agent/skills/seo-fundamentals/SKILL.md +129 -154
  124. package/.agent/skills/server-management/SKILL.md +164 -190
  125. package/.agent/skills/shadcn-ui-expert/SKILL.md +181 -206
  126. package/.agent/skills/skill-creator/SKILL.md +24 -56
  127. package/.agent/skills/sql-pro/SKILL.md +579 -633
  128. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +35 -66
  129. package/.agent/skills/swiftui-expert/SKILL.md +151 -176
  130. package/.agent/skills/systematic-debugging/SKILL.md +92 -118
  131. package/.agent/skills/tailwind-patterns/SKILL.md +516 -576
  132. package/.agent/skills/tdd-workflow/SKILL.md +111 -137
  133. package/.agent/skills/test-result-analyzer/SKILL.md +33 -73
  134. package/.agent/skills/testing-patterns/SKILL.md +512 -573
  135. package/.agent/skills/trend-researcher/SKILL.md +30 -71
  136. package/.agent/skills/ui-ux-pro-max/SKILL.md +8 -41
  137. package/.agent/skills/ui-ux-researcher/SKILL.md +51 -91
  138. package/.agent/skills/vue-expert/SKILL.md +127 -866
  139. package/.agent/skills/vulnerability-scanner/SKILL.md +354 -269
  140. package/.agent/skills/web-accessibility-auditor/SKILL.md +168 -193
  141. package/.agent/skills/web-design-guidelines/SKILL.md +25 -61
  142. package/.agent/skills/webapp-testing/SKILL.md +119 -145
  143. package/.agent/skills/whimsy-injector/SKILL.md +58 -132
  144. package/.agent/skills/workflow-optimizer/SKILL.md +28 -68
  145. package/.agent/workflows/api-tester.md +151 -151
  146. package/.agent/workflows/audit.md +127 -138
  147. package/.agent/workflows/brainstorm.md +110 -110
  148. package/.agent/workflows/changelog.md +112 -112
  149. package/.agent/workflows/create.md +124 -124
  150. package/.agent/workflows/debug.md +165 -189
  151. package/.agent/workflows/deploy.md +180 -189
  152. package/.agent/workflows/enhance.md +128 -151
  153. package/.agent/workflows/fix.md +114 -135
  154. package/.agent/workflows/generate.md +13 -4
  155. package/.agent/workflows/migrate.md +160 -160
  156. package/.agent/workflows/orchestrate.md +168 -168
  157. package/.agent/workflows/performance-benchmarker.md +114 -123
  158. package/.agent/workflows/plan.md +173 -173
  159. package/.agent/workflows/preview.md +80 -80
  160. package/.agent/workflows/refactor.md +161 -183
  161. package/.agent/workflows/review-ai.md +101 -129
  162. package/.agent/workflows/review.md +116 -116
  163. package/.agent/workflows/session.md +94 -94
  164. package/.agent/workflows/status.md +79 -79
  165. package/.agent/workflows/strengthen-skills.md +138 -139
  166. package/.agent/workflows/swarm.md +179 -179
  167. package/.agent/workflows/test.md +189 -211
  168. package/.agent/workflows/tribunal-backend.md +94 -113
  169. package/.agent/workflows/tribunal-database.md +95 -115
  170. package/.agent/workflows/tribunal-frontend.md +96 -118
  171. package/.agent/workflows/tribunal-full.md +93 -133
  172. package/.agent/workflows/tribunal-mobile.md +95 -119
  173. package/.agent/workflows/tribunal-performance.md +110 -133
  174. package/.agent/workflows/ui-ux-pro-max.md +122 -143
  175. package/README.md +30 -1
  176. package/bin/tribunal-kit.js +175 -12
  177. package/package.json +25 -4
  178. package/.agent/skills/api-patterns/api-style.md +0 -42
  179. package/.agent/skills/api-patterns/auth.md +0 -24
  180. package/.agent/skills/api-patterns/documentation.md +0 -26
  181. package/.agent/skills/api-patterns/graphql.md +0 -41
  182. package/.agent/skills/api-patterns/rate-limiting.md +0 -31
  183. package/.agent/skills/api-patterns/response.md +0 -37
  184. package/.agent/skills/api-patterns/rest.md +0 -40
  185. package/.agent/skills/api-patterns/security-testing.md +0 -122
  186. package/.agent/skills/api-patterns/trpc.md +0 -41
  187. package/.agent/skills/api-patterns/versioning.md +0 -22
  188. package/.agent/skills/app-builder/agent-coordination.md +0 -71
  189. package/.agent/skills/app-builder/feature-building.md +0 -53
  190. package/.agent/skills/app-builder/project-detection.md +0 -34
  191. package/.agent/skills/app-builder/scaffolding.md +0 -118
  192. package/.agent/skills/app-builder/tech-stack.md +0 -40
  193. package/.agent/skills/architecture/context-discovery.md +0 -43
  194. package/.agent/skills/architecture/examples.md +0 -94
  195. package/.agent/skills/architecture/pattern-selection.md +0 -68
  196. package/.agent/skills/architecture/patterns-reference.md +0 -50
  197. package/.agent/skills/architecture/trade-off-analysis.md +0 -77
  198. package/.agent/skills/brainstorming/dynamic-questioning.md +0 -360
  199. package/.agent/skills/database-design/database-selection.md +0 -43
  200. package/.agent/skills/database-design/indexing.md +0 -39
  201. package/.agent/skills/database-design/migrations.md +0 -48
  202. package/.agent/skills/database-design/optimization.md +0 -36
  203. package/.agent/skills/database-design/orm-selection.md +0 -30
  204. package/.agent/skills/database-design/schema-design.md +0 -56
  205. package/.agent/skills/frontend-design/animation-guide.md +0 -331
  206. package/.agent/skills/frontend-design/color-system.md +0 -329
  207. package/.agent/skills/frontend-design/decision-trees.md +0 -418
  208. package/.agent/skills/frontend-design/motion-graphics.md +0 -306
  209. package/.agent/skills/frontend-design/typography-system.md +0 -363
  210. package/.agent/skills/frontend-design/ux-psychology.md +0 -1116
  211. package/.agent/skills/frontend-design/visual-effects.md +0 -383
  212. package/.agent/skills/intelligent-routing/router-manifest.md +0 -65
  213. package/.agent/skills/mobile-design/decision-trees.md +0 -516
  214. package/.agent/skills/mobile-design/mobile-backend.md +0 -491
  215. package/.agent/skills/mobile-design/mobile-color-system.md +0 -420
  216. package/.agent/skills/mobile-design/mobile-debugging.md +0 -122
  217. package/.agent/skills/mobile-design/mobile-design-thinking.md +0 -357
  218. package/.agent/skills/mobile-design/mobile-navigation.md +0 -458
  219. package/.agent/skills/mobile-design/mobile-performance.md +0 -767
  220. package/.agent/skills/mobile-design/mobile-testing.md +0 -356
  221. package/.agent/skills/mobile-design/mobile-typography.md +0 -433
  222. package/.agent/skills/mobile-design/platform-android.md +0 -666
  223. package/.agent/skills/mobile-design/platform-ios.md +0 -561
  224. package/.agent/skills/mobile-design/touch-psychology.md +0 -537
  225. package/.agent/skills/nextjs-react-expert/1-async-eliminating-waterfalls.md +0 -312
  226. package/.agent/skills/nextjs-react-expert/2-bundle-bundle-size-optimization.md +0 -240
  227. package/.agent/skills/nextjs-react-expert/3-server-server-side-performance.md +0 -490
  228. package/.agent/skills/nextjs-react-expert/4-client-client-side-data-fetching.md +0 -264
  229. package/.agent/skills/nextjs-react-expert/5-rerender-re-render-optimization.md +0 -581
  230. package/.agent/skills/nextjs-react-expert/6-rendering-rendering-performance.md +0 -432
  231. package/.agent/skills/nextjs-react-expert/7-js-javascript-performance.md +0 -684
  232. package/.agent/skills/nextjs-react-expert/8-advanced-advanced-patterns.md +0 -150
  233. package/.agent/skills/vulnerability-scanner/checklists.md +0 -121
@@ -1,145 +1,119 @@
1
- ---
2
- name: webapp-testing
3
- description: Comprehensive Web Application Testing strategy. Test Pyramid, Vitest/Jest for unit logic, React Testing Library for component integrity, MSW (Mock Service Worker) for API layer simulation, and visual regression. Use when setting up testing environments or defining global test strategies across a web stack.
4
- allowed-tools: Read, Write, Edit, Glob, Grep
5
- version: 2.0.0
6
- last-updated: 2026-04-02
7
- applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
8
- ---
9
-
10
- # Webapp Testing Full Stack Pipeline Mastery
11
-
12
- > Write tests. Not too many. Mostly integration. Guillermo Rauch
13
- > A test suite that takes 30 minutes to run is a suite that engineers will actively subvert.
14
-
15
- ---
16
-
17
- ## 1. The Strategy (The Testing Trophy)
18
-
19
- The traditional "Testing Pyramid" (lots of Unit, little E2E) is outdated for rich UI applications. Use the **Testing Trophy**:
20
-
21
- 1. **Static Analysis (10%)**: TypeScript, ESLint, Prettier (Catches typos and type mismatches instantly).
22
- 2. **Unit Tests (20%)**: Vitest (Tests complex pure functions: math, formatting, data mapping).
23
- 3. **Integration Tests (60%)**: React Testing Library + MSW (Tests components and network mock interactions together).
24
- 4. **End-to-End Tests (10%)**: Playwright (Tests the critical path: Login, Checkout, Account Creation on a real browser).
25
-
26
- ---
27
-
28
- ## 2. Integration Layer (React Testing Library + MSW)
29
-
30
- Do not mock child components. Render the specific DOM tree and interact with it as a user would.
31
-
32
- To prevent network calls, utilize Mock Service Worker (MSW) which intercepts requests at the network layer natively.
33
-
34
- ```typescript
35
- // BAD: Mocking implementation details
36
- jest.mock('axios');
37
- axios.get.mockResolvedValue({ data: { users: [] } });
38
-
39
- // ✅ GOOD: MSW (Mock Service Worker) network level interception
40
- // The component functions EXACTLY as it would in production
41
- import { http, HttpResponse } from 'msw'
42
- import { setupServer } from 'msw/node'
43
-
44
- export const handlers = [
45
- http.get('/api/users', () => {
46
- return HttpResponse.json([
47
- { id: 1, name: 'John Appleseed' },
48
- ])
49
- }),
50
- ]
51
- const server = setupServer(...handlers)
52
-
53
- beforeAll(() => server.listen())
54
- afterEach(() => server.resetHandlers())
55
- afterAll(() => server.close())
56
- ```
57
-
58
- ### Component Testing (RTL)
59
-
60
- ```typescript
61
- import { render, screen, waitFor } from '@testing-library/react';
62
- import userEvent from '@testing-library/user-event';
63
-
64
- test('Should load users and render names', async () => {
65
- // userEvent closely replicates real browser physics (focusing, keystrokes)
66
- const user = userEvent.setup();
67
-
68
- render(<UserDashboard />);
69
-
70
- // Initial State
71
- expect(screen.getByText('Loading...')).toBeInTheDocument();
72
-
73
- // Async Resolution (Auto-waits for the MSW mock to return)
74
- const johnNode = await screen.findByText('John Appleseed');
75
- expect(johnNode).toBeInTheDocument();
76
-
77
- // Interaction
78
- const deleteBtn = screen.getByRole('button', { name: "Delete John" });
79
- await user.click(deleteBtn);
80
-
81
- // Verification
82
- expect(johnNode).not.toBeInTheDocument();
83
- });
84
- ```
85
-
86
- ---
87
-
88
- ## 3. Pure Unit Testing (Vitest)
89
-
90
- Isolate business logic entirely from React.
91
-
92
- ```typescript
93
- // Move complex logic OUT of the React component entirely
94
- export function calculateTax(subtotal: number, state: string): number {
95
- if (subtotal < 0) throw new Error("Subtotal cannot be negative");
96
- if (state === "CA") return subtotal * 0.0825;
97
- return 0; // Default
98
- }
99
-
100
- // Test with extreme precision and coverage
101
- import { describe, it, expect } from 'vitest';
102
-
103
- describe('calculateTax()', () => {
104
- it('applies CA tax correctly', () => {
105
- expect(calculateTax(100, 'CA')).toBe(8.25);
106
- });
107
-
108
- it('throws on negative input', () => {
109
- expect(() => calculateTax(-50, 'CA')).toThrowError('negative');
110
- });
111
- });
112
- ```
113
-
114
- ---
115
-
116
- ## 🤖 LLM-Specific Traps (Webapp Testing)
117
-
118
- 1. **Shallow Rendering Illusion:** AI suggests `shallow()` rendering from Enzyme. Enzyme is dead and lacks React 18+ hook visibility. RTL requires full DOM rendering.
119
- 2. **`fireEvent` over `userEvent`:** AI defaults to `fireEvent.click()`. It skips critical browser lifecycle checks. Demand `@testing-library/user-event`.
120
- 3. **Mocking Fear:** Over-mocking `fetch` natively inside unit tests instead of setting up clean HTTP interception layers (MSW).
121
- 4. **Brittle Selectors in RTL:** AI uses `container.querySelector('.my-class')` instead of semantic accessibility queries (`screen.getByRole`). Tests will instantly break on design changes.
122
- 5. **Testing Framework Overhead:** Suggesting Jest in 2026 for generic Vite/Next apps. Vitest is significantly faster, native ESM, and highly compatible.
123
- 6. **`act()` Warning Panic:** Sprinkling `act()` randomly throughout the test code to suppress React warnings, instead of fixing the root async timing issues with `findBy` properly.
124
- 7. **Ignoring Assertions Context:** Forgetting cleanup methodologies leading to state leaking between tests randomly. (Vitest and RTL handle this automatically if configured, but AI often creates weird global singleton state variables).
125
- 8. **Endless Mock Imports:** Trying to `vi.mock` deeply nested dependencies across 4 layers of hooks. This proves the architecture is overly coupled. The test should stimulate a refactor, not a complex mock.
126
- 9. **100% Coverage Addiction:** Recommending strict `coverageThreshold: 100`. The ROI of testing standard UI visual states drops to zero. Focus coverage on algorithms and data mapping functions.
127
- 10. **Skipping Accessibility in Integration:** Forgetting that `getByRole` explicitly verifies the component is rendering accessible a11y boundaries correctly. Using `getByTestId` everywhere skips this verification.
128
-
129
- ---
130
-
131
- ## 🏛️ Tribunal Integration
132
-
133
- ### ✅ Pre-Flight Self-Audit
134
- ```
135
- ✅ Are complex pure functions isolated from React hooks for high-speed Vitest execution?
136
- ✅ Does the testing suite rely fundamentally heavily on MSW network/API interception instead of `vi.mock`?
137
- ✅ Did I exclusively leverage `screen.getByRole` / `findByRole` instead of CSS selector querying?
138
- ✅ Am I using `@testing-library/user-event` rather than raw `fireEvent` to simulate realistic DOM interaction?
139
- ✅ Has the `act()` wrapper been avoided, in favor of proper async `await screen.findByX` queries?
140
- ✅ Is the coverage optimized for business logic precision, rather than blind 100% coverage chasing?
141
- ✅ Are the React components fully rendered (no shallow mocking)?
142
- ✅ Did I prevent state leakage completely by relying on isolated server handlers per-test where necessary?
143
- ✅ Is the suite configured under Vitest for ESM speed instead of heavier, legacy Jest integrations?
144
- ✅ Are there distinct layers deployed (Unit for logic, RTL for component flow, Playwright for E2E)?
145
- ```
1
+ ---
2
+ name: webapp-testing
3
+ description: Comprehensive Web Application Testing strategy. Test Pyramid, Vitest/Jest for unit logic, React Testing Library for component integrity, MSW (Mock Service Worker) for API layer simulation, and visual regression. Use when setting up testing environments or defining global test strategies across a web stack.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep
5
+ version: 2.0.0
6
+ last-updated: 2026-04-02
7
+ applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
8
+ ---
9
+
10
+ ## Hallucination Traps (Read First)
11
+ - ❌ Mocking everything in integration tests -> ✅ Integration tests verify real interactions; mock only external services (APIs, DBs)
12
+ - Testing Library: using `getByTestId` as the primary selector -> ✅ Prefer `getByRole`, `getByLabelText`, `getByText` for user-centric testing
13
+ - Writing E2E tests that depend on seed data -> Each test should create its own data in setup and clean up in teardown
14
+
15
+ ---
16
+
17
+
18
+ # Webapp Testing — Full Stack Pipeline Mastery
19
+
20
+ ---
21
+
22
+ ## 1. The Strategy (The Testing Trophy)
23
+
24
+ The traditional "Testing Pyramid" (lots of Unit, little E2E) is outdated for rich UI applications. Use the **Testing Trophy**:
25
+
26
+ 1. **Static Analysis (10%)**: TypeScript, ESLint, Prettier (Catches typos and type mismatches instantly).
27
+ 2. **Unit Tests (20%)**: Vitest (Tests complex pure functions: math, formatting, data mapping).
28
+ 3. **Integration Tests (60%)**: React Testing Library + MSW (Tests components and network mock interactions together).
29
+ 4. **End-to-End Tests (10%)**: Playwright (Tests the critical path: Login, Checkout, Account Creation on a real browser).
30
+
31
+ ---
32
+
33
+ ## 2. Integration Layer (React Testing Library + MSW)
34
+
35
+ Do not mock child components. Render the specific DOM tree and interact with it as a user would.
36
+
37
+ To prevent network calls, utilize Mock Service Worker (MSW) which intercepts requests at the network layer natively.
38
+
39
+ ```typescript
40
+ // BAD: Mocking implementation details
41
+ jest.mock('axios');
42
+ axios.get.mockResolvedValue({ data: { users: [] } });
43
+
44
+ // GOOD: MSW (Mock Service Worker) network level interception
45
+ // The component functions EXACTLY as it would in production
46
+ import { http, HttpResponse } from 'msw'
47
+ import { setupServer } from 'msw/node'
48
+
49
+ export const handlers = [
50
+ http.get('/api/users', () => {
51
+ return HttpResponse.json([
52
+ { id: 1, name: 'John Appleseed' },
53
+ ])
54
+ }),
55
+ ]
56
+ const server = setupServer(...handlers)
57
+
58
+ beforeAll(() => server.listen())
59
+ afterEach(() => server.resetHandlers())
60
+ afterAll(() => server.close())
61
+ ```
62
+
63
+ ### Component Testing (RTL)
64
+
65
+ ```typescript
66
+ import { render, screen, waitFor } from '@testing-library/react';
67
+ import userEvent from '@testing-library/user-event';
68
+
69
+ test('Should load users and render names', async () => {
70
+ // userEvent closely replicates real browser physics (focusing, keystrokes)
71
+ const user = userEvent.setup();
72
+
73
+ render(<UserDashboard />);
74
+
75
+ // Initial State
76
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
77
+
78
+ // Async Resolution (Auto-waits for the MSW mock to return)
79
+ const johnNode = await screen.findByText('John Appleseed');
80
+ expect(johnNode).toBeInTheDocument();
81
+
82
+ // Interaction
83
+ const deleteBtn = screen.getByRole('button', { name: "Delete John" });
84
+ await user.click(deleteBtn);
85
+
86
+ // Verification
87
+ expect(johnNode).not.toBeInTheDocument();
88
+ });
89
+ ```
90
+
91
+ ---
92
+
93
+ ## 3. Pure Unit Testing (Vitest)
94
+
95
+ Isolate business logic entirely from React.
96
+
97
+ ```typescript
98
+ // ✅ Move complex logic OUT of the React component entirely
99
+ export function calculateTax(subtotal: number, state: string): number {
100
+ if (subtotal < 0) throw new Error("Subtotal cannot be negative");
101
+ if (state === "CA") return subtotal * 0.0825;
102
+ return 0; // Default
103
+ }
104
+
105
+ // ✅ Test with extreme precision and coverage
106
+ import { describe, it, expect } from 'vitest';
107
+
108
+ describe('calculateTax()', () => {
109
+ it('applies CA tax correctly', () => {
110
+ expect(calculateTax(100, 'CA')).toBe(8.25);
111
+ });
112
+
113
+ it('throws on negative input', () => {
114
+ expect(() => calculateTax(-50, 'CA')).toThrowError('negative');
115
+ });
116
+ });
117
+ ```
118
+
119
+ ---
@@ -24,11 +24,11 @@ You are a specialized agent for injecting "micro-delights" into user interfaces
24
24
 
25
25
  ## Whimsy Philosophy
26
26
 
27
- > **Whimsy is not decoration.** Every animation must serve a purpose:
28
- > - Guide attention → where should the user look?
29
- > - Confirm action → did the thing work?
30
- > - Create continuity → where did I come from, where am I going?
31
- > - Build personality → does this app feel human?
27
+ **Whimsy is not decoration.** Every animation must serve a purpose:
28
+ - Guide attention → where should the user look?
29
+ - Confirm action → did the thing work?
30
+ - Create continuity → where did I come from, where am I going?
31
+ - Build personality → does this app feel human?
32
32
 
33
33
  **If an animation doesn't serve one of these purposes, don't add it.**
34
34
 
@@ -36,13 +36,13 @@ You are a specialized agent for injecting "micro-delights" into user interfaces
36
36
 
37
37
  ### Category 1: Entrance Animations
38
38
 
39
- | Pattern | Purpose | Duration | Trigger |
39
+ |Pattern|Purpose|Duration|Trigger|
40
40
  |---|---|---|---|
41
- | Fade-up | Content appearing naturally | 300-400ms | On mount / viewport entry |
42
- | Scale-in | Modal or card emphasis | 200-300ms | On open / on mount |
43
- | Stagger cascade | List items loading sequentially | 50ms delay × index | On mount / data load |
44
- | Slide-in | Side panels, drawers | 250-350ms | On toggle |
45
- | Blur-to-sharp | Hero images, lazy content | 400-600ms | On image load |
41
+ |Fade-up|Content appearing naturally|300-400ms|On mount / viewport entry|
42
+ |Scale-in|Modal or card emphasis|200-300ms|On open / on mount|
43
+ |Stagger cascade|List items loading sequentially|50ms delay × index|On mount / data load|
44
+ |Slide-in|Side panels, drawers|250-350ms|On toggle|
45
+ |Blur-to-sharp|Hero images, lazy content|400-600ms|On image load|
46
46
 
47
47
  **Framework Implementations:**
48
48
 
@@ -94,14 +94,14 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
94
94
 
95
95
  ### Category 2: Hover & Interaction States
96
96
 
97
- | Pattern | CSS Implementation | Purpose |
97
+ |Pattern|CSS Implementation|Purpose|
98
98
  |---|---|---|
99
- | Card lift | `transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Clickable affordance |
100
- | Button press | `transform: scale(0.97)` on `:active` | Tactile feedback |
101
- | Link underline draw | `background-size: 100% 2px` from `0% 2px` | Navigation affordance |
102
- | Icon rotate | `transform: rotate(90deg)` on expand | State change indicator |
103
- | Color shift | `background-color` transition on hover | Interactive affordance |
104
- | Border glow | `box-shadow: 0 0 0 3px rgba(primary, 0.2)` on focus | Accessibility + delight |
99
+ |Card lift|`transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12)`|Clickable affordance|
100
+ |Button press|`transform: scale(0.97)` on `:active`|Tactile feedback|
101
+ |Link underline draw|`background-size: 100% 2px` from `0% 2px`|Navigation affordance|
102
+ |Icon rotate|`transform: rotate(90deg)` on expand|State change indicator|
103
+ |Color shift|`background-color` transition on hover|Interactive affordance|
104
+ |Border glow|`box-shadow: 0 0 0 3px rgba(primary, 0.2)` on focus|Accessibility + delight|
105
105
 
106
106
  ```css
107
107
  /* Card Lift — Universal */
@@ -135,12 +135,12 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
135
135
 
136
136
  ### Category 3: Loading & Skeleton States
137
137
 
138
- | Pattern | When | Duration |
138
+ |Pattern|When|Duration|
139
139
  |---|---|---|
140
- | Shimmer pulse | Data fetching, image loading | Continuous until loaded |
141
- | Spinner-to-content | Short waits (< 2s) | Until complete |
142
- | Progress bar | File uploads, long processes | Mapped to actual progress |
143
- | Skeleton screen | Initial page paint | Until first data render |
140
+ |Shimmer pulse|Data fetching, image loading|Continuous until loaded|
141
+ |Spinner-to-content|Short waits (< 2s)|Until complete|
142
+ |Progress bar|File uploads, long processes|Mapped to actual progress|
143
+ |Skeleton screen|Initial page paint|Until first data render|
144
144
 
145
145
  ```css
146
146
  /* Shimmer Skeleton */
@@ -163,13 +163,13 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
163
163
 
164
164
  ### Category 4: Micro-Feedback
165
165
 
166
- | Pattern | Trigger | Duration |
166
+ |Pattern|Trigger|Duration|
167
167
  |---|---|---|
168
- | Success checkmark draw | Form submit success | 300ms |
169
- | Error shake | Validation failure | 300ms (3 oscillations) |
170
- | Counter tick-up | Stat change | 600ms (ease-out) |
171
- | Toast slide-in | Notification | 250ms in, 200ms out |
172
- | Confetti burst | Achievement, first-time completion | 1.5s |
168
+ |Success checkmark draw|Form submit success|300ms|
169
+ |Error shake|Validation failure|300ms (3 oscillations)|
170
+ |Counter tick-up|Stat change|600ms (ease-out)|
171
+ |Toast slide-in|Notification|250ms in, 200ms out|
172
+ |Confetti burst|Achievement, first-time completion|1.5s|
173
173
 
174
174
  ```css
175
175
  /* Error Shake */
@@ -185,12 +185,12 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
185
185
 
186
186
  ### Category 5: Page Transitions
187
187
 
188
- | Pattern | When | CSS Approach |
188
+ |Pattern|When|CSS Approach|
189
189
  |---|---|---|
190
- | Crossfade | Default page change | `view-transition-name` (View Transitions API) |
191
- | Slide lateral | Tab switching, step wizard | `transform: translateX(±100%)` |
192
- | Scale + fade | Modal open/close | `scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1` |
193
- | Morph | Shared element between pages | `view-transition-name` on shared elements |
190
+ |Crossfade|Default page change|`view-transition-name` (View Transitions API)|
191
+ |Slide lateral|Tab switching, step wizard|`transform: translateX(±100%)`|
192
+ |Scale + fade|Modal open/close|`scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1`|
193
+ |Morph|Shared element between pages|`view-transition-name` on shared elements|
194
194
 
195
195
  ```css
196
196
  /* View Transitions API (Chrome 111+) */
@@ -206,33 +206,33 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
206
206
  ## Whimsy Quota Rules
207
207
 
208
208
  > [!IMPORTANT]
209
- > Whimsy must be **tasteful, not invasive**. These are hard limits:
209
+ Whimsy must be **tasteful, not invasive**. These are hard limits:
210
210
 
211
211
  ### Hard Constraints
212
- | Rule | Limit | Reason |
212
+ |Rule|Limit|Reason|
213
213
  |---|---|---|
214
- | Max animation types per page | 3 distinct | Visual coherence |
215
- | Max concurrent animations | 5 elements | Performance |
216
- | `prefers-reduced-motion` | **MANDATORY** | Accessibility (WCAG 2.3.3) |
217
- | CLS impact | **Zero** | Core Web Vitals |
214
+ |Max animation types per page|3 distinct|Visual coherence|
215
+ |Max concurrent animations|5 elements|Performance|
216
+ |`prefers-reduced-motion`|**MANDATORY**|Accessibility (WCAG 2.3.3)|
217
+ |CLS impact|**Zero**|Core Web Vitals|
218
218
 
219
219
  ### Duration Constraints
220
- | Animation Type | Min | Max | Sweet Spot |
220
+ |Animation Type|Min|Max|Sweet Spot|
221
221
  |---|---|---|---|
222
- | Entrance | 200ms | 500ms | 300ms |
223
- | Hover / Interaction | 100ms | 250ms | 150ms |
224
- | Feedback | 100ms | 400ms | 200ms |
225
- | Page transition | 150ms | 400ms | 250ms |
226
- | Loading (loop) | 1000ms | 2000ms | 1500ms |
222
+ |Entrance|200ms|500ms|300ms|
223
+ |Hover / Interaction|100ms|250ms|150ms|
224
+ |Feedback|100ms|400ms|200ms|
225
+ |Page transition|150ms|400ms|250ms|
226
+ |Loading (loop)|1000ms|2000ms|1500ms|
227
227
 
228
228
  ### Easing Reference
229
- | Easing | CSS Value | Use For |
229
+ |Easing|CSS Value|Use For|
230
230
  |---|---|---|
231
- | Standard | `cubic-bezier(0.4, 0, 0.2, 1)` | Most UI motion |
232
- | Decelerate | `cubic-bezier(0, 0, 0.2, 1)` | Entrances (coming into view) |
233
- | Accelerate | `cubic-bezier(0.4, 0, 1, 1)` | Exits (leaving view) |
234
- | Spring-like | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful UI, toggles |
235
- | **Never** | `linear` | ❌ Not for UI motion |
231
+ |Standard|`cubic-bezier(0.4, 0, 0.2, 1)`|Most UI motion|
232
+ |Decelerate|`cubic-bezier(0, 0, 0.2, 1)`|Entrances (coming into view)|
233
+ |Accelerate|`cubic-bezier(0.4, 0, 1, 1)`|Exits (leaving view)|
234
+ |Spring-like|`cubic-bezier(0.34, 1.56, 0.64, 1)`|Playful UI, toggles|
235
+ |**Never**|`linear`|❌ Not for UI motion|
236
236
 
237
237
  ### Mandatory Accessibility Block
238
238
  Every file with animations MUST include:
@@ -254,49 +254,15 @@ Every file with animations MUST include:
254
254
  - **Use `will-change` sparingly** — only on elements that are actively animating.
255
255
  - **Remove observers** when components unmount.
256
256
 
257
- ## Output Format
258
-
259
- ```
260
- 🎭 Whimsy Injection Report
261
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
262
-
263
- Page/Component: [name]
264
- Injections: [count]
265
- Total duration: [max concurrent animation time]
266
-
267
- ━━━ Injection 1 ━━━━━━━━━━━━━━━━━━━━━━━━
268
- Target: [element/component]
269
- Type: [Entrance / Hover / Feedback / Loading / Transition]
270
- Animation: [description]
271
- Duration: [ms]
272
- Easing: [value]
273
- Trigger: [on-load / on-hover / on-scroll / on-action]
274
- A11y: prefers-reduced-motion handled? ✅
275
- CLS risk: None (transform + opacity only)
276
- Framework: [CSS / Framer Motion / Vue / GSAP]
277
-
278
- [Code snippet]
279
-
280
- ━━━ Injection 2 ━━━━━━━━━━━━━━━━━━━━━━━━
281
- ...
282
-
283
- ━━━ Checklist ━━━━━━━━━━━━━━━━━━━━━━━━━━
284
- ✅ prefers-reduced-motion media query present
285
- ✅ Only transform/opacity animated
286
- ✅ Max 3 animation types on this page
287
- ✅ No layout shift risk
288
- ✅ Observers cleaned up on unmount
289
- ```
290
-
291
257
  ## Cross-Skill Integration
292
258
 
293
- | Paired Skill | Integration Point |
259
+ |Paired Skill|Integration Point|
294
260
  |---|---|
295
- | `trend-researcher` | Receives motion intent → implements specific animations |
296
- | `ui-ux-researcher` | Addresses P2.5 audit findings (missing micro-interactions) |
297
- | `frontend-design` | Ensures animations match component design tokens |
298
- | `performance-profiling` | Monitors that injections don't degrade Web Vitals |
299
- | `web-design-guidelines` | Validates animations against established UI patterns |
261
+ |`trend-researcher`|Receives motion intent → implements specific animations|
262
+ |`ui-ux-researcher`|Addresses P2.5 audit findings (missing micro-interactions)|
263
+ |`frontend-design`|Ensures animations match component design tokens|
264
+ |`performance-profiling`|Monitors that injections don't degrade Web Vitals|
265
+ |`web-design-guidelines`|Validates animations against established UI patterns|
300
266
 
301
267
  ## Anti-Hallucination Guard
302
268
 
@@ -306,44 +272,4 @@ Framework: [CSS / Framer Motion / Vue / GSAP]
306
272
  - **Never suggest animations that cause layout shift** — enforce `transform` and `opacity` only.
307
273
  - **Verify `will-change` usage** — only apply to actively animating elements, remove after animation completes.
308
274
 
309
-
310
- ---
311
-
312
- ## 🤖 LLM-Specific Traps
313
-
314
- AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
315
-
316
- 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
317
- 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
318
- 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
319
- 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
320
- 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
321
-
322
275
  ---
323
-
324
- ## 🏛️ Tribunal Integration (Anti-Hallucination)
325
-
326
- **Slash command: `/review` or `/tribunal-full`**
327
- **Active reviewers: `logic-reviewer` · `security-auditor`**
328
-
329
- ### ❌ Forbidden AI Tropes
330
-
331
- 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
332
- 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
333
- 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
334
-
335
- ### ✅ Pre-Flight Self-Audit
336
-
337
- Review these questions before confirming output:
338
- ```
339
- ✅ Did I rely ONLY on real, verified tools and methods?
340
- ✅ Is this solution appropriately scoped to the user's constraints?
341
- ✅ Did I handle potential failure modes and edge cases?
342
- ✅ Have I avoided generic boilerplate that doesn't add value?
343
- ```
344
-
345
- ### 🛑 Verification-Before-Completion (VBC) Protocol
346
-
347
- **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
348
- - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
349
- - ✅ **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.