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.
- package/.agent/.shared/ui-ux-pro-max/README.md +4 -4
- package/.agent/ARCHITECTURE.md +279 -277
- package/.agent/GEMINI.md +127 -121
- 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 +654 -0
- package/.agent/rules/GEMINI.md +358 -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/doc.md +209 -177
- package/.agent/skills/documentation-templates/SKILL.md +291 -279
- package/.agent/skills/edge-computing/SKILL.md +183 -181
- 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/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 +122 -95
- package/.agent/workflows/tribunal-frontend.md +221 -96
- package/.agent/workflows/tribunal-full.md +129 -100
- package/.agent/workflows/tribunal-mobile.md +122 -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 +145 -122
- package/README.md +107 -55
- package/bin/mcp-server.js +159 -0
- package/bin/tribunal-kit.js +105 -29
- package/bin/wrapper.js +16 -7
- package/mcp_config.json +9 -0
- package/package.json +94 -86
- package/scripts/changelog.js +4 -3
- package/scripts/validate-payload.js +6 -1
- 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
|
|
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(
|
|
27
|
-
device:
|
|
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(
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
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
|
-
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.
|