tribunal-kit 4.5.0 → 4.6.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 (217) hide show
  1. package/.agent/.shared/ui-ux-pro-max/README.md +4 -4
  2. package/.agent/ARCHITECTURE.md +279 -277
  3. package/.agent/GEMINI.md +127 -121
  4. package/.agent/agents/accessibility-reviewer.md +187 -187
  5. package/.agent/agents/ai-code-reviewer.md +199 -199
  6. package/.agent/agents/api-architect.md +71 -66
  7. package/.agent/agents/backend-specialist.md +219 -215
  8. package/.agent/agents/cloud-engineer.md +98 -0
  9. package/.agent/agents/code-archaeologist.md +168 -161
  10. package/.agent/agents/database-architect.md +184 -184
  11. package/.agent/agents/db-latency-auditor.md +213 -216
  12. package/.agent/agents/debugger.md +198 -191
  13. package/.agent/agents/dependency-reviewer.md +106 -103
  14. package/.agent/agents/devops-engineer.md +218 -218
  15. package/.agent/agents/documentation-writer.md +209 -201
  16. package/.agent/agents/explorer-agent.md +167 -160
  17. package/.agent/agents/frontend-reviewer.md +162 -160
  18. package/.agent/agents/frontend-specialist.md +257 -248
  19. package/.agent/agents/game-developer.md +48 -48
  20. package/.agent/agents/logic-reviewer.md +118 -116
  21. package/.agent/agents/mobile-developer.md +197 -200
  22. package/.agent/agents/mobile-reviewer.md +159 -162
  23. package/.agent/agents/orchestrator.md +187 -181
  24. package/.agent/agents/penetration-tester.md +160 -157
  25. package/.agent/agents/performance-optimizer.md +183 -183
  26. package/.agent/agents/performance-reviewer.md +178 -178
  27. package/.agent/agents/precedence-reviewer.md +251 -250
  28. package/.agent/agents/product-manager.md +149 -142
  29. package/.agent/agents/product-owner.md +81 -80
  30. package/.agent/agents/project-planner.md +152 -142
  31. package/.agent/agents/qa-automation-engineer.md +216 -225
  32. package/.agent/agents/resilience-reviewer.md +88 -88
  33. package/.agent/agents/schema-reviewer.md +67 -67
  34. package/.agent/agents/security-auditor.md +180 -174
  35. package/.agent/agents/seo-specialist.md +188 -193
  36. package/.agent/agents/sql-reviewer.md +159 -161
  37. package/.agent/agents/supervisor-agent.md +173 -184
  38. package/.agent/agents/swarm-worker-contracts.md +170 -166
  39. package/.agent/agents/swarm-worker-registry.md +92 -92
  40. package/.agent/agents/system-architect.md +85 -0
  41. package/.agent/agents/test-coverage-reviewer.md +158 -160
  42. package/.agent/agents/test-engineer.md +118 -118
  43. package/.agent/agents/throughput-optimizer.md +291 -299
  44. package/.agent/agents/type-safety-reviewer.md +182 -175
  45. package/.agent/agents/ui-ux-auditor.md +300 -292
  46. package/.agent/agents/vitals-reviewer.md +223 -223
  47. package/.agent/mcp_config.json +37 -40
  48. package/.agent/patterns/generator.md +11 -9
  49. package/.agent/patterns/inversion.md +14 -12
  50. package/.agent/patterns/pipeline.md +11 -9
  51. package/.agent/patterns/reviewer.md +15 -13
  52. package/.agent/patterns/tool-wrapper.md +11 -9
  53. package/.agent/routing_index.json +654 -0
  54. package/.agent/rules/GEMINI.md +358 -352
  55. package/.agent/scripts/compile_router.py +112 -0
  56. package/.agent/scripts/migrate_skills_frontmatter.py +64 -0
  57. package/.agent/scripts/strengthen_skills.js +1 -1
  58. package/.agent/skills/advanced-rag-pipelines/SKILL.md +56 -0
  59. package/.agent/skills/agent-organizer/SKILL.md +156 -150
  60. package/.agent/skills/agentic-patterns/SKILL.md +313 -315
  61. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +190 -184
  62. package/.agent/skills/api-patterns/SKILL.md +253 -247
  63. package/.agent/skills/api-security-auditor/SKILL.md +195 -193
  64. package/.agent/skills/app-builder/SKILL.md +573 -572
  65. package/.agent/skills/app-builder/templates/SKILL.md +108 -115
  66. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -76
  67. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -92
  68. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -88
  69. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -88
  70. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -83
  71. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -90
  72. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -90
  73. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +126 -122
  74. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +127 -122
  75. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +172 -169
  76. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +139 -134
  77. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -83
  78. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +122 -119
  79. package/.agent/skills/appflow-wireframe/SKILL.md +146 -145
  80. package/.agent/skills/architecture/SKILL.md +226 -219
  81. package/.agent/skills/authentication-best-practices/SKILL.md +197 -189
  82. package/.agent/skills/backend-security-expert/SKILL.md +16 -2
  83. package/.agent/skills/bash-linux/SKILL.md +179 -179
  84. package/.agent/skills/behavioral-modes/SKILL.md +239 -223
  85. package/.agent/skills/brainstorming/SKILL.md +498 -486
  86. package/.agent/skills/browser-native-ai/SKILL.md +57 -4
  87. package/.agent/skills/building-native-ui/SKILL.md +202 -202
  88. package/.agent/skills/cicd-pro/SKILL.md +442 -0
  89. package/.agent/skills/clean-code/SKILL.md +400 -381
  90. package/.agent/skills/cloud-architect/SKILL.md +439 -0
  91. package/.agent/skills/code-review-checklist/SKILL.md +203 -194
  92. package/.agent/skills/config-validator/SKILL.md +165 -165
  93. package/.agent/skills/containerization-pro/SKILL.md +452 -0
  94. package/.agent/skills/csharp-developer/SKILL.md +518 -518
  95. package/.agent/skills/data-validation-schemas/SKILL.md +333 -328
  96. package/.agent/skills/database-design/SKILL.md +247 -240
  97. package/.agent/skills/deployment-procedures/SKILL.md +172 -169
  98. package/.agent/skills/devops-engineer/SKILL.md +345 -345
  99. package/.agent/skills/devops-incident-responder/SKILL.md +143 -137
  100. package/.agent/skills/doc.md +209 -177
  101. package/.agent/skills/documentation-templates/SKILL.md +291 -279
  102. package/.agent/skills/edge-computing/SKILL.md +183 -181
  103. package/.agent/skills/error-resilience/SKILL.md +411 -428
  104. package/.agent/skills/extract-design-system/SKILL.md +160 -158
  105. package/.agent/skills/framer-motion-expert/SKILL.md +253 -244
  106. package/.agent/skills/frontend-design/SKILL.md +208 -201
  107. package/.agent/skills/frontend-security-expert/SKILL.md +16 -3
  108. package/.agent/skills/game-design-expert/SKILL.md +132 -129
  109. package/.agent/skills/game-engineering-expert/SKILL.md +148 -146
  110. package/.agent/skills/generative-ui-expert/SKILL.md +57 -1
  111. package/.agent/skills/geo-fundamentals/SKILL.md +148 -147
  112. package/.agent/skills/git-pro/SKILL.md +435 -0
  113. package/.agent/skills/github-operations/SKILL.md +335 -329
  114. package/.agent/skills/gsap-core/SKILL.md +319 -308
  115. package/.agent/skills/gsap-frameworks/SKILL.md +213 -207
  116. package/.agent/skills/gsap-performance/SKILL.md +139 -133
  117. package/.agent/skills/gsap-plugins/SKILL.md +486 -480
  118. package/.agent/skills/gsap-react/SKILL.md +202 -189
  119. package/.agent/skills/gsap-scrolltrigger/SKILL.md +357 -350
  120. package/.agent/skills/gsap-timeline/SKILL.md +165 -161
  121. package/.agent/skills/gsap-utils/SKILL.md +344 -338
  122. package/.agent/skills/harness-protocol/SKILL.md +48 -0
  123. package/.agent/skills/i18n-localization/SKILL.md +174 -163
  124. package/.agent/skills/intelligent-routing/SKILL.md +202 -246
  125. package/.agent/skills/knowledge-graph/SKILL.md +60 -52
  126. package/.agent/skills/lint-and-validate/SKILL.md +261 -261
  127. package/.agent/skills/llm-engineering/SKILL.md +400 -394
  128. package/.agent/skills/local-first/SKILL.md +178 -178
  129. package/.agent/skills/mcp-builder/SKILL.md +143 -142
  130. package/.agent/skills/mobile-design/SKILL.md +272 -263
  131. package/.agent/skills/monorepo-management/SKILL.md +335 -334
  132. package/.agent/skills/motion-engineering/SKILL.md +266 -234
  133. package/.agent/skills/nextjs-react-expert/SKILL.md +236 -234
  134. package/.agent/skills/nodejs-best-practices/SKILL.md +547 -548
  135. package/.agent/skills/observability/SKILL.md +343 -343
  136. package/.agent/skills/parallel-agents/SKILL.md +143 -146
  137. package/.agent/skills/performance-profiling/SKILL.md +259 -267
  138. package/.agent/skills/plan-writing/SKILL.md +150 -142
  139. package/.agent/skills/platform-engineer/SKILL.md +148 -147
  140. package/.agent/skills/playwright-best-practices/SKILL.md +188 -187
  141. package/.agent/skills/powershell-windows/SKILL.md +162 -162
  142. package/.agent/skills/project-idioms/SKILL.md +137 -137
  143. package/.agent/skills/python-patterns/SKILL.md +260 -259
  144. package/.agent/skills/python-pro/SKILL.md +324 -323
  145. package/.agent/skills/react-specialist/SKILL.md +305 -277
  146. package/.agent/skills/readme-builder/SKILL.md +310 -300
  147. package/.agent/skills/realtime-patterns/SKILL.md +323 -319
  148. package/.agent/skills/red-team-tactics/SKILL.md +231 -218
  149. package/.agent/skills/rust-pro/SKILL.md +671 -673
  150. package/.agent/skills/seo-fundamentals/SKILL.md +179 -179
  151. package/.agent/skills/server-management/SKILL.md +218 -214
  152. package/.agent/skills/shadcn-ui-expert/SKILL.md +231 -231
  153. package/.agent/skills/skill-creator/SKILL.md +87 -86
  154. package/.agent/skills/sql-pro/SKILL.md +629 -629
  155. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +97 -97
  156. package/.agent/skills/swiftui-expert/SKILL.md +204 -201
  157. package/.agent/skills/system-design-pro/SKILL.md +345 -0
  158. package/.agent/skills/systematic-debugging/SKILL.md +153 -142
  159. package/.agent/skills/tailwind-patterns/SKILL.md +610 -566
  160. package/.agent/skills/tdd-workflow/SKILL.md +169 -161
  161. package/.agent/skills/test-result-analyzer/SKILL.md +313 -309
  162. package/.agent/skills/testing-patterns/SKILL.md +566 -579
  163. package/.agent/skills/trend-researcher/SKILL.md +243 -237
  164. package/.agent/skills/typescript-advanced/SKILL.md +336 -335
  165. package/.agent/skills/ui-ux-pro-max/SKILL.md +590 -562
  166. package/.agent/skills/ui-ux-researcher/SKILL.md +244 -244
  167. package/.agent/skills/vue-expert/SKILL.md +294 -275
  168. package/.agent/skills/vulnerability-scanner/SKILL.md +416 -404
  169. package/.agent/skills/web-accessibility-auditor/SKILL.md +219 -218
  170. package/.agent/skills/web-design-guidelines/SKILL.md +192 -186
  171. package/.agent/skills/webapp-testing/SKILL.md +167 -169
  172. package/.agent/skills/webgpu-performance/SKILL.md +56 -2
  173. package/.agent/skills/whimsy-injector/SKILL.md +346 -325
  174. package/.agent/skills/workflow-optimizer/SKILL.md +231 -229
  175. package/.agent/workflows/acf.md +141 -0
  176. package/.agent/workflows/api-tester.md +176 -151
  177. package/.agent/workflows/audit.md +150 -127
  178. package/.agent/workflows/brainstorm.md +134 -110
  179. package/.agent/workflows/changelog.md +140 -112
  180. package/.agent/workflows/create.md +168 -124
  181. package/.agent/workflows/debug.md +190 -165
  182. package/.agent/workflows/deploy.md +201 -180
  183. package/.agent/workflows/enhance.md +154 -128
  184. package/.agent/workflows/fix.md +136 -114
  185. package/.agent/workflows/generate.md +198 -183
  186. package/.agent/workflows/marathon.md +37 -11
  187. package/.agent/workflows/migrate.md +184 -160
  188. package/.agent/workflows/orchestrate.md +192 -168
  189. package/.agent/workflows/performance-benchmarker.md +135 -114
  190. package/.agent/workflows/plan.md +196 -173
  191. package/.agent/workflows/preview.md +103 -80
  192. package/.agent/workflows/refactor.md +192 -161
  193. package/.agent/workflows/review-ai.md +125 -101
  194. package/.agent/workflows/review.md +141 -116
  195. package/.agent/workflows/session.md +122 -94
  196. package/.agent/workflows/status.md +101 -79
  197. package/.agent/workflows/strengthen-skills.md +164 -138
  198. package/.agent/workflows/super-prompt.md +24 -0
  199. package/.agent/workflows/swarm.md +193 -179
  200. package/.agent/workflows/test.md +211 -189
  201. package/.agent/workflows/tribunal-backend.md +136 -105
  202. package/.agent/workflows/tribunal-database.md +122 -95
  203. package/.agent/workflows/tribunal-frontend.md +221 -96
  204. package/.agent/workflows/tribunal-full.md +129 -100
  205. package/.agent/workflows/tribunal-mobile.md +122 -95
  206. package/.agent/workflows/tribunal-performance.md +136 -110
  207. package/.agent/workflows/tribunal-speed.md +209 -183
  208. package/.agent/workflows/ui-ux-pro-max.md +145 -122
  209. package/README.md +107 -55
  210. package/bin/mcp-server.js +159 -0
  211. package/bin/tribunal-kit.js +105 -29
  212. package/bin/wrapper.js +16 -7
  213. package/mcp_config.json +9 -0
  214. package/package.json +94 -86
  215. package/scripts/changelog.js +4 -3
  216. package/scripts/validate-payload.js +6 -1
  217. package/scripts/postinstall.js +0 -127
@@ -1,6 +1,9 @@
1
1
  ---
2
2
  name: browser-native-ai
3
3
  description: Browser-native AI mastery. Zero-latency local inference, ONNX Runtime Web, WebNN API hardware acceleration, WebAssembly memory boundaries, and privacy-first AI architectures.
4
+ routing:
5
+ domain: general
6
+ tier: basic
4
7
  ---
5
8
 
6
9
  # Browser-Native AI (Local SLMs)
@@ -8,36 +11,40 @@ description: Browser-native AI mastery. Zero-latency local inference, ONNX Runti
8
11
  You are an expert at running AI models directly on the client's device, inside the web browser. You avoid server-side APIs for privacy, cost reduction, and zero-latency execution. Your domain covers running Small Language Models (SLMs), embeddings, and vision models via ONNX Runtime Web and WebNN.
9
12
 
10
13
  ## 1. Core Principles
14
+
11
15
  - **Privacy by Default:** Data never leaves the browser. This is critical for HIPAA compliance, banking, and private notes apps.
12
16
  - **Zero-Latency:** Because the model runs in memory, token generation and text embeddings happen instantly.
13
17
  - **Hardware Acceleration First:** Always attempt to use WebGPU (`executionProviders: ['webgpu']`) or WebNN before falling back to WebAssembly (Wasm).
14
18
 
15
19
  ## 2. ONNX Runtime Web Integration
20
+
16
21
  Use `@huggingface/transformers` (Transformers.js) or `onnxruntime-web` for execution.
17
22
 
18
23
  ```typescript
19
- import { pipeline, env } from '@huggingface/transformers';
24
+ import { pipeline, env } from "@huggingface/transformers";
20
25
 
21
26
  // Use WebGPU backend for acceleration
22
27
  env.backends.onnx.wasm.numThreads = 1;
23
28
  env.allowLocalModels = false;
24
29
 
25
30
  // Instantiate an SLM or Embedding model
26
- const extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
27
- device: 'webgpu', // Fallback to 'wasm' if needed
31
+ const extractor = await pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2", {
32
+ device: "webgpu", // Fallback to 'wasm' if needed
28
33
  });
29
34
 
30
35
  // Run inference entirely offline
31
- const output = await extractor('Hello world', { pooling: 'mean', normalize: true });
36
+ const output = await extractor("Hello world", { pooling: "mean", normalize: true });
32
37
  console.log(output.data); // Float32Array embedding
33
38
  ```
34
39
 
35
40
  ## 3. Memory & Asset Management
41
+
36
42
  - **Quantization:** Only load `q4` (4-bit quantized) models into the browser to prevent crashing mobile devices. A 7B parameter model is ~4GB quantized, which is too large. Target 0.5B to 1.5B parameter models (e.g., Llama-3.2-1B, Phi-3-mini).
37
43
  - **Caching:** Cache model weights using the Origin Private File System (OPFS) or Cache API so the user only downloads the 500MB payload once.
38
44
  - **Web Workers:** AI inference blocks the main thread in Wasm mode. **Always** run inference inside a Web Worker so the UI stays 60fps.
39
45
 
40
46
  ## 4. LLM Traps & Pre-Flight Checks
47
+
41
48
  - **TRAP:** Running inference on the React main thread.
42
49
  - **FIX:** Move pipeline instantiation and execution to a `worker.js` and communicate via `postMessage`.
43
50
  - **TRAP:** Failing to handle model download progress.
@@ -46,7 +53,9 @@ console.log(output.data); // Float32Array embedding
46
53
  - **FIX:** Only request ONNX models that are specifically quantized (`_q4f16`) for web.
47
54
 
48
55
  ## Verification Protocol
56
+
49
57
  Before submitting code, ensure:
58
+
50
59
  1. `postMessage` architecture is used for non-blocking inference.
51
60
  2. WebGPU is requested as the primary execution provider.
52
61
  3. Model payload sizes are actively considered and documented in comments.
@@ -54,5 +63,49 @@ Before submitting code, ensure:
54
63
  ### 🛑 Verification-Before-Completion (VBC) Protocol
55
64
 
56
65
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
66
+
67
+ - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
68
+ - ✅ **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.
69
+
70
+ ---
71
+
72
+ ## 🤖 LLM-Specific Traps
73
+
74
+ AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
75
+
76
+ 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
77
+ 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
78
+ 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
79
+ 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
80
+ 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
81
+
82
+ ---
83
+
84
+ ## 🏛️ Tribunal Integration (Anti-Hallucination)
85
+
86
+ **Slash command: `/review` or `/tribunal-full`**
87
+ **Active reviewers: `logic-reviewer` · `security-auditor`**
88
+
89
+ ### ❌ Forbidden AI Tropes
90
+
91
+ 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
92
+ 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
93
+ 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
94
+
95
+ ### ✅ Pre-Flight Self-Audit
96
+
97
+ Review these questions before confirming output:
98
+
99
+ ```
100
+ ✅ Did I rely ONLY on real, verified tools and methods?
101
+ ✅ Is this solution appropriately scoped to the user's constraints?
102
+ ✅ Did I handle potential failure modes and edge cases?
103
+ ✅ Have I avoided generic boilerplate that doesn't add value?
104
+ ```
105
+
106
+ ### 🛑 Verification-Before-Completion (VBC) Protocol
107
+
108
+ **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
109
+
57
110
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
58
111
  - ✅ **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.
@@ -1,206 +1,204 @@
1
- ---
2
- name: building-native-ui
3
- description: Cross-platform Native UI mastery (React Native / Expo). Building seamless, 60fps mobile interfaces, handling safe areas, navigation architectures (Expo Router), native modules, gestures/animations (Reanimated), and platform-specific styling. Use when building React Native or Expo mobile apps.
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
- - ❌ `SafeAreaView` wrapping everything -> ✅ Use `SafeAreaProvider` + `useSafeAreaInsets()` for granular control
12
- - ❌ Using `ScrollView` for long lists -> ✅ `FlatList` or `FlashList` for virtualized rendering; ScrollView renders ALL items
13
- - `Dimensions.get('window')` for responsive layouts -> ✅ Use `useWindowDimensions()` hook (reactive to rotation/resize)
14
- - ❌ Animating with `Animated.timing` by default -> ✅ Use `Reanimated 3` with `useSharedValue` for 120fps worklet-based animations
15
-
16
- ---
17
-
18
-
19
- # Building Native UI — React Native & Expo Mastery
20
-
21
- A mobile app isn't a website confined to a small screen.
22
- 60 FPS is not a goal; it is a rigid requirement. The JS thread is a fragile bottleneck.
23
-
24
- ---
25
-
26
- ## 1. The Expo Router Architecture
27
-
28
- File-based routing replaces legacy imperative React Navigation boilerplates.
29
-
30
- ```typescript
31
- // Directory structure dictates routes
32
- // app/
33
- // ├── _layout.tsx (Global wrap, e.g. Stack or Tabs)
34
- // ├── index.tsx (Matches '/')
35
- // ├── (auth)/ (Route group, invisible in URL)
36
- // │ └── login.tsx (Matches '/login')
37
- // └── user/
38
- // └── [id].tsx (Dynamic route, matches '/user/123')
39
-
40
- // Link navigation (Strongly typed in Expo Router v3+)
41
- import { Link, router } from 'expo-router';
42
-
43
- export default function Home() {
44
- return (
45
- <View>
46
- {/* Declarative */}
47
- <Link href="/user/123" asChild>
48
- <Pressable><Text>Go to Profile</Text></Pressable>
49
- </Link>
50
-
51
- {/* Imperative */}
52
- <Button onPress={() => router.push('/(auth)/login')} title="Login" />
53
- </View>
54
- );
55
- }
56
- ```
57
-
58
- ---
59
-
60
- ## 2. Platform Nuances & Safe Areas
61
-
62
- Mobile devices have notches, home indicators, and varied status bars.
63
-
64
- ```typescript
65
- // BAD: Ignoring notches
66
- export const Header = () => <View style={{ paddingTop: 20 }} />
67
-
68
- // GOOD: react-native-safe-area-context
69
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
70
-
71
- export const Header = () => {
72
- const insets = useSafeAreaInsets();
73
- return (
74
- <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
75
- <Text>Header Content</Text>
76
- </View>
77
- );
78
- }
79
-
80
- // ✅ Platform-specific logic
81
- import { Platform, StyleSheet } from 'react-native';
82
-
83
- const styles = StyleSheet.create({
84
- shadow: {
85
- ...Platform.select({
86
- ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2 },
87
- android: { elevation: 4 }, // Android requires elevation for shadows
88
- }),
89
- }
90
- });
91
- ```
92
-
93
- ---
94
-
95
- ## 3. High-Performance Animations (Reanimated)
96
-
97
- Never animate over the React Native bridge. Keep animations strictly on the native UI thread using `react-native-reanimated`.
98
-
99
- ```typescript
100
- // BAD: Animated.Value across the bridge, or setState driven animations
101
- // setState -> JS Thread calculate -> Bridge JSON -> Native UI (Drops frames!)
102
-
103
- // GOOD: Reanimated UI thread execution
104
- import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
105
-
106
- export function BouncyBox() {
107
- const offset = useSharedValue(0); // Lives natively
108
-
109
- const animatedStyles = useAnimatedStyle(() => {
110
- return {
111
- transform: [{ translateY: offset.value }], // Syncs natively
112
- };
113
- });
114
-
115
- return (
116
- <>
117
- <Animated.View style={[styles.box, animatedStyles]} />
118
- <Button onPress={() => (offset.value = withSpring(Math.random() * 255))} title="Bounce" />
119
- </>
120
- );
121
- }
122
- ```
123
-
124
- ---
125
-
126
- ## 4. List Performance
127
-
128
- FlatList rendering is the #1 cause of React Native app crashes due to OOM (Out of Memory).
129
-
130
- ```typescript
131
- import { FlashList } from "@shopify/flash-list";
132
-
133
- // ❌ BAD: Standard ScrollView for massive lists
134
- // Maps every item instantly. Crashes on large data sets.
135
-
136
- // ❌ MEDIOCRE: FlatList
137
- // Blank spaces when scrolling fast due to JS thread bridge bottlenecks.
138
-
139
- // BEST: FlashList (Shopify)
140
- // Recycles views instantly like native UICollectionView / RecyclerView.
141
- export function FastList({ data }) {
142
- return (
143
- <FlashList
144
- data={data}
145
- renderItem={({ item }) => <Text>{item.title}</Text>}
146
- estimatedItemSize={50} // CRUCIAL for performance
147
- />
148
- );
149
- }
150
- ```
151
-
152
- ---
153
-
154
-
155
- ---
156
-
157
-
158
-
159
- AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
160
-
161
- 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
162
- 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
163
- 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
164
- 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
165
- 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
166
-
167
- ---
168
-
169
-
170
-
171
- **Slash command: `/review` or `/tribunal-full`**
172
- **Active reviewers: `logic-reviewer` · `security-auditor`**
173
-
174
- ### ❌ Forbidden AI Tropes
175
-
176
- 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
177
- 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
178
- 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
179
-
180
-
181
-
182
- Review these questions before confirming output:
183
- ```
184
- ✅ Did I rely ONLY on real, verified tools and methods?
185
- ✅ Is this solution appropriately scoped to the user's constraints?
186
- ✅ Did I handle potential failure modes and edge cases?
187
- ✅ Have I avoided generic boilerplate that doesn't add value?
188
- ```
189
-
190
- ### 🛑 Verification-Before-Completion (VBC) Protocol
191
-
192
- **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
193
- - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
194
- - ✅ **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.
195
-
196
-
197
- ## Pre-Flight Checklist
198
- - [ ] Have I reviewed the user's specific constraints and requests?
199
- - [ ] Have I checked the environment for relevant existing implementations?
200
-
201
- ## VBC Protocol (Verification-Before-Completion)
202
- You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
1
+ ---
2
+ name: building-native-ui
3
+ description: Cross-platform Native UI mastery (React Native / Expo). Building seamless, 60fps mobile interfaces, handling safe areas, navigation architectures (Expo Router), native modules, gestures/animations (Reanimated), and platform-specific styling. Use when building React Native or Expo mobile apps.
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
+ routing:
9
+ domain: general
10
+ tier: basic
11
+ ---
12
+
13
+ ## Hallucination Traps (Read First)
14
+
15
+ - ❌ `SafeAreaView` wrapping everything -> ✅ Use `SafeAreaProvider` + `useSafeAreaInsets()` for granular control
16
+ - ❌ Using `ScrollView` for long lists -> ✅ `FlatList` or `FlashList` for virtualized rendering; ScrollView renders ALL items
17
+ - ❌ `Dimensions.get('window')` for responsive layouts -> ✅ Use `useWindowDimensions()` hook (reactive to rotation/resize)
18
+ - ❌ Animating with `Animated.timing` by default -> ✅ Use `Reanimated 3` with `useSharedValue` for 120fps worklet-based animations
19
+
20
+ ---
21
+
22
+ # Building Native UI React Native & Expo Mastery
23
+
24
+ A mobile app isn't a website confined to a small screen.
25
+ 60 FPS is not a goal; it is a rigid requirement. The JS thread is a fragile bottleneck.
26
+
27
+ ---
28
+
29
+ ## 1. The Expo Router Architecture
30
+
31
+ File-based routing replaces legacy imperative React Navigation boilerplates.
32
+
33
+ ```typescript
34
+ // Directory structure dictates routes
35
+ // app/
36
+ // ├── _layout.tsx (Global wrap, e.g. Stack or Tabs)
37
+ // ├── index.tsx (Matches '/')
38
+ // ├── (auth)/ (Route group, invisible in URL)
39
+ // │ └── login.tsx (Matches '/login')
40
+ // └── user/
41
+ // └── [id].tsx (Dynamic route, matches '/user/123')
42
+
43
+ // Link navigation (Strongly typed in Expo Router v3+)
44
+ import { Link, router } from 'expo-router';
45
+
46
+ export default function Home() {
47
+ return (
48
+ <View>
49
+ {/* Declarative */}
50
+ <Link href="/user/123" asChild>
51
+ <Pressable><Text>Go to Profile</Text></Pressable>
52
+ </Link>
53
+
54
+ {/* Imperative */}
55
+ <Button onPress={() => router.push('/(auth)/login')} title="Login" />
56
+ </View>
57
+ );
58
+ }
59
+ ```
60
+
61
+ ---
62
+
63
+ ## 2. Platform Nuances & Safe Areas
64
+
65
+ Mobile devices have notches, home indicators, and varied status bars.
66
+
67
+ ```typescript
68
+ // BAD: Ignoring notches
69
+ export const Header = () => <View style={{ paddingTop: 20 }} />
70
+
71
+ // GOOD: react-native-safe-area-context
72
+ import { useSafeAreaInsets } from 'react-native-safe-area-context';
73
+
74
+ export const Header = () => {
75
+ const insets = useSafeAreaInsets();
76
+ return (
77
+ <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
78
+ <Text>Header Content</Text>
79
+ </View>
80
+ );
81
+ }
82
+
83
+ // Platform-specific logic
84
+ import { Platform, StyleSheet } from 'react-native';
85
+
86
+ const styles = StyleSheet.create({
87
+ shadow: {
88
+ ...Platform.select({
89
+ ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2 },
90
+ android: { elevation: 4 }, // Android requires elevation for shadows
91
+ }),
92
+ }
93
+ });
94
+ ```
95
+
96
+ ---
97
+
98
+ ## 3. High-Performance Animations (Reanimated)
99
+
100
+ Never animate over the React Native bridge. Keep animations strictly on the native UI thread using `react-native-reanimated`.
101
+
102
+ ```typescript
103
+ // BAD: Animated.Value across the bridge, or setState driven animations
104
+ // setState -> JS Thread calculate -> Bridge JSON -> Native UI (Drops frames!)
105
+
106
+ // GOOD: Reanimated UI thread execution
107
+ import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
108
+
109
+ export function BouncyBox() {
110
+ const offset = useSharedValue(0); // Lives natively
111
+
112
+ const animatedStyles = useAnimatedStyle(() => {
113
+ return {
114
+ transform: [{ translateY: offset.value }], // Syncs natively
115
+ };
116
+ });
117
+
118
+ return (
119
+ <>
120
+ <Animated.View style={[styles.box, animatedStyles]} />
121
+ <Button onPress={() => (offset.value = withSpring(Math.random() * 255))} title="Bounce" />
122
+ </>
123
+ );
124
+ }
125
+ ```
126
+
127
+ ---
128
+
129
+ ## 4. List Performance
130
+
131
+ FlatList rendering is the #1 cause of React Native app crashes due to OOM (Out of Memory).
132
+
133
+ ```typescript
134
+ import { FlashList } from "@shopify/flash-list";
135
+
136
+ // ❌ BAD: Standard ScrollView for massive lists
137
+ // Maps every item instantly. Crashes on large data sets.
138
+
139
+ // MEDIOCRE: FlatList
140
+ // Blank spaces when scrolling fast due to JS thread bridge bottlenecks.
141
+
142
+ // ✅ BEST: FlashList (Shopify)
143
+ // Recycles views instantly like native UICollectionView / RecyclerView.
144
+ export function FastList({ data }) {
145
+ return (
146
+ <FlashList
147
+ data={data}
148
+ renderItem={({ item }) => <Text>{item.title}</Text>}
149
+ estimatedItemSize={50} // CRUCIAL for performance
150
+ />
151
+ );
152
+ }
153
+ ```
154
+
155
+ ---
156
+
157
+ ---
158
+
159
+ AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
203
160
 
161
+ 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
162
+ 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
163
+ 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
164
+ 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
165
+ 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
166
+
167
+ ---
168
+
169
+ **Slash command: `/review` or `/tribunal-full`**
170
+ **Active reviewers: `logic-reviewer` · `security-auditor`**
171
+
172
+ ### ❌ Forbidden AI Tropes
173
+
174
+ 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
175
+ 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
176
+ 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
177
+
178
+ Review these questions before confirming output:
179
+
180
+ ```
181
+ ✅ Did I rely ONLY on real, verified tools and methods?
182
+ ✅ Is this solution appropriately scoped to the user's constraints?
183
+ ✅ Did I handle potential failure modes and edge cases?
184
+ ✅ Have I avoided generic boilerplate that doesn't add value?
185
+ ```
186
+
187
+ ### 🛑 Verification-Before-Completion (VBC) Protocol
188
+
189
+ **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
190
+
191
+ - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
192
+ - ✅ **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
+
194
+ ## Pre-Flight Checklist
195
+
196
+ - [ ] Have I reviewed the user's specific constraints and requests?
197
+ - [ ] Have I checked the environment for relevant existing implementations?
198
+
199
+ ## VBC Protocol (Verification-Before-Completion)
200
+
201
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
204
202
 
205
203
  ---
206
204
 
@@ -230,6 +228,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
230
228
  ### ✅ Pre-Flight Self-Audit
231
229
 
232
230
  Review these questions before confirming output:
231
+
233
232
  ```
234
233
  ✅ Did I rely ONLY on real, verified tools and methods?
235
234
  ✅ Is this solution appropriately scoped to the user's constraints?
@@ -240,5 +239,6 @@ Review these questions before confirming output:
240
239
  ### 🛑 Verification-Before-Completion (VBC) Protocol
241
240
 
242
241
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
242
+
243
243
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
244
244
  - ✅ **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.