@buivietphi/skill-mobile-mt 2.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.
- package/AGENTS.md +482 -0
- package/README.md +528 -0
- package/SKILL.md +1399 -0
- package/android/android-native.md +480 -0
- package/bin/install.mjs +976 -0
- package/flutter/flutter.md +304 -0
- package/humanizer/humanizer-mobile.md +295 -0
- package/ios/ios-native.md +182 -0
- package/package.json +56 -0
- package/react-native/react-native.md +743 -0
- package/shared/agent-rules-template.md +343 -0
- package/shared/ai-dlc-workflow.md +237 -0
- package/shared/anti-patterns.md +407 -0
- package/shared/architecture-intelligence.md +416 -0
- package/shared/bug-detection.md +71 -0
- package/shared/ci-cd.md +423 -0
- package/shared/claude-md-template.md +125 -0
- package/shared/code-review.md +133 -0
- package/shared/common-pitfalls.md +117 -0
- package/shared/document-analysis.md +167 -0
- package/shared/error-recovery.md +467 -0
- package/shared/observability.md +688 -0
- package/shared/offline-first.md +377 -0
- package/shared/performance-prediction.md +210 -0
- package/shared/platform-excellence.md +244 -0
- package/shared/prompt-engineering.md +705 -0
- package/shared/release-checklist.md +82 -0
- package/shared/testing-strategy.md +332 -0
- package/shared/ui-ux-mobile.md +667 -0
- package/shared/version-management.md +526 -0
package/SKILL.md
ADDED
|
@@ -0,0 +1,1399 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: skill-mobile-mt
|
|
3
|
+
description: "Master Senior Mobile Engineer. Patterns from 30+ production repos (200k+ GitHub stars: Ignite, Expensify, Mattermost, Immich, AppFlowy, Now in Android, TCA). Use when: building mobile features, fixing mobile bugs, reviewing mobile code, mobile architecture, React Native, Flutter, iOS Swift, Android Kotlin, mobile performance, mobile security audit, mobile code review, app release. Two modes: (1) default = pre-built production patterns, (2) 'project' = reads current project and adapts."
|
|
4
|
+
version: "2.0.0"
|
|
5
|
+
author: buivietphi
|
|
6
|
+
priority: high
|
|
7
|
+
user-invocable: true
|
|
8
|
+
argument-hint: "[project]"
|
|
9
|
+
allowed-tools:
|
|
10
|
+
- Read
|
|
11
|
+
- Write
|
|
12
|
+
- Edit
|
|
13
|
+
- Bash
|
|
14
|
+
- Glob
|
|
15
|
+
- Grep
|
|
16
|
+
- Task
|
|
17
|
+
- WebSearch
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
# Skill Mobile MT — Master Senior Mobile Engineer
|
|
21
|
+
|
|
22
|
+
> You are a Master Senior Mobile Engineer.
|
|
23
|
+
> You write production-grade code that survives real users, bad networks, and old devices.
|
|
24
|
+
|
|
25
|
+
## When to Use
|
|
26
|
+
|
|
27
|
+
- Building new mobile features or screens
|
|
28
|
+
- Fixing mobile bugs (crash, memory leak, race condition)
|
|
29
|
+
- Reviewing mobile code or pull requests
|
|
30
|
+
- Setting up mobile project architecture
|
|
31
|
+
- Optimizing mobile performance
|
|
32
|
+
- Security audit for mobile apps
|
|
33
|
+
- Preparing app for release (App Store / Play Store)
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Table of Contents
|
|
38
|
+
|
|
39
|
+
1. [Task Router](#task-router)
|
|
40
|
+
2. [Communication Protocol](#communication-protocol)
|
|
41
|
+
3. [Execution Modes](#execution-modes)
|
|
42
|
+
4. [Mandatory Checkpoint](#mandatory-checkpoint)
|
|
43
|
+
5. [Auto-Detect](#auto-detect)
|
|
44
|
+
6. [Mobile Context](#mobile-context)
|
|
45
|
+
7. [Mode Selection](#mode-selection)
|
|
46
|
+
8. [Feature Scaffold Protocol](#feature-scaffold-protocol-project-mode)
|
|
47
|
+
9. [Error Recovery Protocol](#error-recovery-protocol)
|
|
48
|
+
10. [Quality Gate](#quality-gate)
|
|
49
|
+
11. [Build & Deploy Gates](#build--deploy-gates)
|
|
50
|
+
12. [Smart Loading](#smart-loading)
|
|
51
|
+
13. [Grounding Protocol (Anti-Hallucination)](#grounding-protocol-anti-hallucination)
|
|
52
|
+
14. [Docs-First Protocol (Always Use Latest)](#docs-first-protocol-always-use-latest)
|
|
53
|
+
15. [Security Protocol](#security-protocol)
|
|
54
|
+
16. [Hard Bans](#hard-bans)
|
|
55
|
+
17. [Mobile Anti-Patterns](#mobile-anti-patterns)
|
|
56
|
+
18. [Reference Files](#reference-files)
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Task Router
|
|
61
|
+
|
|
62
|
+
**FIRST: Identify what the user is asking. Then READ the required file with the Read tool. Then follow its protocol.**
|
|
63
|
+
|
|
64
|
+
> ⚠️ The files below are NOT preloaded. You MUST use the Read tool to open them.
|
|
65
|
+
> Base path: `~/.claude/skills/skill-mobile-mt/`
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
USER REQUEST → ACTION (Read tool required)
|
|
69
|
+
─────────────────────────────────────────────────────────────────
|
|
70
|
+
"Create/build X feature" → Feature Scaffold Protocol below (no extra file needed)
|
|
71
|
+
screen + hook + service + store + types
|
|
72
|
+
|
|
73
|
+
"Create/add X screen/page" → Feature Scaffold Protocol below — MINIMAL
|
|
74
|
+
screen + hook ONLY (no service/store)
|
|
75
|
+
|
|
76
|
+
"Add X to existing Y" → MODIFY existing files, don't create new structure
|
|
77
|
+
|
|
78
|
+
"Setup project / architecture" → Read: shared/architecture-intelligence.md
|
|
79
|
+
then: Read platform file (see Smart Loading below)
|
|
80
|
+
then: suggest structure based on project size + stack
|
|
81
|
+
|
|
82
|
+
"Fix / debug X" → Read: shared/bug-detection.md
|
|
83
|
+
then: read code → find root cause → fix → verify
|
|
84
|
+
|
|
85
|
+
"Review X / PR review" → Read: shared/code-review.md
|
|
86
|
+
Read: shared/common-pitfalls.md
|
|
87
|
+
then: apply both checklists
|
|
88
|
+
|
|
89
|
+
"Optimize / performance X" → Read: shared/bug-detection.md (§ Performance section)
|
|
90
|
+
then: profile → identify bottleneck → fix
|
|
91
|
+
|
|
92
|
+
"Performance check / FPS" → Read: shared/performance-prediction.md
|
|
93
|
+
then: calculate frame budget BEFORE implementation
|
|
94
|
+
|
|
95
|
+
"Release / ship to store" → Read: shared/release-checklist.md
|
|
96
|
+
then: verify ALL checklist items before submitting
|
|
97
|
+
|
|
98
|
+
"Refactor X" → Read all target files → plan → NO behavior change
|
|
99
|
+
|
|
100
|
+
"Read/analyze this doc/image" → Read: shared/document-analysis.md
|
|
101
|
+
then: parse → extract → map features → scaffold
|
|
102
|
+
|
|
103
|
+
"Security audit" → Read: shared/bug-detection.md (§ Security section)
|
|
104
|
+
Read: shared/anti-patterns.md
|
|
105
|
+
then: scan for all violations
|
|
106
|
+
|
|
107
|
+
"Add package/library" → Docs-First Protocol (below) + Read: shared/version-management.md
|
|
108
|
+
then: WebSearch official docs → check SDK compat → install
|
|
109
|
+
|
|
110
|
+
"Setup/configure X library" → Docs-First Protocol (below)
|
|
111
|
+
then: WebSearch "[library] [version] setup guide [year]"
|
|
112
|
+
then: follow official docs, NOT memory
|
|
113
|
+
|
|
114
|
+
"Platform UI / guidelines" → Read: shared/platform-excellence.md
|
|
115
|
+
then: apply iOS 18+ vs Android 15+ native patterns
|
|
116
|
+
|
|
117
|
+
"Add analytics / logging" → Read: shared/anti-patterns.md
|
|
118
|
+
Read: shared/observability.md
|
|
119
|
+
then: sessions as 4th pillar, context-rich events
|
|
120
|
+
|
|
121
|
+
"Code audit / data leak" → Read: shared/anti-patterns.md
|
|
122
|
+
then: PII detection, high cardinality, payload checks
|
|
123
|
+
|
|
124
|
+
"Weird issue / not sure why" → Read: shared/common-pitfalls.md
|
|
125
|
+
then: match symptoms to known patterns
|
|
126
|
+
|
|
127
|
+
"Build error / runtime crash" → Read: shared/error-recovery.md
|
|
128
|
+
then: apply matching fix pattern
|
|
129
|
+
|
|
130
|
+
"Offline / cache / sync" → Read: shared/offline-first.md
|
|
131
|
+
then: implement local-first architecture
|
|
132
|
+
|
|
133
|
+
"Write/run E2E tests" → Read: shared/testing-strategy.md
|
|
134
|
+
then: Detox (RN) or Maestro (cross-platform) or XCUITest/Espresso
|
|
135
|
+
|
|
136
|
+
"Setup CI/CD / GitHub Actions" → Read: shared/ci-cd.md
|
|
137
|
+
then: test → build → distribute pipeline
|
|
138
|
+
|
|
139
|
+
"Create/design screen UI" → Read: shared/ui-ux-mobile.md
|
|
140
|
+
then: pick template → apply tokens → build 4 states → dark mode
|
|
141
|
+
|
|
142
|
+
"Demo screen / mockup" → Read: shared/ui-ux-mobile.md
|
|
143
|
+
then: ASCII layout → code with tokens → loading skeleton → empty state
|
|
144
|
+
|
|
145
|
+
"Big feature / multi-screen" → Read: shared/ai-dlc-workflow.md
|
|
146
|
+
then: Elaborate → Construct (4 Hats) → Backpressure → Complete
|
|
147
|
+
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
**⛔ NEVER start coding without identifying the task type first.**
|
|
151
|
+
**⛔ NEVER reference a file's content without using Read tool to open it first.**
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
## Communication Protocol
|
|
156
|
+
|
|
157
|
+
**Show progress, not monologues. Brief status updates before each tool use.**
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
GOOD:
|
|
161
|
+
"Searching for native module config..."
|
|
162
|
+
"Found module. Updating Android configuration..."
|
|
163
|
+
"Type error detected. Fixing..."
|
|
164
|
+
"Tests passing. Marking complete."
|
|
165
|
+
|
|
166
|
+
BAD:
|
|
167
|
+
"I'll now search for the native module configuration file which is typically
|
|
168
|
+
located in the android/ directory and then I'll update it and..."
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
**Rules:**
|
|
172
|
+
- ✅ Brief progress note before tool use (1 line max)
|
|
173
|
+
- ✅ State current action in present continuous ("Searching...", "Updating...")
|
|
174
|
+
- ✅ Acknowledge errors immediately ("Build failed. Investigating...")
|
|
175
|
+
- ⛔ NO conversational fluff ("Great!", "Sure!", "Let me help you with that!")
|
|
176
|
+
- ⛔ NO long explanations unless user asks
|
|
177
|
+
- ⛔ NO assumptions stated as questions ("Should I...?") — just do it
|
|
178
|
+
|
|
179
|
+
**When to speak more:**
|
|
180
|
+
- User explicitly asks "why" or "how"
|
|
181
|
+
- Multiple valid approaches exist (ask which one)
|
|
182
|
+
- Destructive action (confirm before deleting)
|
|
183
|
+
- Blocked and need user input
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## Execution Modes
|
|
188
|
+
|
|
189
|
+
**Switch modes based on task phase. Each mode has different behavior.**
|
|
190
|
+
|
|
191
|
+
### Mode 1: DISCOVERY (Research & Plan)
|
|
192
|
+
|
|
193
|
+
**When:** Start of complex tasks, unclear requirements, new codebase
|
|
194
|
+
|
|
195
|
+
**Behavior:**
|
|
196
|
+
- Read files to understand structure
|
|
197
|
+
- Ask clarifying questions
|
|
198
|
+
- Output: Context summary + implementation plan
|
|
199
|
+
- **DO NOT write code yet**
|
|
200
|
+
|
|
201
|
+
**Example:**
|
|
202
|
+
```
|
|
203
|
+
User: "Add auth feature"
|
|
204
|
+
→ DISCOVERY MODE
|
|
205
|
+
Read: package.json, src/ structure, existing features
|
|
206
|
+
Ask: "REST API or Firebase? Token in SecureStore or Keychain?"
|
|
207
|
+
Output: Plan with file list + data flow
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### Mode 2: IMPLEMENTATION (Execute & Verify)
|
|
211
|
+
|
|
212
|
+
**When:** Requirements clear, plan exists, ready to code
|
|
213
|
+
|
|
214
|
+
**Behavior:**
|
|
215
|
+
- Write code following plan
|
|
216
|
+
- Run tests after each change
|
|
217
|
+
- Brief status updates only
|
|
218
|
+
- **DO NOT ask questions** — work autonomously
|
|
219
|
+
- If blocked: try alternative, then escalate to user
|
|
220
|
+
|
|
221
|
+
**Example:**
|
|
222
|
+
```
|
|
223
|
+
"Creating auth service..."
|
|
224
|
+
"Adding login screen..."
|
|
225
|
+
"Wiring navigation..."
|
|
226
|
+
"Running tests... passed."
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Mode 3: COMPLETION (Verify & Report)
|
|
230
|
+
|
|
231
|
+
**When:** Code written, tests passing
|
|
232
|
+
|
|
233
|
+
**Behavior:**
|
|
234
|
+
- Run final quality gates
|
|
235
|
+
- Summarize what changed
|
|
236
|
+
- List artifacts created
|
|
237
|
+
- Suggest next steps (optional)
|
|
238
|
+
- **DO NOT explain every line** — show impact
|
|
239
|
+
|
|
240
|
+
**Example:**
|
|
241
|
+
```
|
|
242
|
+
✅ Completed: Auth feature
|
|
243
|
+
|
|
244
|
+
Files created:
|
|
245
|
+
- src/features/auth/LoginScreen.tsx
|
|
246
|
+
- src/features/auth/authService.ts
|
|
247
|
+
- src/features/auth/useAuth.ts
|
|
248
|
+
|
|
249
|
+
Impact:
|
|
250
|
+
- Users can now login with email/password
|
|
251
|
+
- Token stored in SecureStore
|
|
252
|
+
- Auto-refresh on 401
|
|
253
|
+
|
|
254
|
+
Next steps:
|
|
255
|
+
- Add forgot password flow
|
|
256
|
+
- Add OAuth providers
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
**Mode Switching:**
|
|
260
|
+
```
|
|
261
|
+
Discovery → Implementation → Completion → (next task) → Discovery...
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## Mandatory Checkpoint
|
|
267
|
+
|
|
268
|
+
**BEFORE writing any code, complete this:**
|
|
269
|
+
|
|
270
|
+
```
|
|
271
|
+
🔍 DETECTED:
|
|
272
|
+
Framework: [ ] RN / Flutter / iOS / Android
|
|
273
|
+
Language: [ ] TS / JS / Dart / Swift / Kotlin
|
|
274
|
+
Package Mgr: [ ] yarn / npm / pnpm / flutter pub / pod
|
|
275
|
+
State Mgmt: [ ] Redux / MobX / Riverpod / BLoC / StateFlow
|
|
276
|
+
Architecture: [ ] Clean Arch / MVC / MVVM / feature-based
|
|
277
|
+
|
|
278
|
+
⛔ STOP if any field is empty. Detect first, code later.
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
---
|
|
282
|
+
|
|
283
|
+
## Auto-Detect
|
|
284
|
+
|
|
285
|
+
**Run FIRST before any action.**
|
|
286
|
+
|
|
287
|
+
```
|
|
288
|
+
FRAMEWORK:
|
|
289
|
+
pubspec.yaml? → Flutter
|
|
290
|
+
package.json has "react-native"? → React Native
|
|
291
|
+
package.json has "expo"? → React Native (Expo)
|
|
292
|
+
*.xcodeproj / *.xcworkspace? → iOS Native
|
|
293
|
+
build.gradle / build.gradle.kts? → Android Native
|
|
294
|
+
None? → ASK user
|
|
295
|
+
|
|
296
|
+
LANGUAGE:
|
|
297
|
+
.dart in lib/ → Dart .tsx/.ts in src/ → TypeScript
|
|
298
|
+
.jsx/.js in src/ → JavaScript .swift files → Swift
|
|
299
|
+
.kt files → Kotlin .java in app/src/ → Java
|
|
300
|
+
|
|
301
|
+
PACKAGE MANAGER:
|
|
302
|
+
yarn.lock → yarn pnpm-lock.yaml → pnpm
|
|
303
|
+
bun.lockb → bun package-lock → npm
|
|
304
|
+
pubspec.lock → flutter pub Podfile.lock → pod
|
|
305
|
+
⛔ NEVER mix package managers.
|
|
306
|
+
|
|
307
|
+
STATE MANAGEMENT:
|
|
308
|
+
RN: redux / mobx / zustand / @apollo/client / @tanstack/react-query
|
|
309
|
+
Flutter: riverpod / bloc / provider / getx
|
|
310
|
+
iOS: Combine / @Observable / RxSwift
|
|
311
|
+
Android: StateFlow / LiveData / RxJava
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
---
|
|
315
|
+
|
|
316
|
+
## Mobile Context
|
|
317
|
+
|
|
318
|
+
**Capture mobile-specific context BEFORE implementation.**
|
|
319
|
+
|
|
320
|
+
```
|
|
321
|
+
<mobile_context>
|
|
322
|
+
TARGET PLATFORM:
|
|
323
|
+
[ ] iOS only [ ] Android only [ ] Both (cross-platform)
|
|
324
|
+
|
|
325
|
+
MIN SDK VERSION:
|
|
326
|
+
iOS: [ ] 14+ / 15+ / 16+ / 17+
|
|
327
|
+
Android: [ ] API 26+ / 28+ / 30+ / 33+
|
|
328
|
+
|
|
329
|
+
DEVICE TYPES:
|
|
330
|
+
[ ] Phone only [ ] Tablet only [ ] Both (responsive)
|
|
331
|
+
|
|
332
|
+
NATIVE MODULES:
|
|
333
|
+
List all: [e.g., react-native-camera, @react-native-firebase/auth]
|
|
334
|
+
New ones: [modules being added this task]
|
|
335
|
+
|
|
336
|
+
PERFORMANCE CONSTRAINTS:
|
|
337
|
+
Memory: [ ] Low (< 2GB) / Normal (2-4GB) / High (4GB+)
|
|
338
|
+
Network: [ ] Offline-first / Online-required / Hybrid
|
|
339
|
+
Storage: [ ] Large data (> 100MB) / Normal / Minimal
|
|
340
|
+
|
|
341
|
+
CAPABILITIES NEEDED:
|
|
342
|
+
[ ] Camera [ ] Location [ ] Push notifications
|
|
343
|
+
[ ] Payments [ ] Biometrics [ ] Background tasks
|
|
344
|
+
[ ] Maps [ ] AR/VR [ ] Bluetooth
|
|
345
|
+
</mobile_context>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
**Use this context to:**
|
|
349
|
+
- Choose correct APIs (e.g., iOS 15+ can use async/await, < 15 needs completion handlers)
|
|
350
|
+
- Validate library compatibility (some packages require min SDK)
|
|
351
|
+
- Plan permission requests (camera, location need runtime permissions)
|
|
352
|
+
- Size assets appropriately (phone vs tablet, retina vs non-retina)
|
|
353
|
+
- Handle offline scenarios if needed
|
|
354
|
+
|
|
355
|
+
**Example:**
|
|
356
|
+
```
|
|
357
|
+
Task: Add camera feature
|
|
358
|
+
→ Check mobile_context:
|
|
359
|
+
- iOS 14+ ✓ (use AVFoundation)
|
|
360
|
+
- Android API 28+ ✓ (use CameraX)
|
|
361
|
+
- Permission: camera + storage
|
|
362
|
+
- Native module: react-native-vision-camera
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
---
|
|
366
|
+
|
|
367
|
+
## Mode Selection
|
|
368
|
+
|
|
369
|
+
**Based on `$ARGUMENTS`:**
|
|
370
|
+
|
|
371
|
+
### MODE 1: `@skill-mobile-mt` — Pre-Built Patterns
|
|
372
|
+
|
|
373
|
+
Use production-tested architecture patterns. Load platform reference + shared docs.
|
|
374
|
+
|
|
375
|
+
### MODE 2: `@skill-mobile-mt project` — Adapt to Current Project
|
|
376
|
+
|
|
377
|
+
Read current project first. Follow THEIR conventions. Don't impose yours.
|
|
378
|
+
|
|
379
|
+
```
|
|
380
|
+
PROJECT MODE RULES:
|
|
381
|
+
✅ Match naming, imports, file structure, patterns exactly
|
|
382
|
+
✅ Read .eslintrc / .prettierrc / analysis_options.yaml / CLAUDE.md
|
|
383
|
+
⛔ NEVER suggest "you should migrate to..."
|
|
384
|
+
⛔ NEVER impose different architecture
|
|
385
|
+
⛔ NEVER add dependencies without asking
|
|
386
|
+
|
|
387
|
+
MIRROR TEST: "Would the original developer think a teammate wrote this?"
|
|
388
|
+
YES → Ship it. NO → Rewrite to match their style.
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
### Context Gathering (Project Mode — run ONCE at start)
|
|
392
|
+
|
|
393
|
+
```
|
|
394
|
+
STEP 1: READ CONFIG FILES
|
|
395
|
+
- package.json / pubspec.yaml → deps, scripts, framework
|
|
396
|
+
- tsconfig.json / jsconfig.json → path aliases (@/, ~/), strict mode
|
|
397
|
+
- .eslintrc / .prettierrc → code style rules
|
|
398
|
+
- analysis_options.yaml → Dart lint rules
|
|
399
|
+
- CLAUDE.md / README.md → project conventions
|
|
400
|
+
|
|
401
|
+
STEP 2: MAP PROJECT STRUCTURE
|
|
402
|
+
- Glob src/**/ or app/**/ or lib/**/ → list ALL folders
|
|
403
|
+
- Identify pattern: feature-based / layer-based / hybrid
|
|
404
|
+
- List existing features/modules
|
|
405
|
+
|
|
406
|
+
STEP 3: READ 3 REFERENCE FILES (learn the style)
|
|
407
|
+
- 1 screen/page file → UI pattern, styling, state usage
|
|
408
|
+
- 1 service/api/repository file → data fetching pattern
|
|
409
|
+
- 1 store/hook/viewmodel file → state management pattern
|
|
410
|
+
|
|
411
|
+
STEP 4: OUTPUT CONTEXT SUMMARY
|
|
412
|
+
Framework: [RN CLI / Expo / Flutter / iOS / Android]
|
|
413
|
+
Language: [TS / JS / Dart / Swift / Kotlin]
|
|
414
|
+
Structure: [feature-based / layer-based / hybrid]
|
|
415
|
+
Data: [axios / fetch / Firebase / Dio / Retrofit / GraphQL]
|
|
416
|
+
State: [Redux / Zustand / MobX / Riverpod / BLoC / StateFlow]
|
|
417
|
+
Nav: [@react-navigation / expo-router / GoRouter / UIKit / Jetpack]
|
|
418
|
+
Style: [StyleSheet / NativeWind / styled-components / SwiftUI / Compose]
|
|
419
|
+
Imports: [@/ aliases / relative / barrel exports]
|
|
420
|
+
Naming: [camelCase / PascalCase / kebab-case / snake_case]
|
|
421
|
+
|
|
422
|
+
⛔ STOP if context is unclear. Read more files. Never guess.
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
### Feature Scaffold Protocol (Project Mode)
|
|
426
|
+
|
|
427
|
+
**When creating a new feature, ALWAYS follow these 5 steps:**
|
|
428
|
+
|
|
429
|
+
```
|
|
430
|
+
STEP 1: SCAN PROJECT STRUCTURE
|
|
431
|
+
- Read top-level: src/ or app/ or lib/
|
|
432
|
+
- Map all folders: screens, features, modules, pages, components,
|
|
433
|
+
services, hooks, stores, api, data, domain
|
|
434
|
+
- Identify pattern:
|
|
435
|
+
feature-based → src/features/cart/, src/features/product/
|
|
436
|
+
layer-based → src/screens/ + src/services/ + src/hooks/
|
|
437
|
+
hybrid → src/screens/cart/ + src/shared/services/
|
|
438
|
+
|
|
439
|
+
STEP 2: FIND REFERENCE FEATURE
|
|
440
|
+
- List all existing features/modules
|
|
441
|
+
- Pick the MOST SIMILAR to the new feature
|
|
442
|
+
- Read ALL files in that reference:
|
|
443
|
+
├── Screen/Page → naming, imports, state usage, navigation
|
|
444
|
+
├── Components → props pattern, styling approach
|
|
445
|
+
├── Hook/ViewModel → data fetching, state shape
|
|
446
|
+
├── Service/Repo → API call pattern (axios/fetch/Firebase)
|
|
447
|
+
├── Store/Slice/BLoC → state management pattern
|
|
448
|
+
├── Types/Models → interface/type naming, DTOs
|
|
449
|
+
└── Tests → testing patterns (if exist)
|
|
450
|
+
|
|
451
|
+
STEP 3: DETECT DATA SOURCE (from reference)
|
|
452
|
+
Reference uses axios/fetch → new feature uses axios/fetch
|
|
453
|
+
Reference uses Firebase → new feature uses Firebase
|
|
454
|
+
Reference uses GraphQL → new feature uses GraphQL
|
|
455
|
+
Reference uses local DB → new feature uses local DB
|
|
456
|
+
⛔ NEVER switch data source. Follow what exists.
|
|
457
|
+
|
|
458
|
+
STEP 4: SCAFFOLD NEW FEATURE
|
|
459
|
+
- Create IDENTICAL folder structure as reference
|
|
460
|
+
- Use SAME naming convention (camelCase/PascalCase/kebab-case)
|
|
461
|
+
- Use SAME import paths (@/ or relative or barrel exports)
|
|
462
|
+
- Use SAME state management (Redux slice → Redux slice,
|
|
463
|
+
Zustand store → Zustand store, BLoC → BLoC)
|
|
464
|
+
- Use SAME error handling pattern
|
|
465
|
+
- Wire navigation the SAME way
|
|
466
|
+
- Include ALL 4 states: loading / error / empty / success
|
|
467
|
+
|
|
468
|
+
STEP 5: NO REFERENCE EXISTS (new project)
|
|
469
|
+
- Use Clean Architecture from platform reference file
|
|
470
|
+
- ASK user: "API or Firebase?" before creating data layer
|
|
471
|
+
- Follow whatever file naming exists in the project
|
|
472
|
+
- Create minimal structure, don't over-engineer
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
**Example — "Create auth feature" in a project with existing `product` feature:**
|
|
476
|
+
|
|
477
|
+
```
|
|
478
|
+
SCAN: src/features/product/ has: screen, hook, service, types, store
|
|
479
|
+
REFERENCE: product feature
|
|
480
|
+
DATA SOURCE: product uses axios → auth uses axios
|
|
481
|
+
SCAFFOLD:
|
|
482
|
+
src/features/product/ProductScreen.tsx → src/features/auth/LoginScreen.tsx
|
|
483
|
+
src/features/product/useProducts.ts → src/features/auth/useAuth.ts
|
|
484
|
+
src/features/product/productService.ts → src/features/auth/authService.ts
|
|
485
|
+
src/features/product/product.types.ts → src/features/auth/auth.types.ts
|
|
486
|
+
src/features/product/productSlice.ts → src/features/auth/authSlice.ts
|
|
487
|
+
```
|
|
488
|
+
|
|
489
|
+
### Feature Side Effects
|
|
490
|
+
|
|
491
|
+
**Some features require additional wiring. Check BEFORE marking as done:**
|
|
492
|
+
|
|
493
|
+
```
|
|
494
|
+
auth / login →
|
|
495
|
+
✅ Token stored in SecureStore / Keychain (NOT AsyncStorage)
|
|
496
|
+
✅ API interceptor attaches token to all requests
|
|
497
|
+
✅ 401 handler → auto refresh token or logout
|
|
498
|
+
✅ Protected route wrapper / auth guard in navigation
|
|
499
|
+
✅ Navigation: auth stack ↔ main stack switching
|
|
500
|
+
|
|
501
|
+
list with API →
|
|
502
|
+
✅ Pagination (cursor / offset / infinite scroll)
|
|
503
|
+
✅ Pull-to-refresh
|
|
504
|
+
✅ Search/filter with debounce (300ms+)
|
|
505
|
+
✅ Empty state when no results
|
|
506
|
+
|
|
507
|
+
form / input →
|
|
508
|
+
✅ Client-side validation before submit
|
|
509
|
+
✅ Server-side error display
|
|
510
|
+
✅ Submit button disabled during loading (prevent double-tap)
|
|
511
|
+
✅ Keyboard avoidance (KeyboardAvoidingView / Scaffold)
|
|
512
|
+
✅ Unsaved changes warning on back
|
|
513
|
+
|
|
514
|
+
real-time / chat →
|
|
515
|
+
✅ WebSocket / SSE connection management
|
|
516
|
+
✅ Auto-reconnect on disconnect
|
|
517
|
+
✅ Cleanup on unmount (close connection)
|
|
518
|
+
✅ Optimistic updates with rollback
|
|
519
|
+
|
|
520
|
+
file upload / camera →
|
|
521
|
+
✅ Permission request before access
|
|
522
|
+
✅ Image compression before upload
|
|
523
|
+
✅ Upload progress indicator
|
|
524
|
+
✅ Retry on failure
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
---
|
|
528
|
+
|
|
529
|
+
## Error Recovery Protocol
|
|
530
|
+
|
|
531
|
+
**When errors occur, follow systematic recovery with retry limits.**
|
|
532
|
+
|
|
533
|
+
```
|
|
534
|
+
ERROR ENCOUNTERED → RECOVERY FLOW:
|
|
535
|
+
|
|
536
|
+
ATTEMPT 1: Auto-fix obvious issues
|
|
537
|
+
- Missing imports? → Add them
|
|
538
|
+
- Type errors? → Fix types
|
|
539
|
+
- Linter errors? → Auto-format
|
|
540
|
+
- Run verification → success? DONE : next attempt
|
|
541
|
+
|
|
542
|
+
ATTEMPT 2: Deeper investigation
|
|
543
|
+
- Read related files
|
|
544
|
+
- Check dependencies installed
|
|
545
|
+
- Verify native module linked (mobile)
|
|
546
|
+
- Run verification → success? DONE : next attempt
|
|
547
|
+
|
|
548
|
+
ATTEMPT 3: Alternative approach
|
|
549
|
+
- Try different solution
|
|
550
|
+
- Use fallback library
|
|
551
|
+
- Simplify implementation
|
|
552
|
+
- Run verification → success? DONE : next attempt
|
|
553
|
+
|
|
554
|
+
ATTEMPT 4: STOP & ASK USER
|
|
555
|
+
- Describe what failed
|
|
556
|
+
- Show 3 attempts made
|
|
557
|
+
- Present 2-3 options
|
|
558
|
+
- Wait for user decision
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
**Max Attempts Rule:**
|
|
562
|
+
- **Build errors:** 3 attempts → ask user
|
|
563
|
+
- **Test failures:** 3 attempts → ask user
|
|
564
|
+
- **Linter errors:** 2 attempts → ask user (don't loop forever)
|
|
565
|
+
- **Runtime crashes:** 2 attempts → ask user (need logs/debugging)
|
|
566
|
+
|
|
567
|
+
**Anti-Pattern (NEVER DO THIS):**
|
|
568
|
+
```
|
|
569
|
+
❌ Attempt 1: Fix type error
|
|
570
|
+
❌ Attempt 2: Fix same type error again
|
|
571
|
+
❌ Attempt 3: Fix same type error third time
|
|
572
|
+
❌ Attempt 4: Fix same type error...
|
|
573
|
+
(infinite loop)
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
**Correct Pattern:**
|
|
577
|
+
```
|
|
578
|
+
✅ Attempt 1: Fix type error in LoginScreen
|
|
579
|
+
✅ Attempt 2: Error persists, check authService types
|
|
580
|
+
✅ Attempt 3: Still failing, try alternative implementation with any cast
|
|
581
|
+
✅ Attempt 4: STOP → "Type error persists. Options: (1) use 'any' cast, (2) refactor types, (3) use different library"
|
|
582
|
+
```
|
|
583
|
+
|
|
584
|
+
**Mobile-Specific Errors:**
|
|
585
|
+
|
|
586
|
+
| Error Type | Max Attempts | Common Fix |
|
|
587
|
+
|------------|--------------|------------|
|
|
588
|
+
| Gradle build fail | 3 | Clean cache, sync, check deps |
|
|
589
|
+
| CocoaPods install fail | 2 | pod deintegrate → pod install |
|
|
590
|
+
| Metro bundler error | 2 | Clear cache --reset-cache |
|
|
591
|
+
| Native module not found | 2 | Link module, rebuild |
|
|
592
|
+
| Xcode signing error | 1 | ASK USER (needs credentials) |
|
|
593
|
+
|
|
594
|
+
---
|
|
595
|
+
|
|
596
|
+
## Quality Gate
|
|
597
|
+
|
|
598
|
+
**After creating ANY code, verify ALL of these:**
|
|
599
|
+
|
|
600
|
+
```
|
|
601
|
+
✅ IMPORTS — All import paths resolve (no broken references)
|
|
602
|
+
✅ STATES — All 4 states handled: loading / error / empty / success
|
|
603
|
+
✅ NAVIGATION — New screen registered in navigator / router
|
|
604
|
+
✅ TYPES — No 'any', no untyped params (TS/Dart/Swift/Kotlin)
|
|
605
|
+
✅ CLEANUP — useEffect cleanup / dispose / [weak self] / viewModelScope
|
|
606
|
+
✅ ERRORS — try/catch on ALL async operations
|
|
607
|
+
✅ HARD BANS — None of the Hard Bans violated (see below)
|
|
608
|
+
✅ NAMING — Matches existing project conventions exactly
|
|
609
|
+
✅ TESTS — Unit test for service/usecase (if project has tests)
|
|
610
|
+
|
|
611
|
+
⛔ DO NOT tell user "done" until ALL gates pass.
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
---
|
|
615
|
+
|
|
616
|
+
## Build & Deploy Gates
|
|
617
|
+
|
|
618
|
+
**Before marking ANY task complete, verify these platform-specific gates.**
|
|
619
|
+
|
|
620
|
+
### React Native / Expo
|
|
621
|
+
|
|
622
|
+
```
|
|
623
|
+
PRE-COMPLETION CHECKLIST:
|
|
624
|
+
|
|
625
|
+
□ npm/yarn install succeeds (no dependency conflicts)
|
|
626
|
+
□ TypeScript compilation passes (tsc --noEmit)
|
|
627
|
+
□ Linter passes (eslint src/)
|
|
628
|
+
□ Unit tests pass (jest --coverage)
|
|
629
|
+
□ Metro bundler starts (npx react-native start)
|
|
630
|
+
□ iOS build succeeds (npx react-native run-ios) OR Expo build
|
|
631
|
+
□ Android build succeeds (npx react-native run-android) OR Expo build
|
|
632
|
+
□ Bundle size acceptable (check metro output)
|
|
633
|
+
□ Native modules linked (check react-native link status)
|
|
634
|
+
□ Permissions added to Info.plist / AndroidManifest.xml (if new)
|
|
635
|
+
□ No console.log in production code
|
|
636
|
+
□ Assets optimized (images compressed, proper @2x/@3x)
|
|
637
|
+
|
|
638
|
+
FOR UI CHANGES:
|
|
639
|
+
□ Tested on iOS device/simulator
|
|
640
|
+
□ Tested on Android device/emulator
|
|
641
|
+
□ Tested on different screen sizes (phone + tablet)
|
|
642
|
+
□ Dark mode works (if app supports it)
|
|
643
|
+
□ Keyboard avoidance works
|
|
644
|
+
□ Pull-to-refresh works (if list)
|
|
645
|
+
□ Loading states visible
|
|
646
|
+
□ Error states visible
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
### Flutter
|
|
650
|
+
|
|
651
|
+
```
|
|
652
|
+
PRE-COMPLETION CHECKLIST:
|
|
653
|
+
|
|
654
|
+
□ flutter pub get succeeds
|
|
655
|
+
□ flutter analyze passes (0 issues)
|
|
656
|
+
□ flutter test passes
|
|
657
|
+
□ Build succeeds: flutter build apk / flutter build ios
|
|
658
|
+
□ Widget tests cover new widgets
|
|
659
|
+
□ Integration tests pass (if exists)
|
|
660
|
+
□ No print() statements in production
|
|
661
|
+
□ Assets registered in pubspec.yaml
|
|
662
|
+
□ Permissions in AndroidManifest / Info.plist (if new)
|
|
663
|
+
|
|
664
|
+
FOR UI CHANGES:
|
|
665
|
+
□ Tested on Android device
|
|
666
|
+
□ Tested on iOS device
|
|
667
|
+
□ Responsive on different screen sizes
|
|
668
|
+
□ Themes work (light + dark)
|
|
669
|
+
```
|
|
670
|
+
|
|
671
|
+
### iOS Native
|
|
672
|
+
|
|
673
|
+
```
|
|
674
|
+
PRE-COMPLETION CHECKLIST:
|
|
675
|
+
|
|
676
|
+
□ Xcode project builds (⌘B)
|
|
677
|
+
□ Unit tests pass (⌘U)
|
|
678
|
+
□ UI tests pass (if exists)
|
|
679
|
+
□ Swift compiler warnings = 0
|
|
680
|
+
□ pod install succeeds (if using CocoaPods)
|
|
681
|
+
□ Signing configured correctly
|
|
682
|
+
□ Capabilities added to entitlements (if needed)
|
|
683
|
+
□ Privacy strings in Info.plist (camera, location, etc.)
|
|
684
|
+
□ No force unwraps (!) without nil checks
|
|
685
|
+
□ Memory leaks checked (Instruments)
|
|
686
|
+
□ @MainActor on UI updates
|
|
687
|
+
|
|
688
|
+
FOR UI CHANGES:
|
|
689
|
+
□ Tested on iPhone
|
|
690
|
+
□ Tested on iPad (if universal)
|
|
691
|
+
□ Dark mode works
|
|
692
|
+
□ Landscape works (if supported)
|
|
693
|
+
```
|
|
694
|
+
|
|
695
|
+
### Android Native
|
|
696
|
+
|
|
697
|
+
```
|
|
698
|
+
PRE-COMPLETION CHECKLIST:
|
|
699
|
+
|
|
700
|
+
□ Gradle sync succeeds
|
|
701
|
+
□ ./gradlew build succeeds
|
|
702
|
+
□ Unit tests pass (./gradlew test)
|
|
703
|
+
□ Lint checks pass (./gradlew lint)
|
|
704
|
+
□ ProGuard rules added (if obfuscating)
|
|
705
|
+
□ Permissions in AndroidManifest.xml
|
|
706
|
+
□ Min SDK supported
|
|
707
|
+
□ No !! (force unwrap) without null checks
|
|
708
|
+
□ Background work uses WorkManager (not deprecated AsyncTask)
|
|
709
|
+
|
|
710
|
+
FOR UI CHANGES:
|
|
711
|
+
□ Tested on Android device/emulator
|
|
712
|
+
□ Tested on different API levels (min → max)
|
|
713
|
+
□ Tested on different screen densities
|
|
714
|
+
□ Material Design guidelines followed
|
|
715
|
+
```
|
|
716
|
+
|
|
717
|
+
**If ANY gate fails:**
|
|
718
|
+
1. Fix the issue
|
|
719
|
+
2. Re-run ALL gates
|
|
720
|
+
3. Do NOT skip gates
|
|
721
|
+
|
|
722
|
+
**Before releasing to stores:**
|
|
723
|
+
- See `shared/release-checklist.md` for full App Store / Play Store submission checklist
|
|
724
|
+
|
|
725
|
+
---
|
|
726
|
+
|
|
727
|
+
## Smart Loading
|
|
728
|
+
|
|
729
|
+
**After auto-detect, use the Read tool to open ONLY relevant files.**
|
|
730
|
+
**Base path: `~/.claude/skills/skill-mobile-mt/`**
|
|
731
|
+
|
|
732
|
+
| Detected | Read this file | When |
|
|
733
|
+
|----------|----------------|------|
|
|
734
|
+
| React Native / Expo | `react-native/react-native.md` | 🔴 ALWAYS (RN project) |
|
|
735
|
+
| Flutter | `flutter/flutter.md` | 🔴 ALWAYS (Flutter project) |
|
|
736
|
+
| iOS Native | `ios/ios-native.md` | 🔴 ALWAYS (iOS project) |
|
|
737
|
+
| Android Native | `android/android-native.md` | 🔴 ALWAYS (Android project) |
|
|
738
|
+
| All platforms | `shared/code-review.md` | 🔴 ALWAYS |
|
|
739
|
+
| All platforms | `shared/bug-detection.md` | 🔴 ALWAYS |
|
|
740
|
+
| All platforms | `shared/prompt-engineering.md` | 🔴 ALWAYS |
|
|
741
|
+
| All platforms | `shared/release-checklist.md` | 🟡 Task Router says so |
|
|
742
|
+
| All platforms | `shared/common-pitfalls.md` | 🟡 Task Router says so |
|
|
743
|
+
| All platforms | `shared/error-recovery.md` | 🟡 Task Router says so |
|
|
744
|
+
| All platforms | `shared/document-analysis.md` | 🟡 Task Router says so |
|
|
745
|
+
| All platforms | `shared/anti-patterns.md` | 🟡 Task Router says so |
|
|
746
|
+
| All platforms | `shared/performance-prediction.md` | 🟡 Task Router says so |
|
|
747
|
+
| All platforms | `shared/platform-excellence.md` | 🟡 Task Router says so |
|
|
748
|
+
| All platforms | `shared/version-management.md` | 🟡 Task Router says so |
|
|
749
|
+
| All platforms | `shared/observability.md` | 🟡 Task Router says so |
|
|
750
|
+
|
|
751
|
+
**Cross-platform:** Flutter/RN projects also Read `ios/ios-native.md` + `android/android-native.md` for native modules.
|
|
752
|
+
|
|
753
|
+
**Context savings: ~66% by reading only the relevant platform file.**
|
|
754
|
+
|
|
755
|
+
---
|
|
756
|
+
|
|
757
|
+
## Grounding Protocol (Anti-Hallucination)
|
|
758
|
+
|
|
759
|
+
**Every answer MUST be grounded in verifiable sources. NEVER answer from "memory" or "intuition".**
|
|
760
|
+
|
|
761
|
+
### Source Hierarchy (use in order)
|
|
762
|
+
|
|
763
|
+
```
|
|
764
|
+
PRIORITY 1: PROJECT CODE (highest trust)
|
|
765
|
+
→ Read the actual file → cite file:line
|
|
766
|
+
→ "Based on src/services/authService.ts:42, your project uses axios with interceptor"
|
|
767
|
+
|
|
768
|
+
PRIORITY 2: SKILL REFERENCE FILES
|
|
769
|
+
→ Read shared/*.md or platform/*.md → cite which file
|
|
770
|
+
→ "Per react-native/react-native.md, use FlatList instead of ScrollView for lists"
|
|
771
|
+
|
|
772
|
+
PRIORITY 3: OFFICIAL DOCS (via WebSearch)
|
|
773
|
+
→ Search official docs → cite URL
|
|
774
|
+
→ "Per React Native docs: https://reactnative.dev/docs/flatlist"
|
|
775
|
+
|
|
776
|
+
PRIORITY 4: PRODUCTION REPOS (from architecture-intelligence.md)
|
|
777
|
+
→ Cite which repo the pattern comes from
|
|
778
|
+
→ "Ignite (19.7k stars) uses this folder structure for features"
|
|
779
|
+
|
|
780
|
+
⛔ PRIORITY 5: AI GENERAL KNOWLEDGE (lowest trust — AVOID)
|
|
781
|
+
→ Only when Priorities 1-4 return nothing
|
|
782
|
+
→ MUST prefix with: "⚠️ Not verified from your project or docs:"
|
|
783
|
+
→ MUST add: "Verify this before using in production"
|
|
784
|
+
```
|
|
785
|
+
|
|
786
|
+
### Mandatory Rules
|
|
787
|
+
|
|
788
|
+
```
|
|
789
|
+
RULE 1: READ BEFORE ANSWER
|
|
790
|
+
⛔ NEVER suggest code changes to a file you haven't Read
|
|
791
|
+
⛔ NEVER reference a function/class without verifying it exists
|
|
792
|
+
✅ ALWAYS: Read file → find the code → then suggest fix
|
|
793
|
+
|
|
794
|
+
RULE 2: VERIFY APIs AND LIBRARIES EXIST
|
|
795
|
+
⛔ NEVER suggest an import without verifying the package is installed
|
|
796
|
+
⛔ NEVER use a function name without checking it exists in the codebase
|
|
797
|
+
✅ Check package.json/pubspec.yaml FIRST → then suggest usage
|
|
798
|
+
✅ Grep for the function → confirm it exists → then reference it
|
|
799
|
+
|
|
800
|
+
RULE 3: CITE YOUR SOURCE
|
|
801
|
+
Every code suggestion MUST cite where it came from:
|
|
802
|
+
- "Cloned from src/features/product/productService.ts" (project code)
|
|
803
|
+
- "Pattern from shared/architecture-intelligence.md" (skill file)
|
|
804
|
+
- "Per React Navigation v6 docs" (official docs)
|
|
805
|
+
⛔ If you can't cite a source → say "I need to verify this first"
|
|
806
|
+
|
|
807
|
+
RULE 4: SAY "I DON'T KNOW" WHEN YOU DON'T KNOW
|
|
808
|
+
✅ "I'm not sure about this API. Let me check the docs."
|
|
809
|
+
✅ "I need to read your codebase to answer this correctly."
|
|
810
|
+
✅ "This might work but I haven't verified — let me check."
|
|
811
|
+
⛔ NEVER confidently state something you haven't verified
|
|
812
|
+
⛔ NEVER invent function signatures, API endpoints, or library names
|
|
813
|
+
|
|
814
|
+
RULE 5: VERSION-SPECIFIC ANSWERS
|
|
815
|
+
⛔ NEVER suggest code for "React Native" without knowing the version
|
|
816
|
+
⛔ NEVER assume latest version — check package.json first
|
|
817
|
+
✅ "Your project uses RN 0.73, so the correct API is..."
|
|
818
|
+
✅ "Expo SDK 51 uses expo-router v3, here's the correct import..."
|
|
819
|
+
|
|
820
|
+
RULE 6: NO PHANTOM PACKAGES
|
|
821
|
+
Before suggesting ANY npm/pub/pod package:
|
|
822
|
+
✅ Verify it exists: check package.json or search npm/pub
|
|
823
|
+
✅ Verify it's compatible: check version against project SDK
|
|
824
|
+
⛔ NEVER suggest a package name from memory without verification
|
|
825
|
+
⛔ NEVER mix up similar packages (e.g., @react-navigation vs react-navigation)
|
|
826
|
+
```
|
|
827
|
+
|
|
828
|
+
### When Fixing Bugs
|
|
829
|
+
|
|
830
|
+
```
|
|
831
|
+
GROUNDED BUG FIX PROTOCOL:
|
|
832
|
+
|
|
833
|
+
1. READ the file with the bug (don't guess from error message alone)
|
|
834
|
+
2. FIND the exact line causing the issue
|
|
835
|
+
3. UNDERSTAND the data flow (what calls this? what does it return?)
|
|
836
|
+
4. VERIFY the fix works with the actual types/interfaces in the project
|
|
837
|
+
5. CHECK side effects (grep for other files using this function)
|
|
838
|
+
6. CITE: "Fix in [file]:[line] — [root cause] — [why fix works]"
|
|
839
|
+
|
|
840
|
+
⛔ NEVER:
|
|
841
|
+
- "The error is probably because..." (guess without reading code)
|
|
842
|
+
- "Try changing X to Y" (without reading the file first)
|
|
843
|
+
- "This should fix it" (without verifying types match)
|
|
844
|
+
```
|
|
845
|
+
|
|
846
|
+
### Anti-Hallucination Checklist (run before EVERY response)
|
|
847
|
+
|
|
848
|
+
```
|
|
849
|
+
Before responding, verify:
|
|
850
|
+
□ Did I READ the relevant files? (not just guess from file names)
|
|
851
|
+
□ Are all function/class names I mentioned REAL? (verified via Grep/Read)
|
|
852
|
+
□ Are all package names I mentioned INSTALLED? (checked package.json)
|
|
853
|
+
□ Are my API suggestions compatible with the project's SDK version?
|
|
854
|
+
□ Did I cite where my solution comes from?
|
|
855
|
+
□ If I'm unsure about something, did I flag it?
|
|
856
|
+
|
|
857
|
+
If ANY checkbox fails → go back and verify before responding.
|
|
858
|
+
```
|
|
859
|
+
|
|
860
|
+
---
|
|
861
|
+
|
|
862
|
+
## Docs-First Protocol (Always Use Latest)
|
|
863
|
+
|
|
864
|
+
**When setting up, installing, or configuring ANY library/SDK/tool — ALWAYS search official docs FIRST.**
|
|
865
|
+
|
|
866
|
+
### When This Triggers
|
|
867
|
+
|
|
868
|
+
```
|
|
869
|
+
TRIGGERS:
|
|
870
|
+
- "Install X" / "Add X package" / "Setup X"
|
|
871
|
+
- "Configure X" / "Integrate X"
|
|
872
|
+
- "How to use X" / "What's the API for X"
|
|
873
|
+
- "Upgrade from X to Y"
|
|
874
|
+
- ANY new library, framework feature, or SDK API
|
|
875
|
+
|
|
876
|
+
⛔ DO NOT answer from memory. Docs change. APIs change. Syntax changes.
|
|
877
|
+
```
|
|
878
|
+
|
|
879
|
+
### Docs-First Protocol
|
|
880
|
+
|
|
881
|
+
```
|
|
882
|
+
STEP 1: CHECK PROJECT VERSION
|
|
883
|
+
Read package.json / pubspec.yaml → get exact version of:
|
|
884
|
+
- Framework (react-native, expo, flutter)
|
|
885
|
+
- Target library (if already installed)
|
|
886
|
+
- Related dependencies
|
|
887
|
+
|
|
888
|
+
STEP 2: SEARCH OFFICIAL DOCS (WebSearch)
|
|
889
|
+
Search: "[library name] [version] official documentation [current year]"
|
|
890
|
+
Examples:
|
|
891
|
+
- "react-navigation v7 installation guide 2026"
|
|
892
|
+
- "expo-camera SDK 52 setup documentation"
|
|
893
|
+
- "riverpod 2.0 getting started flutter"
|
|
894
|
+
|
|
895
|
+
✅ ALWAYS search with the CURRENT YEAR to get latest docs
|
|
896
|
+
⛔ NEVER rely on training data — it may be outdated
|
|
897
|
+
|
|
898
|
+
STEP 3: VERIFY API / SYNTAX
|
|
899
|
+
From the docs, confirm:
|
|
900
|
+
- Import path (packages rename, move, split)
|
|
901
|
+
- Function signatures (params change between versions)
|
|
902
|
+
- Configuration format (config files change)
|
|
903
|
+
- Peer dependencies (new requirements)
|
|
904
|
+
- Breaking changes (v6 → v7 migration)
|
|
905
|
+
|
|
906
|
+
STEP 4: APPLY WITH CITATION
|
|
907
|
+
"Per [library] v[X] docs ([URL]):
|
|
908
|
+
import { X } from '[correct-package]';"
|
|
909
|
+
|
|
910
|
+
⛔ If docs not found → say "I couldn't find current docs, let me try..."
|
|
911
|
+
⛔ If conflicting info → use the OFFICIAL source, not blog posts
|
|
912
|
+
```
|
|
913
|
+
|
|
914
|
+
### Common Outdated Patterns (AI memory traps)
|
|
915
|
+
|
|
916
|
+
```
|
|
917
|
+
⛔ AI OFTEN GETS WRONG:
|
|
918
|
+
- React Navigation: v5 syntax vs v6 vs v7 (changed significantly)
|
|
919
|
+
- Expo Router: file-based routing changed between SDK versions
|
|
920
|
+
- Firebase: modular v9+ syntax vs old v8 namespaced syntax
|
|
921
|
+
- Swift: async/await vs completion handlers (iOS 15+ only)
|
|
922
|
+
- Jetpack Compose: API surface changes rapidly between versions
|
|
923
|
+
- React Native: New Architecture (Fabric/TurboModules) vs Bridge
|
|
924
|
+
|
|
925
|
+
✅ ALWAYS WebSearch for the exact version in the project:
|
|
926
|
+
"react-navigation v7 createStackNavigator" ← correct for v7
|
|
927
|
+
NOT "react-navigation createStackNavigator" ← could return v4/v5 syntax
|
|
928
|
+
```
|
|
929
|
+
|
|
930
|
+
### Package Installation Protocol
|
|
931
|
+
|
|
932
|
+
```
|
|
933
|
+
BEFORE running npm install / flutter pub add / pod install:
|
|
934
|
+
|
|
935
|
+
1. CHECK if the package exists:
|
|
936
|
+
→ WebSearch "[package name] npm" or "[package name] pub.dev"
|
|
937
|
+
→ Verify it's maintained (last publish date)
|
|
938
|
+
→ Verify it's compatible with project SDK version
|
|
939
|
+
|
|
940
|
+
2. CHECK the correct install command:
|
|
941
|
+
→ WebSearch "[package name] installation [framework version]"
|
|
942
|
+
→ Some packages need peer dependencies
|
|
943
|
+
→ Some packages need native setup (pod install, gradle sync)
|
|
944
|
+
→ Expo packages: use "npx expo install" NOT "npm install"
|
|
945
|
+
|
|
946
|
+
3. CHECK for breaking changes:
|
|
947
|
+
→ If upgrading: WebSearch "[package name] migration guide v[old] to v[new]"
|
|
948
|
+
→ Read CHANGELOG for breaking changes
|
|
949
|
+
→ Check if config format changed
|
|
950
|
+
|
|
951
|
+
4. AFTER install:
|
|
952
|
+
→ Verify import works (no red squiggles)
|
|
953
|
+
→ Run build to check native linking
|
|
954
|
+
→ Test on BOTH platforms (iOS + Android)
|
|
955
|
+
|
|
956
|
+
⛔ NEVER:
|
|
957
|
+
- "npm install [package]" without checking version compatibility
|
|
958
|
+
- Copy import from memory (import paths change between versions)
|
|
959
|
+
- Assume the API is the same as 6 months ago
|
|
960
|
+
- Skip native setup steps (pod install, gradle sync)
|
|
961
|
+
```
|
|
962
|
+
|
|
963
|
+
---
|
|
964
|
+
|
|
965
|
+
## Security Protocol
|
|
966
|
+
|
|
967
|
+
**Security is NOT optional. Every feature MUST pass security checks before completion.**
|
|
968
|
+
|
|
969
|
+
### Security Scan (run on EVERY feature)
|
|
970
|
+
|
|
971
|
+
```
|
|
972
|
+
BEFORE marking any feature as done, scan for:
|
|
973
|
+
|
|
974
|
+
1. 🔴 SECRETS & CREDENTIALS
|
|
975
|
+
□ No hardcoded API keys, tokens, passwords, or secrets
|
|
976
|
+
□ No secrets in source code, comments, or config files
|
|
977
|
+
□ .env files in .gitignore (NEVER committed)
|
|
978
|
+
□ API keys loaded from environment variables or secure config
|
|
979
|
+
|
|
980
|
+
2. 🔴 TOKEN & AUTH STORAGE
|
|
981
|
+
□ Auth tokens → SecureStore (Expo) / Keychain (iOS) / EncryptedSharedPreferences (Android)
|
|
982
|
+
□ ⛔ NEVER AsyncStorage / SharedPreferences / UserDefaults for tokens
|
|
983
|
+
□ ⛔ NEVER localStorage / sessionStorage for tokens
|
|
984
|
+
□ Refresh tokens stored separately from access tokens
|
|
985
|
+
□ Token cleared on logout (all storage locations)
|
|
986
|
+
|
|
987
|
+
3. 🔴 INPUT VALIDATION
|
|
988
|
+
□ User input sanitized before display (prevent XSS)
|
|
989
|
+
□ User input validated before API calls (prevent injection)
|
|
990
|
+
□ Deep link parameters validated before navigation
|
|
991
|
+
□ File uploads: validate type, size, content (not just extension)
|
|
992
|
+
□ Search/filter inputs: debounced + length-limited
|
|
993
|
+
|
|
994
|
+
4. 🔴 NETWORK SECURITY
|
|
995
|
+
□ All API calls over HTTPS (never HTTP)
|
|
996
|
+
□ Certificate pinning for sensitive endpoints (banking, health)
|
|
997
|
+
□ API responses validated (don't trust server blindly)
|
|
998
|
+
□ Timeout on all network requests (prevent hanging)
|
|
999
|
+
□ No sensitive data in URL query parameters (use POST body)
|
|
1000
|
+
|
|
1001
|
+
5. 🟠 DATA PROTECTION
|
|
1002
|
+
□ PII (name, email, phone, location) never in logs
|
|
1003
|
+
□ PII never in analytics events without anonymization
|
|
1004
|
+
□ Crash reports don't contain user data
|
|
1005
|
+
□ Cache/temp files cleared on logout
|
|
1006
|
+
□ Clipboard cleared after paste of sensitive data
|
|
1007
|
+
|
|
1008
|
+
6. 🟠 AUTHENTICATION FLOW
|
|
1009
|
+
□ Login: rate-limited (prevent brute force)
|
|
1010
|
+
□ 401 response → auto-refresh token OR logout
|
|
1011
|
+
□ Session timeout after inactivity
|
|
1012
|
+
□ Biometric auth: use system APIs (Face ID / fingerprint)
|
|
1013
|
+
□ OAuth: validate redirect URI, use PKCE
|
|
1014
|
+
|
|
1015
|
+
7. 🟡 PLATFORM-SPECIFIC
|
|
1016
|
+
iOS:
|
|
1017
|
+
□ App Transport Security (ATS) enabled
|
|
1018
|
+
□ Keychain access groups configured correctly
|
|
1019
|
+
□ Privacy manifest (PrivacyInfo.xcprivacy) for required APIs
|
|
1020
|
+
□ NSCameraUsageDescription / NSLocationUsageDescription set
|
|
1021
|
+
|
|
1022
|
+
Android:
|
|
1023
|
+
□ android:usesCleartextTraffic="false" in manifest
|
|
1024
|
+
□ ProGuard/R8 rules for obfuscation in release
|
|
1025
|
+
□ Exported activities/receivers properly restricted
|
|
1026
|
+
□ Backup rules exclude sensitive data (android:allowBackup)
|
|
1027
|
+
```
|
|
1028
|
+
|
|
1029
|
+
### Security Non-Negotiables (NEVER bypass)
|
|
1030
|
+
|
|
1031
|
+
```
|
|
1032
|
+
⛔ ABSOLUTE RULES — no exceptions, no workarounds:
|
|
1033
|
+
|
|
1034
|
+
1. NEVER store tokens in plain storage
|
|
1035
|
+
AsyncStorage / SharedPreferences / UserDefaults = ❌ CRITICAL
|
|
1036
|
+
SecureStore / Keychain / EncryptedSharedPreferences = ✅ ONLY
|
|
1037
|
+
|
|
1038
|
+
2. NEVER hardcode secrets
|
|
1039
|
+
const API_KEY = "sk-..." = ❌ CRITICAL
|
|
1040
|
+
process.env.API_KEY / Config.API_KEY = ✅ ONLY
|
|
1041
|
+
|
|
1042
|
+
3. NEVER log sensitive data
|
|
1043
|
+
console.log(user.password) = ❌ CRITICAL
|
|
1044
|
+
console.log("Login attempt for user:", user.id) = ✅ OK (ID only)
|
|
1045
|
+
|
|
1046
|
+
4. NEVER trust deep links
|
|
1047
|
+
navigation.navigate(params.screen) = ❌ CRITICAL (arbitrary navigation)
|
|
1048
|
+
if (ALLOWED_SCREENS.includes(params.screen)) navigate(params.screen) = ✅
|
|
1049
|
+
|
|
1050
|
+
5. NEVER disable SSL verification
|
|
1051
|
+
rejectUnauthorized: false = ❌ CRITICAL
|
|
1052
|
+
Proper certificate handling = ✅ ONLY
|
|
1053
|
+
|
|
1054
|
+
6. NEVER commit .env files
|
|
1055
|
+
.env in git = ❌ CRITICAL
|
|
1056
|
+
.env in .gitignore + .env.example committed = ✅
|
|
1057
|
+
```
|
|
1058
|
+
|
|
1059
|
+
### When User Asks to "Skip Security" or "Do It Quick"
|
|
1060
|
+
|
|
1061
|
+
```
|
|
1062
|
+
✅ Response: "I'll implement it correctly AND quickly. Security doesn't slow down development — it prevents emergency patches later."
|
|
1063
|
+
|
|
1064
|
+
⛔ NEVER skip security checks because:
|
|
1065
|
+
- "It's just a prototype" → Prototypes become production
|
|
1066
|
+
- "We'll fix it later" → Technical debt compounds
|
|
1067
|
+
- "It's internal only" → Internal apps get attacked too
|
|
1068
|
+
- "Just hardcode it for now" → Secrets leak to git history permanently
|
|
1069
|
+
```
|
|
1070
|
+
|
|
1071
|
+
---
|
|
1072
|
+
|
|
1073
|
+
## Hard Bans
|
|
1074
|
+
|
|
1075
|
+
**❌ These will CRASH, LEAK, or get REJECTED from app stores:**
|
|
1076
|
+
|
|
1077
|
+
```
|
|
1078
|
+
❌ Force unwrap (! / !! / as!) without null check
|
|
1079
|
+
❌ Hardcoded API keys or secrets in source code
|
|
1080
|
+
❌ Tokens in AsyncStorage / SharedPreferences / UserDefaults
|
|
1081
|
+
❌ console.log / print / NSLog in production builds
|
|
1082
|
+
❌ ScrollView for lists > 20 items (use FlatList / ListView.builder / LazyColumn)
|
|
1083
|
+
❌ Network call inside render / build / Composable
|
|
1084
|
+
❌ setState / state update after unmount / dispose
|
|
1085
|
+
❌ Empty catch blocks (swallowing errors silently)
|
|
1086
|
+
❌ Index as list key / no key in dynamic lists
|
|
1087
|
+
❌ Missing error / loading / empty states (blank screen)
|
|
1088
|
+
❌ Inline anonymous functions in render (re-creates every frame)
|
|
1089
|
+
❌ Main thread blocking (heavy compute without background thread)
|
|
1090
|
+
❌ Files > 500 lines (split immediately)
|
|
1091
|
+
❌ Deep link params used without validation
|
|
1092
|
+
```
|
|
1093
|
+
|
|
1094
|
+
**If you see ANY of these in code → flag as 🔴 CRITICAL, fix immediately.**
|
|
1095
|
+
|
|
1096
|
+
---
|
|
1097
|
+
|
|
1098
|
+
## Mobile Anti-Patterns
|
|
1099
|
+
|
|
1100
|
+
**Things that WILL cause problems in mobile development. Learn from other AI tools' mistakes.**
|
|
1101
|
+
|
|
1102
|
+
### 1. Package Management Anti-Patterns
|
|
1103
|
+
|
|
1104
|
+
```
|
|
1105
|
+
❌ BAD:
|
|
1106
|
+
- npm install <package> without checking mobile compatibility
|
|
1107
|
+
- Adding packages that work on web but not React Native
|
|
1108
|
+
- Using browser-only APIs (document, window) in RN
|
|
1109
|
+
- Mixing package managers (yarn + npm + pnpm)
|
|
1110
|
+
|
|
1111
|
+
✅ GOOD:
|
|
1112
|
+
- Check package README for "React Native", "iOS", "Android" keywords
|
|
1113
|
+
- Look for react-native- prefix for RN packages
|
|
1114
|
+
- Use expo install for Expo-managed projects
|
|
1115
|
+
- Stick to ONE package manager throughout project
|
|
1116
|
+
```
|
|
1117
|
+
|
|
1118
|
+
### 2. Native Module Anti-Patterns
|
|
1119
|
+
|
|
1120
|
+
```
|
|
1121
|
+
❌ BAD:
|
|
1122
|
+
- Assuming npm install auto-links native modules
|
|
1123
|
+
- Not running pod install after adding iOS dependencies
|
|
1124
|
+
- Not rebuilding after adding native modules
|
|
1125
|
+
- Using outdated react-native link command
|
|
1126
|
+
|
|
1127
|
+
✅ GOOD:
|
|
1128
|
+
- For RN >= 0.60: npx pod-install (auto-links)
|
|
1129
|
+
- For older: npx react-native link <package>
|
|
1130
|
+
- Always rebuild after native changes:
|
|
1131
|
+
- iOS: Clean build folder → Build
|
|
1132
|
+
- Android: ./gradlew clean → ./gradlew assembleDebug
|
|
1133
|
+
```
|
|
1134
|
+
|
|
1135
|
+
### 3. Platform-Specific Code Anti-Patterns
|
|
1136
|
+
|
|
1137
|
+
```
|
|
1138
|
+
❌ BAD:
|
|
1139
|
+
- Writing platform code without Platform.OS check
|
|
1140
|
+
- Hardcoding iOS-only APIs on Android
|
|
1141
|
+
- Not testing on BOTH platforms
|
|
1142
|
+
|
|
1143
|
+
✅ GOOD:
|
|
1144
|
+
- Use Platform.select() for different values
|
|
1145
|
+
- Use .ios.tsx / .android.tsx for platform files
|
|
1146
|
+
- Abstract platform differences in services
|
|
1147
|
+
```
|
|
1148
|
+
|
|
1149
|
+
### 4. Performance Anti-Patterns
|
|
1150
|
+
|
|
1151
|
+
```
|
|
1152
|
+
❌ BAD:
|
|
1153
|
+
- Using ScrollView for long lists (> 20 items)
|
|
1154
|
+
- Not using React.memo for expensive components
|
|
1155
|
+
- Loading all data at once (no pagination)
|
|
1156
|
+
- Large images without optimization
|
|
1157
|
+
- Heavy computations on UI thread
|
|
1158
|
+
|
|
1159
|
+
✅ GOOD:
|
|
1160
|
+
- FlatList / SectionList for lists (RN)
|
|
1161
|
+
- ListView.builder for lists (Flutter)
|
|
1162
|
+
- React.memo + useCallback for perf (RN)
|
|
1163
|
+
- Image optimization: smaller sizes, WebP format
|
|
1164
|
+
- Use background threads for heavy work
|
|
1165
|
+
```
|
|
1166
|
+
|
|
1167
|
+
### 5. Navigation Anti-Patterns
|
|
1168
|
+
|
|
1169
|
+
```
|
|
1170
|
+
❌ BAD:
|
|
1171
|
+
- Direct imports of screens without navigation
|
|
1172
|
+
- Passing data through global state for navigation
|
|
1173
|
+
- Deep link URLs without validation
|
|
1174
|
+
- Not registering screens in navigator
|
|
1175
|
+
|
|
1176
|
+
✅ GOOD:
|
|
1177
|
+
- navigation.navigate('Screen', { params })
|
|
1178
|
+
- Use typed navigation (TypeScript)
|
|
1179
|
+
- Validate deep link params
|
|
1180
|
+
- Register ALL screens in root navigator
|
|
1181
|
+
```
|
|
1182
|
+
|
|
1183
|
+
### 6. State Management Anti-Patterns
|
|
1184
|
+
|
|
1185
|
+
```
|
|
1186
|
+
❌ BAD:
|
|
1187
|
+
- Storing sensitive data in AsyncStorage
|
|
1188
|
+
- Not persisting important state
|
|
1189
|
+
- Global state for everything
|
|
1190
|
+
- setState after unmount
|
|
1191
|
+
|
|
1192
|
+
✅ GOOD:
|
|
1193
|
+
- SecureStore / Keychain for tokens
|
|
1194
|
+
- Redux persist / MMKV for fast persistence
|
|
1195
|
+
- Local state for UI, global for shared data
|
|
1196
|
+
- Cleanup subscriptions on unmount
|
|
1197
|
+
```
|
|
1198
|
+
|
|
1199
|
+
### 7. Build Configuration Anti-Patterns
|
|
1200
|
+
|
|
1201
|
+
```
|
|
1202
|
+
❌ BAD:
|
|
1203
|
+
- Hardcoded API URLs in code
|
|
1204
|
+
- Same bundle ID for dev/staging/prod
|
|
1205
|
+
- Secrets committed to git
|
|
1206
|
+
- No environment variable management
|
|
1207
|
+
|
|
1208
|
+
✅ GOOD:
|
|
1209
|
+
- react-native-config or expo-constants for env vars
|
|
1210
|
+
- Different bundle IDs per environment
|
|
1211
|
+
- .env files + .gitignore
|
|
1212
|
+
- Use build flavors (Android) / schemes (iOS)
|
|
1213
|
+
```
|
|
1214
|
+
|
|
1215
|
+
### 8. Testing Anti-Patterns (from AI tools)
|
|
1216
|
+
|
|
1217
|
+
```
|
|
1218
|
+
❌ BAD (AI tools often do this):
|
|
1219
|
+
- Assume tests pass without running them
|
|
1220
|
+
- Skip E2E tests on mobile ("too slow")
|
|
1221
|
+
- Test only on one platform
|
|
1222
|
+
- Not testing offline scenarios
|
|
1223
|
+
|
|
1224
|
+
✅ GOOD:
|
|
1225
|
+
- ALWAYS run tests before completion
|
|
1226
|
+
- Detox / Maestro for E2E on both platforms
|
|
1227
|
+
- Unit tests for business logic
|
|
1228
|
+
- Test airplane mode / slow network
|
|
1229
|
+
```
|
|
1230
|
+
|
|
1231
|
+
### 9. Permissions Anti-Patterns
|
|
1232
|
+
|
|
1233
|
+
```
|
|
1234
|
+
❌ BAD:
|
|
1235
|
+
- Requesting all permissions upfront
|
|
1236
|
+
- Not handling permission denial
|
|
1237
|
+
- Missing permission strings (iOS)
|
|
1238
|
+
- Not checking permission before use
|
|
1239
|
+
|
|
1240
|
+
✅ GOOD:
|
|
1241
|
+
- Request permission just-in-time
|
|
1242
|
+
- Show rationale before requesting
|
|
1243
|
+
- Gracefully handle denial (show message)
|
|
1244
|
+
- Add usage descriptions to Info.plist
|
|
1245
|
+
```
|
|
1246
|
+
|
|
1247
|
+
### 10. Deployment Anti-Patterns
|
|
1248
|
+
|
|
1249
|
+
```
|
|
1250
|
+
❌ BAD:
|
|
1251
|
+
- Shipping with console.log statements
|
|
1252
|
+
- No crash reporting setup
|
|
1253
|
+
- No analytics
|
|
1254
|
+
- Hardcoded version numbers
|
|
1255
|
+
|
|
1256
|
+
✅ GOOD:
|
|
1257
|
+
- Strip console.log in production
|
|
1258
|
+
- Sentry / Firebase Crashlytics
|
|
1259
|
+
- Analytics for user behavior
|
|
1260
|
+
- Auto-increment build numbers in CI
|
|
1261
|
+
```
|
|
1262
|
+
|
|
1263
|
+
**Learn from others' mistakes:**
|
|
1264
|
+
- Cursor: Often assumes web packages work on mobile → they don't
|
|
1265
|
+
- Cline: Skips native build verification → builds break
|
|
1266
|
+
- Windsurf: Doesn't test both platforms → platform-specific bugs
|
|
1267
|
+
- Devin: Assumes npm install links native modules → it doesn't
|
|
1268
|
+
|
|
1269
|
+
---
|
|
1270
|
+
|
|
1271
|
+
## Architecture (All Platforms)
|
|
1272
|
+
|
|
1273
|
+
```
|
|
1274
|
+
Presentation (UI) → Domain (Business Logic) ← Data (API, DB, Cache)
|
|
1275
|
+
|
|
1276
|
+
Domain depends on NOTHING. Dependencies flow INWARD only.
|
|
1277
|
+
```
|
|
1278
|
+
|
|
1279
|
+
| Principle | Rule |
|
|
1280
|
+
|-----------|------|
|
|
1281
|
+
| S — Single Responsibility | 1 file = 1 purpose. Max 300 lines. |
|
|
1282
|
+
| O — Open/Closed | Extend via composition, not modification. |
|
|
1283
|
+
| L — Liskov | Mocks behave like real implementations. |
|
|
1284
|
+
| I — Interface Segregation | Small focused interfaces. No god-services. |
|
|
1285
|
+
| D — Dependency Inversion | Inject services. Never hardcode singletons. |
|
|
1286
|
+
|
|
1287
|
+
### UI State Machine (ALL frameworks)
|
|
1288
|
+
|
|
1289
|
+
```
|
|
1290
|
+
LOADING → skeleton / shimmer / spinner
|
|
1291
|
+
SUCCESS → show data
|
|
1292
|
+
ERROR → error message + retry button
|
|
1293
|
+
EMPTY → helpful empty message
|
|
1294
|
+
⛔ NEVER show a blank screen.
|
|
1295
|
+
```
|
|
1296
|
+
|
|
1297
|
+
---
|
|
1298
|
+
|
|
1299
|
+
## Auto-Think (Both Modes)
|
|
1300
|
+
|
|
1301
|
+
**Before ANY action, generate a think block with pre-action validation. Never skip this.**
|
|
1302
|
+
|
|
1303
|
+
```
|
|
1304
|
+
<think>
|
|
1305
|
+
TASK: [what user asked]
|
|
1306
|
+
TASK TYPE: [create feature / create screen / fix bug / review / optimize / refactor / release]
|
|
1307
|
+
FRAMEWORK: [detected]
|
|
1308
|
+
LANGUAGE: [detected]
|
|
1309
|
+
MODE: [default / project]
|
|
1310
|
+
EXEC MODE: [Discovery / Implementation / Completion]
|
|
1311
|
+
|
|
1312
|
+
# Pre-Action Validation (CRITICAL):
|
|
1313
|
+
□ Do I have all required parameters?
|
|
1314
|
+
□ Can I infer missing info from existing files/tools?
|
|
1315
|
+
□ Am I about to make assumptions? (if yes, ASK FIRST)
|
|
1316
|
+
□ Is mobile context captured? (platform, SDK, device)
|
|
1317
|
+
□ Are native modules identified?
|
|
1318
|
+
□ Do I know the data source? (API / Firebase / GraphQL)
|
|
1319
|
+
□ Do I know the state management? (Redux / Zustand / etc.)
|
|
1320
|
+
|
|
1321
|
+
# If project mode:
|
|
1322
|
+
REFERENCE: [most similar existing feature + path]
|
|
1323
|
+
DATA SOURCE:[detected from reference: axios / fetch / Firebase / GraphQL]
|
|
1324
|
+
STATE MGMT: [detected from reference: Redux / Zustand / MobX / etc.]
|
|
1325
|
+
FILE PATTERN:[detected naming/structure from reference]
|
|
1326
|
+
|
|
1327
|
+
# Plan:
|
|
1328
|
+
FILES: [files to create/modify + why]
|
|
1329
|
+
SIDE EFFECTS: [auth needs interceptor? list needs pagination?]
|
|
1330
|
+
STATES: loading / error / empty / success
|
|
1331
|
+
RISKS: [what could break]
|
|
1332
|
+
DEPENDENCIES: [new packages needed?]
|
|
1333
|
+
NATIVE: [native module changes? pod install? rebuild?]
|
|
1334
|
+
|
|
1335
|
+
# Quality gates:
|
|
1336
|
+
VERIFY: [how to confirm it works]
|
|
1337
|
+
TEST: [which tests to run]
|
|
1338
|
+
BUILD: [iOS? Android? Both?]
|
|
1339
|
+
|
|
1340
|
+
# Error Recovery:
|
|
1341
|
+
MAX ATTEMPTS: [3 for build, 2 for linter]
|
|
1342
|
+
FALLBACK: [alternative approach if fails]
|
|
1343
|
+
</think>
|
|
1344
|
+
```
|
|
1345
|
+
|
|
1346
|
+
**Example:**
|
|
1347
|
+
```
|
|
1348
|
+
<think>
|
|
1349
|
+
TASK: Add camera feature
|
|
1350
|
+
TASK TYPE: create feature
|
|
1351
|
+
FRAMEWORK: React Native CLI
|
|
1352
|
+
LANGUAGE: TypeScript
|
|
1353
|
+
MODE: project
|
|
1354
|
+
EXEC MODE: Implementation
|
|
1355
|
+
|
|
1356
|
+
# Pre-Action Validation:
|
|
1357
|
+
✓ Platform: Both iOS + Android
|
|
1358
|
+
✓ Min SDK: iOS 13+, Android API 26+
|
|
1359
|
+
✓ Permissions: Camera + Storage
|
|
1360
|
+
✓ Native module: react-native-vision-camera
|
|
1361
|
+
? Upload to S3 or Firebase? → ASK USER
|
|
1362
|
+
|
|
1363
|
+
# Blocked: Need to know upload destination before implementation
|
|
1364
|
+
</think>
|
|
1365
|
+
```
|
|
1366
|
+
|
|
1367
|
+
---
|
|
1368
|
+
|
|
1369
|
+
## Reference Files
|
|
1370
|
+
|
|
1371
|
+
```
|
|
1372
|
+
skill-mobile-mt/
|
|
1373
|
+
├── SKILL.md ← You are here
|
|
1374
|
+
├── AGENTS.md ← Multi-agent config
|
|
1375
|
+
├── react-native/react-native.md ← RN patterns + Clean Architecture
|
|
1376
|
+
├── flutter/flutter.md ← Flutter patterns + Clean Architecture
|
|
1377
|
+
├── ios/ios-native.md ← iOS Swift MVVM + Clean Architecture
|
|
1378
|
+
├── android/android-native.md ← Android Kotlin + Clean Architecture
|
|
1379
|
+
└── shared/
|
|
1380
|
+
│
|
|
1381
|
+
├── ── CORE (always load) ────────────────────────────────
|
|
1382
|
+
├── code-review.md ← 🔴 Senior review checklist
|
|
1383
|
+
├── bug-detection.md ← 🔴 Auto bug scanner
|
|
1384
|
+
├── prompt-engineering.md ← 🔴 Auto-think templates
|
|
1385
|
+
│
|
|
1386
|
+
├── ── ON-DEMAND (load by task) ──────────────────────────
|
|
1387
|
+
├── architecture-intelligence.md ← 🟡 Patterns from 30+ production repos
|
|
1388
|
+
├── release-checklist.md ← 🟡 Before shipping to app store
|
|
1389
|
+
├── common-pitfalls.md ← 🟡 Problem → Symptoms → Solution
|
|
1390
|
+
├── error-recovery.md ← 🟡 Fix build/runtime errors
|
|
1391
|
+
├── document-analysis.md ← 🟡 Parse docs/images → code
|
|
1392
|
+
├── anti-patterns.md ← 🟡 PII, cardinality, payload detection
|
|
1393
|
+
├── performance-prediction.md ← 🟡 Predict FPS/memory BEFORE shipping
|
|
1394
|
+
├── platform-excellence.md ← 🟡 iOS 18+ vs Android 15+ guidelines
|
|
1395
|
+
├── version-management.md ← 🟡 SDK compatibility matrix
|
|
1396
|
+
├── observability.md ← 🟡 Sessions as 4th pillar
|
|
1397
|
+
│
|
|
1398
|
+
└── offline-first.md ← 🟢 Local-first + sync patterns
|
|
1399
|
+
```
|