[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-minimax-react-native-dev":3,"mdc-i6ubeq-key":37,"related-repo-minimax-react-native-dev":1605,"related-org-minimax-react-native-dev":1727},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"react-native-dev","build mobile apps with React Native","React Native and Expo development guide covering components, styling, animations, navigation,\nstate management, forms, networking, performance optimization, testing, native capabilities,\nand engineering (project structure, deployment, SDK upgrades, CI\u002FCD).\nUse when: building React Native or Expo apps, implementing animations or native UI, managing\nstate, fetching data, writing tests, optimizing performance, deploying to App Store\u002FPlay Store,\nsetting up CI\u002FCD, upgrading Expo SDK, or configuring Tailwind\u002FNativeWind.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"minimax","MiniMax","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fminimax.jpg","MiniMax-AI",[13,17,20,23],{"name":14,"slug":15,"type":16},"React Native","react-native","tag",{"name":18,"slug":19,"type":16},"Expo","expo",{"name":21,"slug":22,"type":16},"Mobile","mobile",{"name":24,"slug":25,"type":16},"Frontend","frontend",13030,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills","2026-07-13T06:16:48.148173","MIT",1118,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],null,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Freact-native-dev","---\nname: react-native-dev\ndescription: |\n  React Native and Expo development guide covering components, styling, animations, navigation,\n  state management, forms, networking, performance optimization, testing, native capabilities,\n  and engineering (project structure, deployment, SDK upgrades, CI\u002FCD).\n  Use when: building React Native or Expo apps, implementing animations or native UI, managing\n  state, fetching data, writing tests, optimizing performance, deploying to App Store\u002FPlay Store,\n  setting up CI\u002FCD, upgrading Expo SDK, or configuring Tailwind\u002FNativeWind.\nlicense: MIT\nmetadata:\n  version: \"1.0.0\"\n  category: mobile\n  sources:\n    - expo\u002Fskills by Expo (https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills) — Native UI, navigation, and animation patterns\n    - Expo documentation (docs.expo.dev)\n    - React Native documentation (reactnative.dev)\n    - EAS (Expo Application Services) documentation\n---\n\n# React Native & Expo Development Guide\n\nA practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment.\n\n## References\n\nConsult these resources as needed:\n\n- [references\u002Fnavigation.md](references\u002Fnavigation.md) — Expo Router: Stack, Tabs, NativeTabs (`headerLargeTitle`, `headerBackButtonDisplayMode`), links, modals, sheets, context menus\n- [references\u002Fcomponents.md](references\u002Fcomponents.md) — FlashList patterns, `expo-image`, safe areas (`contentInsetAdjustmentBehavior`), native controls, blur\u002Fglass effects, storage\n- [references\u002Fstyling.md](references\u002Fstyling.md) — StyleSheet, NativeWind\u002FTailwind, platform styles, theming, dark mode\n- [references\u002Fanimations.md](references\u002Fanimations.md) — Reanimated 3: entering\u002Fexiting, shared values, gestures, scroll-driven\n- [references\u002Fstate-management.md](references\u002Fstate-management.md) — Zustand (selectors, persist), Jotai (atoms, derived), React Query, Context\n- [references\u002Fforms.md](references\u002Fforms.md) — React Hook Form + Zod: validation, multi-step, dynamic arrays\n- [references\u002Fnetworking.md](references\u002Fnetworking.md) — fetch wrapper, React Query (optimistic updates), auth tokens, offline, API routes, webhooks\n- [references\u002Fperformance.md](references\u002Fperformance.md) — Profiling workflow, FlashList + `memo`, bundle analysis, TTI, memory leaks, animation perf\n- [references\u002Ftesting.md](references\u002Ftesting.md) — Jest, React Native Testing Library, E2E with Maestro\n- [references\u002Fnative-capabilities.md](references\u002Fnative-capabilities.md) — Camera, location, permissions (`use*Permissions` hooks), haptics, notifications, biometrics\n- [references\u002Fengineering.md](references\u002Fengineering.md) — Project layout (`components\u002Fui\u002F`, `stores\u002F`, `services\u002F`), path aliases, SDK upgrades, EAS build\u002Fsubmit, CI\u002FCD, DOM components\n\n## Quick Reference\n\n### Component Preferences\n\n| Purpose | Use | Instead of |\n|---------|-----|------------|\n| Lists | `FlashList` (`@shopify\u002Fflash-list`) + `memo` items | `FlatList` (no view recycling) |\n| Images | `expo-image` | RN `\u003CImage>` (no cache, no WebP) |\n| Press | `Pressable` | `TouchableOpacity` (legacy) |\n| Audio | `expo-audio` | `expo-av` (deprecated) |\n| Video | `expo-video` | `expo-av` (deprecated) |\n| Animations | Reanimated 3 | RN Animated API (limited) |\n| Gestures | Gesture Handler | PanResponder (legacy) |\n| Platform check | `process.env.EXPO_OS` | `Platform.OS` |\n| Context | `React.use()` | `React.useContext()` (React 18) |\n| Safe area scroll | `contentInsetAdjustmentBehavior=\"automatic\"` | `\u003CSafeAreaView>` |\n| SF Symbols | `expo-image` with `source=\"sf:name\"` | `expo-symbols` |\n\n### Scaling Up\n\n| Situation | Consider |\n|-----------|----------|\n| Long lists with scroll jank | Virtualized list libraries (e.g. FlashList) |\n| Want Tailwind-style classes | NativeWind v4 |\n| High-frequency storage reads | Sync-based storage (e.g. MMKV) |\n| New project with Expo | Expo Router over bare React Navigation |\n\n### State Management\n\n| State Type | Solution |\n|------------|----------|\n| Local UI state | `useState` \u002F `useReducer` |\n| Shared app state | Zustand or Jotai |\n| Server \u002F async data | React Query |\n| Form state | React Hook Form + Zod |\n\n### Performance Priorities\n\n| Priority | Issue | Fix |\n|----------|-------|-----|\n| CRITICAL | Long list jank | `FlashList` + memoized items |\n| CRITICAL | Large bundle | Avoid barrel imports, enable R8 |\n| HIGH | Too many re-renders | Zustand selectors, React Compiler |\n| HIGH | Slow startup | Disable bundle compression, native nav |\n| MEDIUM | Animation drops | Only animate `transform`\u002F`opacity` |\n\n## New Project Init\n\n```bash\n# 1. Create project\nnpx create-expo-app@latest my-app --template blank-typescript\ncd my-app\n\n# 2. Install Expo Router + core deps\nnpx expo install expo-router react-native-safe-area-context react-native-screens\n\n# 3. (Optional) Common extras\nnpx expo install expo-image react-native-reanimated react-native-gesture-handler\n```\n\nThen configure:\n\n1. Set entry point in `package.json`: `\"main\": \"expo-router\u002Fentry\"`\n2. Add scheme in `app.json`: `\"scheme\": \"my-app\"`\n3. Delete `App.tsx` and `index.ts`\n4. Create `app\u002F_layout.tsx` as root Stack layout\n5. Create `app\u002F(tabs)\u002F_layout.tsx` for tab navigation\n6. Create route files in `app\u002F(tabs)\u002F` (see [navigation.md](references\u002Fnavigation.md))\n\nFor web support, also install: `npx expo install react-native-web react-dom @expo\u002Fmetro-runtime`\n\n## Core Principles\n\n**Consult references before writing**: when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls.\n\n**Try Expo Go first** (`npx expo start`). Custom builds (`eas build`) only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go.\n\n**Conditional rendering**: use `{count > 0 && \u003CText \u002F>}` not `{count && \u003CText \u002F>}` (renders \"0\").\n\n**Animation rule**: only animate `transform` and `opacity` — GPU-composited, no layout thrash.\n\n**Imports**: always import directly from source, not barrel files — avoids bundle bloat.\n\n**Lists and images**: before using `FlatList` or RN `Image`, check the Component Preferences table above — `FlashList` and `expo-image` are almost always the right choice.\n\n**Route files**: always use kebab-case, never co-locate components\u002Ftypes\u002Futils in `app\u002F`.\n\n## Checklist\n\n### New Project Setup\n- [ ] `tsconfig.json` path aliases configured\n- [ ] `EXPO_PUBLIC_API_URL` env var set per environment\n- [ ] Root layout has `GestureHandlerRootView` (if using gestures)\n- [ ] `contentInsetAdjustmentBehavior=\"automatic\"` on all scroll views\n- [ ] `FlashList` instead of `FlatList` for lists > 20 items\n\n### Before Shipping\n- [ ] Profile in `--profile` mode, fix frames > 16ms\n- [ ] Bundle analyzed (`source-map-explorer`), no barrel imports\n- [ ] R8 enabled for Android\n- [ ] Unit + component tests for critical paths\n- [ ] E2E flows for login, core feature, checkout\n\n---\n\nFlutter development → see `flutter-dev` skill.\niOS native (UIKit\u002FSwiftUI) → see `ios-application-dev` skill.\nAndroid native (Kotlin\u002FCompose) → see `android-native-dev` skill.\n\n*React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.*\n",{"data":38,"body":46},{"name":4,"description":6,"license":29,"metadata":39},{"version":40,"category":22,"sources":41},"1.0.0",[42,43,44,45],"expo\u002Fskills by Expo (https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills) — Native UI, navigation, and animation patterns","Expo documentation (docs.expo.dev)","React Native documentation (reactnative.dev)","EAS (Expo Application Services) documentation",{"type":47,"children":48},"root",[49,58,64,71,76,263,269,276,614,620,694,700,786,792,926,932,1101,1106,1211,1222,1228,1239,1264,1290,1313,1323,1361,1379,1385,1391,1486,1492,1557,1561,1590,1599],{"type":50,"tag":51,"props":52,"children":54},"element","h1",{"id":53},"react-native-expo-development-guide",[55],{"type":56,"value":57},"text","React Native & Expo Development Guide",{"type":50,"tag":59,"props":60,"children":61},"p",{},[62],{"type":56,"value":63},"A practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment.",{"type":50,"tag":65,"props":66,"children":68},"h2",{"id":67},"references",[69],{"type":56,"value":70},"References",{"type":50,"tag":59,"props":72,"children":73},{},[74],{"type":56,"value":75},"Consult these resources as needed:",{"type":50,"tag":77,"props":78,"children":79},"ul",{},[80,109,135,145,155,165,175,185,203,213,231],{"type":50,"tag":81,"props":82,"children":83},"li",{},[84,90,92,99,101,107],{"type":50,"tag":85,"props":86,"children":88},"a",{"href":87},"references\u002Fnavigation.md",[89],{"type":56,"value":87},{"type":56,"value":91}," — Expo Router: Stack, Tabs, NativeTabs (",{"type":50,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":56,"value":98},"headerLargeTitle",{"type":56,"value":100},", ",{"type":50,"tag":93,"props":102,"children":104},{"className":103},[],[105],{"type":56,"value":106},"headerBackButtonDisplayMode",{"type":56,"value":108},"), links, modals, sheets, context menus",{"type":50,"tag":81,"props":110,"children":111},{},[112,117,119,125,127,133],{"type":50,"tag":85,"props":113,"children":115},{"href":114},"references\u002Fcomponents.md",[116],{"type":56,"value":114},{"type":56,"value":118}," — FlashList patterns, ",{"type":50,"tag":93,"props":120,"children":122},{"className":121},[],[123],{"type":56,"value":124},"expo-image",{"type":56,"value":126},", safe areas (",{"type":50,"tag":93,"props":128,"children":130},{"className":129},[],[131],{"type":56,"value":132},"contentInsetAdjustmentBehavior",{"type":56,"value":134},"), native controls, blur\u002Fglass effects, storage",{"type":50,"tag":81,"props":136,"children":137},{},[138,143],{"type":50,"tag":85,"props":139,"children":141},{"href":140},"references\u002Fstyling.md",[142],{"type":56,"value":140},{"type":56,"value":144}," — StyleSheet, NativeWind\u002FTailwind, platform styles, theming, dark mode",{"type":50,"tag":81,"props":146,"children":147},{},[148,153],{"type":50,"tag":85,"props":149,"children":151},{"href":150},"references\u002Fanimations.md",[152],{"type":56,"value":150},{"type":56,"value":154}," — Reanimated 3: entering\u002Fexiting, shared values, gestures, scroll-driven",{"type":50,"tag":81,"props":156,"children":157},{},[158,163],{"type":50,"tag":85,"props":159,"children":161},{"href":160},"references\u002Fstate-management.md",[162],{"type":56,"value":160},{"type":56,"value":164}," — Zustand (selectors, persist), Jotai (atoms, derived), React Query, Context",{"type":50,"tag":81,"props":166,"children":167},{},[168,173],{"type":50,"tag":85,"props":169,"children":171},{"href":170},"references\u002Fforms.md",[172],{"type":56,"value":170},{"type":56,"value":174}," — React Hook Form + Zod: validation, multi-step, dynamic arrays",{"type":50,"tag":81,"props":176,"children":177},{},[178,183],{"type":50,"tag":85,"props":179,"children":181},{"href":180},"references\u002Fnetworking.md",[182],{"type":56,"value":180},{"type":56,"value":184}," — fetch wrapper, React Query (optimistic updates), auth tokens, offline, API routes, webhooks",{"type":50,"tag":81,"props":186,"children":187},{},[188,193,195,201],{"type":50,"tag":85,"props":189,"children":191},{"href":190},"references\u002Fperformance.md",[192],{"type":56,"value":190},{"type":56,"value":194}," — Profiling workflow, FlashList + ",{"type":50,"tag":93,"props":196,"children":198},{"className":197},[],[199],{"type":56,"value":200},"memo",{"type":56,"value":202},", bundle analysis, TTI, memory leaks, animation perf",{"type":50,"tag":81,"props":204,"children":205},{},[206,211],{"type":50,"tag":85,"props":207,"children":209},{"href":208},"references\u002Ftesting.md",[210],{"type":56,"value":208},{"type":56,"value":212}," — Jest, React Native Testing Library, E2E with Maestro",{"type":50,"tag":81,"props":214,"children":215},{},[216,221,223,229],{"type":50,"tag":85,"props":217,"children":219},{"href":218},"references\u002Fnative-capabilities.md",[220],{"type":56,"value":218},{"type":56,"value":222}," — Camera, location, permissions (",{"type":50,"tag":93,"props":224,"children":226},{"className":225},[],[227],{"type":56,"value":228},"use*Permissions",{"type":56,"value":230}," hooks), haptics, notifications, biometrics",{"type":50,"tag":81,"props":232,"children":233},{},[234,239,241,247,248,254,255,261],{"type":50,"tag":85,"props":235,"children":237},{"href":236},"references\u002Fengineering.md",[238],{"type":56,"value":236},{"type":56,"value":240}," — Project layout (",{"type":50,"tag":93,"props":242,"children":244},{"className":243},[],[245],{"type":56,"value":246},"components\u002Fui\u002F",{"type":56,"value":100},{"type":50,"tag":93,"props":249,"children":251},{"className":250},[],[252],{"type":56,"value":253},"stores\u002F",{"type":56,"value":100},{"type":50,"tag":93,"props":256,"children":258},{"className":257},[],[259],{"type":56,"value":260},"services\u002F",{"type":56,"value":262},"), path aliases, SDK upgrades, EAS build\u002Fsubmit, CI\u002FCD, DOM components",{"type":50,"tag":65,"props":264,"children":266},{"id":265},"quick-reference",[267],{"type":56,"value":268},"Quick Reference",{"type":50,"tag":270,"props":271,"children":273},"h3",{"id":272},"component-preferences",[274],{"type":56,"value":275},"Component Preferences",{"type":50,"tag":277,"props":278,"children":279},"table",{},[280,304],{"type":50,"tag":281,"props":282,"children":283},"thead",{},[284],{"type":50,"tag":285,"props":286,"children":287},"tr",{},[288,294,299],{"type":50,"tag":289,"props":290,"children":291},"th",{},[292],{"type":56,"value":293},"Purpose",{"type":50,"tag":289,"props":295,"children":296},{},[297],{"type":56,"value":298},"Use",{"type":50,"tag":289,"props":300,"children":301},{},[302],{"type":56,"value":303},"Instead of",{"type":50,"tag":305,"props":306,"children":307},"tbody",{},[308,354,383,411,439,465,483,501,527,555,581],{"type":50,"tag":285,"props":309,"children":310},{},[311,317,343],{"type":50,"tag":312,"props":313,"children":314},"td",{},[315],{"type":56,"value":316},"Lists",{"type":50,"tag":312,"props":318,"children":319},{},[320,326,328,334,336,341],{"type":50,"tag":93,"props":321,"children":323},{"className":322},[],[324],{"type":56,"value":325},"FlashList",{"type":56,"value":327}," (",{"type":50,"tag":93,"props":329,"children":331},{"className":330},[],[332],{"type":56,"value":333},"@shopify\u002Fflash-list",{"type":56,"value":335},") + ",{"type":50,"tag":93,"props":337,"children":339},{"className":338},[],[340],{"type":56,"value":200},{"type":56,"value":342}," items",{"type":50,"tag":312,"props":344,"children":345},{},[346,352],{"type":50,"tag":93,"props":347,"children":349},{"className":348},[],[350],{"type":56,"value":351},"FlatList",{"type":56,"value":353}," (no view recycling)",{"type":50,"tag":285,"props":355,"children":356},{},[357,362,370],{"type":50,"tag":312,"props":358,"children":359},{},[360],{"type":56,"value":361},"Images",{"type":50,"tag":312,"props":363,"children":364},{},[365],{"type":50,"tag":93,"props":366,"children":368},{"className":367},[],[369],{"type":56,"value":124},{"type":50,"tag":312,"props":371,"children":372},{},[373,375,381],{"type":56,"value":374},"RN ",{"type":50,"tag":93,"props":376,"children":378},{"className":377},[],[379],{"type":56,"value":380},"\u003CImage>",{"type":56,"value":382}," (no cache, no WebP)",{"type":50,"tag":285,"props":384,"children":385},{},[386,391,400],{"type":50,"tag":312,"props":387,"children":388},{},[389],{"type":56,"value":390},"Press",{"type":50,"tag":312,"props":392,"children":393},{},[394],{"type":50,"tag":93,"props":395,"children":397},{"className":396},[],[398],{"type":56,"value":399},"Pressable",{"type":50,"tag":312,"props":401,"children":402},{},[403,409],{"type":50,"tag":93,"props":404,"children":406},{"className":405},[],[407],{"type":56,"value":408},"TouchableOpacity",{"type":56,"value":410}," (legacy)",{"type":50,"tag":285,"props":412,"children":413},{},[414,419,428],{"type":50,"tag":312,"props":415,"children":416},{},[417],{"type":56,"value":418},"Audio",{"type":50,"tag":312,"props":420,"children":421},{},[422],{"type":50,"tag":93,"props":423,"children":425},{"className":424},[],[426],{"type":56,"value":427},"expo-audio",{"type":50,"tag":312,"props":429,"children":430},{},[431,437],{"type":50,"tag":93,"props":432,"children":434},{"className":433},[],[435],{"type":56,"value":436},"expo-av",{"type":56,"value":438}," (deprecated)",{"type":50,"tag":285,"props":440,"children":441},{},[442,447,456],{"type":50,"tag":312,"props":443,"children":444},{},[445],{"type":56,"value":446},"Video",{"type":50,"tag":312,"props":448,"children":449},{},[450],{"type":50,"tag":93,"props":451,"children":453},{"className":452},[],[454],{"type":56,"value":455},"expo-video",{"type":50,"tag":312,"props":457,"children":458},{},[459,464],{"type":50,"tag":93,"props":460,"children":462},{"className":461},[],[463],{"type":56,"value":436},{"type":56,"value":438},{"type":50,"tag":285,"props":466,"children":467},{},[468,473,478],{"type":50,"tag":312,"props":469,"children":470},{},[471],{"type":56,"value":472},"Animations",{"type":50,"tag":312,"props":474,"children":475},{},[476],{"type":56,"value":477},"Reanimated 3",{"type":50,"tag":312,"props":479,"children":480},{},[481],{"type":56,"value":482},"RN Animated API (limited)",{"type":50,"tag":285,"props":484,"children":485},{},[486,491,496],{"type":50,"tag":312,"props":487,"children":488},{},[489],{"type":56,"value":490},"Gestures",{"type":50,"tag":312,"props":492,"children":493},{},[494],{"type":56,"value":495},"Gesture Handler",{"type":50,"tag":312,"props":497,"children":498},{},[499],{"type":56,"value":500},"PanResponder (legacy)",{"type":50,"tag":285,"props":502,"children":503},{},[504,509,518],{"type":50,"tag":312,"props":505,"children":506},{},[507],{"type":56,"value":508},"Platform check",{"type":50,"tag":312,"props":510,"children":511},{},[512],{"type":50,"tag":93,"props":513,"children":515},{"className":514},[],[516],{"type":56,"value":517},"process.env.EXPO_OS",{"type":50,"tag":312,"props":519,"children":520},{},[521],{"type":50,"tag":93,"props":522,"children":524},{"className":523},[],[525],{"type":56,"value":526},"Platform.OS",{"type":50,"tag":285,"props":528,"children":529},{},[530,535,544],{"type":50,"tag":312,"props":531,"children":532},{},[533],{"type":56,"value":534},"Context",{"type":50,"tag":312,"props":536,"children":537},{},[538],{"type":50,"tag":93,"props":539,"children":541},{"className":540},[],[542],{"type":56,"value":543},"React.use()",{"type":50,"tag":312,"props":545,"children":546},{},[547,553],{"type":50,"tag":93,"props":548,"children":550},{"className":549},[],[551],{"type":56,"value":552},"React.useContext()",{"type":56,"value":554}," (React 18)",{"type":50,"tag":285,"props":556,"children":557},{},[558,563,572],{"type":50,"tag":312,"props":559,"children":560},{},[561],{"type":56,"value":562},"Safe area scroll",{"type":50,"tag":312,"props":564,"children":565},{},[566],{"type":50,"tag":93,"props":567,"children":569},{"className":568},[],[570],{"type":56,"value":571},"contentInsetAdjustmentBehavior=\"automatic\"",{"type":50,"tag":312,"props":573,"children":574},{},[575],{"type":50,"tag":93,"props":576,"children":578},{"className":577},[],[579],{"type":56,"value":580},"\u003CSafeAreaView>",{"type":50,"tag":285,"props":582,"children":583},{},[584,589,605],{"type":50,"tag":312,"props":585,"children":586},{},[587],{"type":56,"value":588},"SF Symbols",{"type":50,"tag":312,"props":590,"children":591},{},[592,597,599],{"type":50,"tag":93,"props":593,"children":595},{"className":594},[],[596],{"type":56,"value":124},{"type":56,"value":598}," with ",{"type":50,"tag":93,"props":600,"children":602},{"className":601},[],[603],{"type":56,"value":604},"source=\"sf:name\"",{"type":50,"tag":312,"props":606,"children":607},{},[608],{"type":50,"tag":93,"props":609,"children":611},{"className":610},[],[612],{"type":56,"value":613},"expo-symbols",{"type":50,"tag":270,"props":615,"children":617},{"id":616},"scaling-up",[618],{"type":56,"value":619},"Scaling Up",{"type":50,"tag":277,"props":621,"children":622},{},[623,639],{"type":50,"tag":281,"props":624,"children":625},{},[626],{"type":50,"tag":285,"props":627,"children":628},{},[629,634],{"type":50,"tag":289,"props":630,"children":631},{},[632],{"type":56,"value":633},"Situation",{"type":50,"tag":289,"props":635,"children":636},{},[637],{"type":56,"value":638},"Consider",{"type":50,"tag":305,"props":640,"children":641},{},[642,655,668,681],{"type":50,"tag":285,"props":643,"children":644},{},[645,650],{"type":50,"tag":312,"props":646,"children":647},{},[648],{"type":56,"value":649},"Long lists with scroll jank",{"type":50,"tag":312,"props":651,"children":652},{},[653],{"type":56,"value":654},"Virtualized list libraries (e.g. FlashList)",{"type":50,"tag":285,"props":656,"children":657},{},[658,663],{"type":50,"tag":312,"props":659,"children":660},{},[661],{"type":56,"value":662},"Want Tailwind-style classes",{"type":50,"tag":312,"props":664,"children":665},{},[666],{"type":56,"value":667},"NativeWind v4",{"type":50,"tag":285,"props":669,"children":670},{},[671,676],{"type":50,"tag":312,"props":672,"children":673},{},[674],{"type":56,"value":675},"High-frequency storage reads",{"type":50,"tag":312,"props":677,"children":678},{},[679],{"type":56,"value":680},"Sync-based storage (e.g. MMKV)",{"type":50,"tag":285,"props":682,"children":683},{},[684,689],{"type":50,"tag":312,"props":685,"children":686},{},[687],{"type":56,"value":688},"New project with Expo",{"type":50,"tag":312,"props":690,"children":691},{},[692],{"type":56,"value":693},"Expo Router over bare React Navigation",{"type":50,"tag":270,"props":695,"children":697},{"id":696},"state-management",[698],{"type":56,"value":699},"State Management",{"type":50,"tag":277,"props":701,"children":702},{},[703,719],{"type":50,"tag":281,"props":704,"children":705},{},[706],{"type":50,"tag":285,"props":707,"children":708},{},[709,714],{"type":50,"tag":289,"props":710,"children":711},{},[712],{"type":56,"value":713},"State Type",{"type":50,"tag":289,"props":715,"children":716},{},[717],{"type":56,"value":718},"Solution",{"type":50,"tag":305,"props":720,"children":721},{},[722,747,760,773],{"type":50,"tag":285,"props":723,"children":724},{},[725,730],{"type":50,"tag":312,"props":726,"children":727},{},[728],{"type":56,"value":729},"Local UI state",{"type":50,"tag":312,"props":731,"children":732},{},[733,739,741],{"type":50,"tag":93,"props":734,"children":736},{"className":735},[],[737],{"type":56,"value":738},"useState",{"type":56,"value":740}," \u002F ",{"type":50,"tag":93,"props":742,"children":744},{"className":743},[],[745],{"type":56,"value":746},"useReducer",{"type":50,"tag":285,"props":748,"children":749},{},[750,755],{"type":50,"tag":312,"props":751,"children":752},{},[753],{"type":56,"value":754},"Shared app state",{"type":50,"tag":312,"props":756,"children":757},{},[758],{"type":56,"value":759},"Zustand or Jotai",{"type":50,"tag":285,"props":761,"children":762},{},[763,768],{"type":50,"tag":312,"props":764,"children":765},{},[766],{"type":56,"value":767},"Server \u002F async data",{"type":50,"tag":312,"props":769,"children":770},{},[771],{"type":56,"value":772},"React Query",{"type":50,"tag":285,"props":774,"children":775},{},[776,781],{"type":50,"tag":312,"props":777,"children":778},{},[779],{"type":56,"value":780},"Form state",{"type":50,"tag":312,"props":782,"children":783},{},[784],{"type":56,"value":785},"React Hook Form + Zod",{"type":50,"tag":270,"props":787,"children":789},{"id":788},"performance-priorities",[790],{"type":56,"value":791},"Performance Priorities",{"type":50,"tag":277,"props":793,"children":794},{},[795,816],{"type":50,"tag":281,"props":796,"children":797},{},[798],{"type":50,"tag":285,"props":799,"children":800},{},[801,806,811],{"type":50,"tag":289,"props":802,"children":803},{},[804],{"type":56,"value":805},"Priority",{"type":50,"tag":289,"props":807,"children":808},{},[809],{"type":56,"value":810},"Issue",{"type":50,"tag":289,"props":812,"children":813},{},[814],{"type":56,"value":815},"Fix",{"type":50,"tag":305,"props":817,"children":818},{},[819,842,859,877,894],{"type":50,"tag":285,"props":820,"children":821},{},[822,827,832],{"type":50,"tag":312,"props":823,"children":824},{},[825],{"type":56,"value":826},"CRITICAL",{"type":50,"tag":312,"props":828,"children":829},{},[830],{"type":56,"value":831},"Long list jank",{"type":50,"tag":312,"props":833,"children":834},{},[835,840],{"type":50,"tag":93,"props":836,"children":838},{"className":837},[],[839],{"type":56,"value":325},{"type":56,"value":841}," + memoized items",{"type":50,"tag":285,"props":843,"children":844},{},[845,849,854],{"type":50,"tag":312,"props":846,"children":847},{},[848],{"type":56,"value":826},{"type":50,"tag":312,"props":850,"children":851},{},[852],{"type":56,"value":853},"Large bundle",{"type":50,"tag":312,"props":855,"children":856},{},[857],{"type":56,"value":858},"Avoid barrel imports, enable R8",{"type":50,"tag":285,"props":860,"children":861},{},[862,867,872],{"type":50,"tag":312,"props":863,"children":864},{},[865],{"type":56,"value":866},"HIGH",{"type":50,"tag":312,"props":868,"children":869},{},[870],{"type":56,"value":871},"Too many re-renders",{"type":50,"tag":312,"props":873,"children":874},{},[875],{"type":56,"value":876},"Zustand selectors, React Compiler",{"type":50,"tag":285,"props":878,"children":879},{},[880,884,889],{"type":50,"tag":312,"props":881,"children":882},{},[883],{"type":56,"value":866},{"type":50,"tag":312,"props":885,"children":886},{},[887],{"type":56,"value":888},"Slow startup",{"type":50,"tag":312,"props":890,"children":891},{},[892],{"type":56,"value":893},"Disable bundle compression, native nav",{"type":50,"tag":285,"props":895,"children":896},{},[897,902,907],{"type":50,"tag":312,"props":898,"children":899},{},[900],{"type":56,"value":901},"MEDIUM",{"type":50,"tag":312,"props":903,"children":904},{},[905],{"type":56,"value":906},"Animation drops",{"type":50,"tag":312,"props":908,"children":909},{},[910,912,918,920],{"type":56,"value":911},"Only animate ",{"type":50,"tag":93,"props":913,"children":915},{"className":914},[],[916],{"type":56,"value":917},"transform",{"type":56,"value":919},"\u002F",{"type":50,"tag":93,"props":921,"children":923},{"className":922},[],[924],{"type":56,"value":925},"opacity",{"type":50,"tag":65,"props":927,"children":929},{"id":928},"new-project-init",[930],{"type":56,"value":931},"New Project Init",{"type":50,"tag":933,"props":934,"children":939},"pre",{"className":935,"code":936,"language":937,"meta":938,"style":938},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# 1. Create project\nnpx create-expo-app@latest my-app --template blank-typescript\ncd my-app\n\n# 2. Install Expo Router + core deps\nnpx expo install expo-router react-native-safe-area-context react-native-screens\n\n# 3. (Optional) Common extras\nnpx expo install expo-image react-native-reanimated react-native-gesture-handler\n","bash","",[940],{"type":50,"tag":93,"props":941,"children":942},{"__ignoreMap":938},[943,955,986,1001,1011,1020,1053,1061,1070],{"type":50,"tag":944,"props":945,"children":948},"span",{"class":946,"line":947},"line",1,[949],{"type":50,"tag":944,"props":950,"children":952},{"style":951},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[953],{"type":56,"value":954},"# 1. Create project\n",{"type":50,"tag":944,"props":956,"children":958},{"class":946,"line":957},2,[959,965,971,976,981],{"type":50,"tag":944,"props":960,"children":962},{"style":961},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[963],{"type":56,"value":964},"npx",{"type":50,"tag":944,"props":966,"children":968},{"style":967},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[969],{"type":56,"value":970}," create-expo-app@latest",{"type":50,"tag":944,"props":972,"children":973},{"style":967},[974],{"type":56,"value":975}," my-app",{"type":50,"tag":944,"props":977,"children":978},{"style":967},[979],{"type":56,"value":980}," --template",{"type":50,"tag":944,"props":982,"children":983},{"style":967},[984],{"type":56,"value":985}," blank-typescript\n",{"type":50,"tag":944,"props":987,"children":989},{"class":946,"line":988},3,[990,996],{"type":50,"tag":944,"props":991,"children":993},{"style":992},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[994],{"type":56,"value":995},"cd",{"type":50,"tag":944,"props":997,"children":998},{"style":967},[999],{"type":56,"value":1000}," my-app\n",{"type":50,"tag":944,"props":1002,"children":1004},{"class":946,"line":1003},4,[1005],{"type":50,"tag":944,"props":1006,"children":1008},{"emptyLinePlaceholder":1007},true,[1009],{"type":56,"value":1010},"\n",{"type":50,"tag":944,"props":1012,"children":1014},{"class":946,"line":1013},5,[1015],{"type":50,"tag":944,"props":1016,"children":1017},{"style":951},[1018],{"type":56,"value":1019},"# 2. Install Expo Router + core deps\n",{"type":50,"tag":944,"props":1021,"children":1023},{"class":946,"line":1022},6,[1024,1028,1033,1038,1043,1048],{"type":50,"tag":944,"props":1025,"children":1026},{"style":961},[1027],{"type":56,"value":964},{"type":50,"tag":944,"props":1029,"children":1030},{"style":967},[1031],{"type":56,"value":1032}," expo",{"type":50,"tag":944,"props":1034,"children":1035},{"style":967},[1036],{"type":56,"value":1037}," install",{"type":50,"tag":944,"props":1039,"children":1040},{"style":967},[1041],{"type":56,"value":1042}," expo-router",{"type":50,"tag":944,"props":1044,"children":1045},{"style":967},[1046],{"type":56,"value":1047}," react-native-safe-area-context",{"type":50,"tag":944,"props":1049,"children":1050},{"style":967},[1051],{"type":56,"value":1052}," react-native-screens\n",{"type":50,"tag":944,"props":1054,"children":1056},{"class":946,"line":1055},7,[1057],{"type":50,"tag":944,"props":1058,"children":1059},{"emptyLinePlaceholder":1007},[1060],{"type":56,"value":1010},{"type":50,"tag":944,"props":1062,"children":1064},{"class":946,"line":1063},8,[1065],{"type":50,"tag":944,"props":1066,"children":1067},{"style":951},[1068],{"type":56,"value":1069},"# 3. (Optional) Common extras\n",{"type":50,"tag":944,"props":1071,"children":1073},{"class":946,"line":1072},9,[1074,1078,1082,1086,1091,1096],{"type":50,"tag":944,"props":1075,"children":1076},{"style":961},[1077],{"type":56,"value":964},{"type":50,"tag":944,"props":1079,"children":1080},{"style":967},[1081],{"type":56,"value":1032},{"type":50,"tag":944,"props":1083,"children":1084},{"style":967},[1085],{"type":56,"value":1037},{"type":50,"tag":944,"props":1087,"children":1088},{"style":967},[1089],{"type":56,"value":1090}," expo-image",{"type":50,"tag":944,"props":1092,"children":1093},{"style":967},[1094],{"type":56,"value":1095}," react-native-reanimated",{"type":50,"tag":944,"props":1097,"children":1098},{"style":967},[1099],{"type":56,"value":1100}," react-native-gesture-handler\n",{"type":50,"tag":59,"props":1102,"children":1103},{},[1104],{"type":56,"value":1105},"Then configure:",{"type":50,"tag":1107,"props":1108,"children":1109},"ol",{},[1110,1129,1147,1166,1179,1191],{"type":50,"tag":81,"props":1111,"children":1112},{},[1113,1115,1121,1123],{"type":56,"value":1114},"Set entry point in ",{"type":50,"tag":93,"props":1116,"children":1118},{"className":1117},[],[1119],{"type":56,"value":1120},"package.json",{"type":56,"value":1122},": ",{"type":50,"tag":93,"props":1124,"children":1126},{"className":1125},[],[1127],{"type":56,"value":1128},"\"main\": \"expo-router\u002Fentry\"",{"type":50,"tag":81,"props":1130,"children":1131},{},[1132,1134,1140,1141],{"type":56,"value":1133},"Add scheme in ",{"type":50,"tag":93,"props":1135,"children":1137},{"className":1136},[],[1138],{"type":56,"value":1139},"app.json",{"type":56,"value":1122},{"type":50,"tag":93,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":56,"value":1146},"\"scheme\": \"my-app\"",{"type":50,"tag":81,"props":1148,"children":1149},{},[1150,1152,1158,1160],{"type":56,"value":1151},"Delete ",{"type":50,"tag":93,"props":1153,"children":1155},{"className":1154},[],[1156],{"type":56,"value":1157},"App.tsx",{"type":56,"value":1159}," and ",{"type":50,"tag":93,"props":1161,"children":1163},{"className":1162},[],[1164],{"type":56,"value":1165},"index.ts",{"type":50,"tag":81,"props":1167,"children":1168},{},[1169,1171,1177],{"type":56,"value":1170},"Create ",{"type":50,"tag":93,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":56,"value":1176},"app\u002F_layout.tsx",{"type":56,"value":1178}," as root Stack layout",{"type":50,"tag":81,"props":1180,"children":1181},{},[1182,1183,1189],{"type":56,"value":1170},{"type":50,"tag":93,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":56,"value":1188},"app\u002F(tabs)\u002F_layout.tsx",{"type":56,"value":1190}," for tab navigation",{"type":50,"tag":81,"props":1192,"children":1193},{},[1194,1196,1202,1204,1209],{"type":56,"value":1195},"Create route files in ",{"type":50,"tag":93,"props":1197,"children":1199},{"className":1198},[],[1200],{"type":56,"value":1201},"app\u002F(tabs)\u002F",{"type":56,"value":1203}," (see ",{"type":50,"tag":85,"props":1205,"children":1206},{"href":87},[1207],{"type":56,"value":1208},"navigation.md",{"type":56,"value":1210},")",{"type":50,"tag":59,"props":1212,"children":1213},{},[1214,1216],{"type":56,"value":1215},"For web support, also install: ",{"type":50,"tag":93,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":56,"value":1221},"npx expo install react-native-web react-dom @expo\u002Fmetro-runtime",{"type":50,"tag":65,"props":1223,"children":1225},{"id":1224},"core-principles",[1226],{"type":56,"value":1227},"Core Principles",{"type":50,"tag":59,"props":1229,"children":1230},{},[1231,1237],{"type":50,"tag":1232,"props":1233,"children":1234},"strong",{},[1235],{"type":56,"value":1236},"Consult references before writing",{"type":56,"value":1238},": when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls.",{"type":50,"tag":59,"props":1240,"children":1241},{},[1242,1247,1248,1254,1256,1262],{"type":50,"tag":1232,"props":1243,"children":1244},{},[1245],{"type":56,"value":1246},"Try Expo Go first",{"type":56,"value":327},{"type":50,"tag":93,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":56,"value":1253},"npx expo start",{"type":56,"value":1255},"). Custom builds (",{"type":50,"tag":93,"props":1257,"children":1259},{"className":1258},[],[1260],{"type":56,"value":1261},"eas build",{"type":56,"value":1263},") only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go.",{"type":50,"tag":59,"props":1265,"children":1266},{},[1267,1272,1274,1280,1282,1288],{"type":50,"tag":1232,"props":1268,"children":1269},{},[1270],{"type":56,"value":1271},"Conditional rendering",{"type":56,"value":1273},": use ",{"type":50,"tag":93,"props":1275,"children":1277},{"className":1276},[],[1278],{"type":56,"value":1279},"{count > 0 && \u003CText \u002F>}",{"type":56,"value":1281}," not ",{"type":50,"tag":93,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":56,"value":1287},"{count && \u003CText \u002F>}",{"type":56,"value":1289}," (renders \"0\").",{"type":50,"tag":59,"props":1291,"children":1292},{},[1293,1298,1300,1305,1306,1311],{"type":50,"tag":1232,"props":1294,"children":1295},{},[1296],{"type":56,"value":1297},"Animation rule",{"type":56,"value":1299},": only animate ",{"type":50,"tag":93,"props":1301,"children":1303},{"className":1302},[],[1304],{"type":56,"value":917},{"type":56,"value":1159},{"type":50,"tag":93,"props":1307,"children":1309},{"className":1308},[],[1310],{"type":56,"value":925},{"type":56,"value":1312}," — GPU-composited, no layout thrash.",{"type":50,"tag":59,"props":1314,"children":1315},{},[1316,1321],{"type":50,"tag":1232,"props":1317,"children":1318},{},[1319],{"type":56,"value":1320},"Imports",{"type":56,"value":1322},": always import directly from source, not barrel files — avoids bundle bloat.",{"type":50,"tag":59,"props":1324,"children":1325},{},[1326,1331,1333,1338,1340,1346,1348,1353,1354,1359],{"type":50,"tag":1232,"props":1327,"children":1328},{},[1329],{"type":56,"value":1330},"Lists and images",{"type":56,"value":1332},": before using ",{"type":50,"tag":93,"props":1334,"children":1336},{"className":1335},[],[1337],{"type":56,"value":351},{"type":56,"value":1339}," or RN ",{"type":50,"tag":93,"props":1341,"children":1343},{"className":1342},[],[1344],{"type":56,"value":1345},"Image",{"type":56,"value":1347},", check the Component Preferences table above — ",{"type":50,"tag":93,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":56,"value":325},{"type":56,"value":1159},{"type":50,"tag":93,"props":1355,"children":1357},{"className":1356},[],[1358],{"type":56,"value":124},{"type":56,"value":1360}," are almost always the right choice.",{"type":50,"tag":59,"props":1362,"children":1363},{},[1364,1369,1371,1377],{"type":50,"tag":1232,"props":1365,"children":1366},{},[1367],{"type":56,"value":1368},"Route files",{"type":56,"value":1370},": always use kebab-case, never co-locate components\u002Ftypes\u002Futils in ",{"type":50,"tag":93,"props":1372,"children":1374},{"className":1373},[],[1375],{"type":56,"value":1376},"app\u002F",{"type":56,"value":1378},".",{"type":50,"tag":65,"props":1380,"children":1382},{"id":1381},"checklist",[1383],{"type":56,"value":1384},"Checklist",{"type":50,"tag":270,"props":1386,"children":1388},{"id":1387},"new-project-setup",[1389],{"type":56,"value":1390},"New Project Setup",{"type":50,"tag":77,"props":1392,"children":1395},{"className":1393},[1394],"contains-task-list",[1396,1416,1432,1449,1464],{"type":50,"tag":81,"props":1397,"children":1400},{"className":1398},[1399],"task-list-item",[1401,1406,1408,1414],{"type":50,"tag":1402,"props":1403,"children":1405},"input",{"disabled":1007,"type":1404},"checkbox",[],{"type":56,"value":1407}," ",{"type":50,"tag":93,"props":1409,"children":1411},{"className":1410},[],[1412],{"type":56,"value":1413},"tsconfig.json",{"type":56,"value":1415}," path aliases configured",{"type":50,"tag":81,"props":1417,"children":1419},{"className":1418},[1399],[1420,1423,1424,1430],{"type":50,"tag":1402,"props":1421,"children":1422},{"disabled":1007,"type":1404},[],{"type":56,"value":1407},{"type":50,"tag":93,"props":1425,"children":1427},{"className":1426},[],[1428],{"type":56,"value":1429},"EXPO_PUBLIC_API_URL",{"type":56,"value":1431}," env var set per environment",{"type":50,"tag":81,"props":1433,"children":1435},{"className":1434},[1399],[1436,1439,1441,1447],{"type":50,"tag":1402,"props":1437,"children":1438},{"disabled":1007,"type":1404},[],{"type":56,"value":1440}," Root layout has ",{"type":50,"tag":93,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":56,"value":1446},"GestureHandlerRootView",{"type":56,"value":1448}," (if using gestures)",{"type":50,"tag":81,"props":1450,"children":1452},{"className":1451},[1399],[1453,1456,1457,1462],{"type":50,"tag":1402,"props":1454,"children":1455},{"disabled":1007,"type":1404},[],{"type":56,"value":1407},{"type":50,"tag":93,"props":1458,"children":1460},{"className":1459},[],[1461],{"type":56,"value":571},{"type":56,"value":1463}," on all scroll views",{"type":50,"tag":81,"props":1465,"children":1467},{"className":1466},[1399],[1468,1471,1472,1477,1479,1484],{"type":50,"tag":1402,"props":1469,"children":1470},{"disabled":1007,"type":1404},[],{"type":56,"value":1407},{"type":50,"tag":93,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":56,"value":325},{"type":56,"value":1478}," instead of ",{"type":50,"tag":93,"props":1480,"children":1482},{"className":1481},[],[1483],{"type":56,"value":351},{"type":56,"value":1485}," for lists > 20 items",{"type":50,"tag":270,"props":1487,"children":1489},{"id":1488},"before-shipping",[1490],{"type":56,"value":1491},"Before Shipping",{"type":50,"tag":77,"props":1493,"children":1495},{"className":1494},[1394],[1496,1513,1530,1539,1548],{"type":50,"tag":81,"props":1497,"children":1499},{"className":1498},[1399],[1500,1503,1505,1511],{"type":50,"tag":1402,"props":1501,"children":1502},{"disabled":1007,"type":1404},[],{"type":56,"value":1504}," Profile in ",{"type":50,"tag":93,"props":1506,"children":1508},{"className":1507},[],[1509],{"type":56,"value":1510},"--profile",{"type":56,"value":1512}," mode, fix frames > 16ms",{"type":50,"tag":81,"props":1514,"children":1516},{"className":1515},[1399],[1517,1520,1522,1528],{"type":50,"tag":1402,"props":1518,"children":1519},{"disabled":1007,"type":1404},[],{"type":56,"value":1521}," Bundle analyzed (",{"type":50,"tag":93,"props":1523,"children":1525},{"className":1524},[],[1526],{"type":56,"value":1527},"source-map-explorer",{"type":56,"value":1529},"), no barrel imports",{"type":50,"tag":81,"props":1531,"children":1533},{"className":1532},[1399],[1534,1537],{"type":50,"tag":1402,"props":1535,"children":1536},{"disabled":1007,"type":1404},[],{"type":56,"value":1538}," R8 enabled for Android",{"type":50,"tag":81,"props":1540,"children":1542},{"className":1541},[1399],[1543,1546],{"type":50,"tag":1402,"props":1544,"children":1545},{"disabled":1007,"type":1404},[],{"type":56,"value":1547}," Unit + component tests for critical paths",{"type":50,"tag":81,"props":1549,"children":1551},{"className":1550},[1399],[1552,1555],{"type":50,"tag":1402,"props":1553,"children":1554},{"disabled":1007,"type":1404},[],{"type":56,"value":1556}," E2E flows for login, core feature, checkout",{"type":50,"tag":1558,"props":1559,"children":1560},"hr",{},[],{"type":50,"tag":59,"props":1562,"children":1563},{},[1564,1566,1572,1574,1580,1582,1588],{"type":56,"value":1565},"Flutter development → see ",{"type":50,"tag":93,"props":1567,"children":1569},{"className":1568},[],[1570],{"type":56,"value":1571},"flutter-dev",{"type":56,"value":1573}," skill.\niOS native (UIKit\u002FSwiftUI) → see ",{"type":50,"tag":93,"props":1575,"children":1577},{"className":1576},[],[1578],{"type":56,"value":1579},"ios-application-dev",{"type":56,"value":1581}," skill.\nAndroid native (Kotlin\u002FCompose) → see ",{"type":50,"tag":93,"props":1583,"children":1585},{"className":1584},[],[1586],{"type":56,"value":1587},"android-native-dev",{"type":56,"value":1589}," skill.",{"type":50,"tag":59,"props":1591,"children":1592},{},[1593],{"type":50,"tag":1594,"props":1595,"children":1596},"em",{},[1597],{"type":56,"value":1598},"React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.",{"type":50,"tag":1600,"props":1601,"children":1602},"style",{},[1603],{"type":56,"value":1604},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1606,"total":1726},[1607,1626,1641,1660,1675,1692,1708],{"slug":1587,"name":1587,"fn":1608,"description":1609,"org":1610,"tags":1611,"stars":26,"repoUrl":27,"updatedAt":1625},"develop Android native applications","Android native application development and UI design guide. Covers Material Design 3, Kotlin\u002FCompose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1612,1615,1618,1621,1622],{"name":1613,"slug":1614,"type":16},"Accessibility","accessibility",{"name":1616,"slug":1617,"type":16},"Android","android",{"name":1619,"slug":1620,"type":16},"Kotlin","kotlin",{"name":21,"slug":22,"type":16},{"name":1623,"slug":1624,"type":16},"UI Components","ui-components","2026-07-13T06:16:54.247834",{"slug":1627,"name":1627,"fn":1628,"description":1629,"org":1630,"tags":1631,"stars":26,"repoUrl":27,"updatedAt":1640},"buddy-sings","generate singing performances for AI companions","Use when user wants their Claude Code pet (\u002Fbuddy) to sing a song. Triggers on any request that combines the concept of their Claude Code buddy, pet, or companion with singing or music. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1632,1635,1637],{"name":1633,"slug":1634,"type":16},"Agents","agents",{"name":418,"slug":1636,"type":16},"audio",{"name":1638,"slug":1639,"type":16},"Creative","creative","2026-07-13T06:16:35.130644",{"slug":1642,"name":1642,"fn":1643,"description":1644,"org":1645,"tags":1646,"stars":26,"repoUrl":27,"updatedAt":1659},"color-font-skill","select color palettes and font pairings","Choose presentation-ready color palettes and font pairings for PPT\u002Fdesign tasks. Use when users ask for visual theme choices, brand-safe palettes, or font recommendations. Triggers include: 配色, 色板, 字体, color palette, font, PPT配色, 字体搭配.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1647,1650,1653,1656],{"name":1648,"slug":1649,"type":16},"Design","design",{"name":1651,"slug":1652,"type":16},"Presentations","presentations",{"name":1654,"slug":1655,"type":16},"Themes","themes",{"name":1657,"slug":1658,"type":16},"Typography","typography","2026-07-13T06:17:02.785587",{"slug":1661,"name":1661,"fn":1662,"description":1663,"org":1664,"tags":1665,"stars":26,"repoUrl":27,"updatedAt":1674},"design-style-skill","select visual design systems for presentations","Select a consistent visual design system for PPT slides using radius\u002Fspacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp\u002FSoft\u002FRounded\u002FPill recipes, component mappings, typography\u002Fspacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1666,1667,1670,1673],{"name":1648,"slug":1649,"type":16},{"name":1668,"slug":1669,"type":16},"Design System","design-system",{"name":1671,"slug":1672,"type":16},"PowerPoint","powerpoint",{"name":1651,"slug":1652,"type":16},"2026-07-13T06:17:10.398389",{"slug":1571,"name":1571,"fn":1676,"description":1677,"org":1678,"tags":1679,"stars":26,"repoUrl":27,"updatedAt":1691},"build cross-platform apps with Flutter","Flutter cross-platform development guide covering widget patterns, Riverpod\u002FBloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.\nUse when: building Flutter apps, implementing state management (Riverpod\u002FBloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1680,1683,1686,1687,1690],{"name":1681,"slug":1682,"type":16},"Dart","dart",{"name":1684,"slug":1685,"type":16},"Flutter","flutter",{"name":21,"slug":22,"type":16},{"name":1688,"slug":1689,"type":16},"Performance","performance",{"name":699,"slug":696,"type":16},"2026-07-13T06:16:36.626679",{"slug":1693,"name":1693,"fn":1694,"description":1695,"org":1696,"tags":1697,"stars":26,"repoUrl":27,"updatedAt":1707},"frontend-dev","build visually striking frontend web pages","Full-stack frontend development combining premium UI design, cinematic animations,\nAI-generated media assets, persuasive copywriting, and visual art. Builds complete,\nvisually striking web pages with real media, advanced motion, and compelling copy.\nUse when: building landing pages, marketing sites, product pages, dashboards,\ngenerating media assets (image\u002Fvideo\u002Faudio\u002Fmusic), writing conversion copy,\ncreating generative art, or implementing cinematic scroll animations.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1698,1701,1702,1703,1704],{"name":1699,"slug":1700,"type":16},"Animation","animation",{"name":1638,"slug":1639,"type":16},{"name":1648,"slug":1649,"type":16},{"name":24,"slug":25,"type":16},{"name":1705,"slug":1706,"type":16},"Web Development","web-development","2026-07-13T06:16:39.108827",{"slug":1709,"name":1709,"fn":1710,"description":1711,"org":1712,"tags":1713,"stars":26,"repoUrl":27,"updatedAt":1725},"fullstack-dev","build full-stack web applications","Full-stack backend architecture and frontend-backend integration guide.\nTRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service,\nbuilding todo app, building CRUD app, building real-time app, building chat app,\nExpress + React, Next.js API, Node.js backend, Python backend, Go backend,\ndesigning service layers, implementing error handling, managing config\u002Fauth,\nsetting up API clients, implementing auth flows, handling file uploads,\nadding real-time features (SSE\u002FWebSocket), hardening for production.\nDO NOT TRIGGER when: pure frontend UI work, pure CSS\u002Fstyling, database schema only.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1714,1717,1718,1721,1724],{"name":1715,"slug":1716,"type":16},"Backend","backend",{"name":24,"slug":25,"type":16},{"name":1719,"slug":1720,"type":16},"Full-stack","full-stack",{"name":1722,"slug":1723,"type":16},"REST API","rest-api",{"name":1705,"slug":1706,"type":16},"2026-07-13T06:16:43.219005",22,{"items":1728,"total":1849},[1729,1737,1743,1750,1757,1765,1773,1781,1795,1810,1829,1839],{"slug":1587,"name":1587,"fn":1608,"description":1609,"org":1730,"tags":1731,"stars":26,"repoUrl":27,"updatedAt":1625},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1732,1733,1734,1735,1736],{"name":1613,"slug":1614,"type":16},{"name":1616,"slug":1617,"type":16},{"name":1619,"slug":1620,"type":16},{"name":21,"slug":22,"type":16},{"name":1623,"slug":1624,"type":16},{"slug":1627,"name":1627,"fn":1628,"description":1629,"org":1738,"tags":1739,"stars":26,"repoUrl":27,"updatedAt":1640},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1740,1741,1742],{"name":1633,"slug":1634,"type":16},{"name":418,"slug":1636,"type":16},{"name":1638,"slug":1639,"type":16},{"slug":1642,"name":1642,"fn":1643,"description":1644,"org":1744,"tags":1745,"stars":26,"repoUrl":27,"updatedAt":1659},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1746,1747,1748,1749],{"name":1648,"slug":1649,"type":16},{"name":1651,"slug":1652,"type":16},{"name":1654,"slug":1655,"type":16},{"name":1657,"slug":1658,"type":16},{"slug":1661,"name":1661,"fn":1662,"description":1663,"org":1751,"tags":1752,"stars":26,"repoUrl":27,"updatedAt":1674},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1753,1754,1755,1756],{"name":1648,"slug":1649,"type":16},{"name":1668,"slug":1669,"type":16},{"name":1671,"slug":1672,"type":16},{"name":1651,"slug":1652,"type":16},{"slug":1571,"name":1571,"fn":1676,"description":1677,"org":1758,"tags":1759,"stars":26,"repoUrl":27,"updatedAt":1691},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1760,1761,1762,1763,1764],{"name":1681,"slug":1682,"type":16},{"name":1684,"slug":1685,"type":16},{"name":21,"slug":22,"type":16},{"name":1688,"slug":1689,"type":16},{"name":699,"slug":696,"type":16},{"slug":1693,"name":1693,"fn":1694,"description":1695,"org":1766,"tags":1767,"stars":26,"repoUrl":27,"updatedAt":1707},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1768,1769,1770,1771,1772],{"name":1699,"slug":1700,"type":16},{"name":1638,"slug":1639,"type":16},{"name":1648,"slug":1649,"type":16},{"name":24,"slug":25,"type":16},{"name":1705,"slug":1706,"type":16},{"slug":1709,"name":1709,"fn":1710,"description":1711,"org":1774,"tags":1775,"stars":26,"repoUrl":27,"updatedAt":1725},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1776,1777,1778,1779,1780],{"name":1715,"slug":1716,"type":16},{"name":24,"slug":25,"type":16},{"name":1719,"slug":1720,"type":16},{"name":1722,"slug":1723,"type":16},{"name":1705,"slug":1706,"type":16},{"slug":1782,"name":1782,"fn":1783,"description":1784,"org":1785,"tags":1786,"stars":26,"repoUrl":27,"updatedAt":1794},"gif-sticker-maker","create animated GIF stickers from photos","Convert photos (people, pets, objects, logos) into 4 animated GIF stickers with captions.\nUse when: user wants to create cartoon stickers, GIF expressions, emoji packs, animated avatars,\nor convert photos to Funko Pop \u002F Pop Mart blind box style animations.\nTriggers: sticker, GIF, cartoon, emoji, expression pack, avatar animation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1787,1788,1789,1791],{"name":1699,"slug":1700,"type":16},{"name":1638,"slug":1639,"type":16},{"name":361,"slug":1790,"type":16},"images",{"name":1792,"slug":1793,"type":16},"Media","media","2026-07-13T06:16:51.74461",{"slug":1579,"name":1579,"fn":1796,"description":1797,"org":1798,"tags":1799,"stars":26,"repoUrl":27,"updatedAt":1809},"develop iOS applications with SwiftUI and UIKit","iOS application development guide covering UIKit, SnapKit, and SwiftUI. Includes touch targets, safe areas, navigation patterns, Dynamic Type, Dark Mode, accessibility, collection views, common UI components, and SwiftUI design guidelines. For detailed references on specific topics, see the reference files.\nUse when: developing iOS apps, implementing UI, reviewing iOS code, working with UIKit\u002FSnapKit\u002FSwiftUI layouts, building iPhone interfaces, Swift mobile development, Apple HIG compliance, iOS accessibility implementation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1800,1801,1804,1805,1808],{"name":1613,"slug":1614,"type":16},{"name":1802,"slug":1803,"type":16},"iOS","ios",{"name":21,"slug":22,"type":16},{"name":1806,"slug":1807,"type":16},"SwiftUI","swiftui",{"name":1623,"slug":1624,"type":16},"2026-07-13T06:16:55.686092",{"slug":1811,"name":1811,"fn":1812,"description":1813,"org":1814,"tags":1815,"stars":26,"repoUrl":27,"updatedAt":1828},"minimax-docx","create and edit DOCX documents","Professional DOCX document creation, editing, and formatting using OpenXML SDK (.NET). Three pipelines: (A) create new documents from scratch, (B) fill\u002Fedit content in existing documents, (C) apply template formatting with XSD validation gate-check. MUST use this skill whenever the user wants to produce, modify, or format a Word document — including when they say \"write a report\", \"draft a proposal\", \"make a contract\", \"fill in this form\", \"reformat to match this template\", or any task whose final output is a .docx file. Even if the user doesn't mention \"docx\" explicitly, if the task implies a printable\u002Fformal document, use this skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1816,1819,1822,1825],{"name":1817,"slug":1818,"type":16},"Documents","documents",{"name":1820,"slug":1821,"type":16},"DOCX","docx",{"name":1823,"slug":1824,"type":16},"Office","office",{"name":1826,"slug":1827,"type":16},"Templates","templates","2026-07-13T06:16:40.461868",{"slug":1830,"name":1830,"fn":1831,"description":1832,"org":1833,"tags":1834,"stars":26,"repoUrl":27,"updatedAt":1838},"minimax-music-gen","generate music and audio tracks","Use when user wants to generate music, songs, or audio tracks. Triggers on any request involving music creation, song writing, lyrics generation, audio production, or covers. Also triggers when user provides lyrics and wants them turned into a song, or describes a mood\u002Fscene and wants background music. Supports multilingual triggers — match equivalent phrases in any language. Do NOT use for music playback of existing files, music theory questions, or music recommendation without generation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1835,1836,1837],{"name":418,"slug":1636,"type":16},{"name":1638,"slug":1639,"type":16},{"name":1792,"slug":1793,"type":16},"2026-07-13T06:16:50.381758",{"slug":1840,"name":1840,"fn":1841,"description":1842,"org":1843,"tags":1844,"stars":26,"repoUrl":27,"updatedAt":1848},"minimax-music-playlist","generate personalized music playlists","Generate personalized music playlists by analyzing the user's music taste and generation feedback history. Triggers on any request involving playlist generation, music taste profiling, or personalized music recommendations. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1845,1846,1847],{"name":418,"slug":1636,"type":16},{"name":1638,"slug":1639,"type":16},{"name":1792,"slug":1793,"type":16},"2026-07-13T06:16:57.002997",37]