{"id":"d6b8ccdc-1061-4dcd-bcb7-f4a3219c1b3c","shortId":"QwTgz6","kind":"skill","title":"building-native-ui","tagline":"Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.","description":"# Expo UI Guidelines\n\n## When to Use\n- You are building a native-feeling Expo Router application and need guidance on navigation, controls, effects, or platform-specific UI.\n- You need to decide whether Expo Go is sufficient or a custom native build is actually required.\n- The task involves modern Expo UI patterns across animations, tabs, headers, storage, media, or visual effects.\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences/\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction. \n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  route-structure.md     Route conventions, dynamic routes, groups, folder organization\n  search.md              Search bar with headers, useSearch hook, filtering patterns\n  storage.md             SQLite, AsyncStorage, SecureStore\n  tabs.md                NativeTabs, migration from JS tabs, iOS 26 features\n  toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)\n  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)\n```\n\n## Running the App\n\n**CRITICAL: Always try Expo Go first before creating custom builds.**\n\nMost Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:\n\n1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go\n2. **Check if features work**: Test your app thoroughly in Expo Go\n3. **Only create custom builds when required** - see below\n\n### When Custom Builds Are Required\n\nYou need `npx expo run:ios/android` or `eas build` ONLY when using:\n\n- **Local Expo modules** (custom native code in `modules/`)\n- **Apple targets** (widgets, app clips, extensions via `@bacons/apple-targets`)\n- **Third-party native modules** not included in Expo Go\n- **Custom native configuration** that can't be expressed in `app.json`\n\n### When Expo Go Works\n\nExpo Go supports a huge range of features out of the box:\n\n- All `expo-*` packages (camera, location, notifications, etc.)\n- Expo Router navigation\n- Most UI libraries (reanimated, gesture handler, etc.)\n- Push notifications, deep links, and more\n\n**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode/Android Studio setup.\n\n## Code Style\n\n- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.\n- Always use import statements at the top of the file.\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- Always remove old route files when moving or restructuring navigation\n- Never use special characters in file names\n- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.\n\n## Routes\n\nSee `./references/route-structure.md` for detailed route conventions.\n\n- Routes belong in the `app` directory.\n- Never co-locate components, types, or utilities in the app directory. This is an anti-pattern.\n- Ensure the app always has a route that matches \"/\", it may be inside a group route.\n\n## Library Preferences\n\n- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage\n- Never use legacy expo-permissions\n- `expo-audio` not `expo-av`\n- `expo-video` not `expo-av`\n- `expo-image` with `source=\"sf:name\"` for SF Symbols, not `expo-symbols` or `@expo/vector-icons`\n- `react-native-safe-area-context` not react-native SafeAreaView\n- `process.env.EXPO_OS` not `Platform.OS`\n- `React.use` not `React.useContext`\n- `expo-image` Image component instead of intrinsic element `img`\n- `expo-glass-effect` for liquid glass backdrops\n\n## Responsiveness\n\n- Always wrap root component in a scroll view for responsiveness\n- Use `<ScrollView contentInsetAdjustmentBehavior=\"automatic\" />` instead of `<SafeAreaView>` for smarter safe area insets\n- `contentInsetAdjustmentBehavior=\"automatic\"` should be applied to FlatList and SectionList as well\n- Use flexbox instead of Dimensions API\n- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size\n\n## Behavior\n\n- Use expo-haptics conditionally on iOS to make more delightful experiences\n- Use views with built-in haptics like `<Switch />` from React Native and `@react-native-community/datetimepicker`\n- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior=\"automatic\"` set\n- When adding a `ScrollView` to the page it should almost always be the first component inside the route component\n- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar\n- Use the `<Text selectable />` prop on text containing data that could be copied\n- Consider formatting large numbers like 1.4M or 38k\n- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component\n\n# Styling\n\nFollow Apple Human Interface Guidelines.\n\n## General Styling Rules\n\n- Prefer flex gap over margin and padding styles\n- Prefer padding over margin where possible\n- Always account for safe area, either with stack headers, tabs, or ScrollView/FlatList `contentInsetAdjustmentBehavior=\"automatic\"`\n- Ensure both top and bottom safe area insets are accounted for\n- Inline styles not StyleSheet.create unless reusing styles is faster\n- Add entering and exiting animations for state changes\n- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape\n- ALWAYS use a navigation stack title instead of a custom text element on the page\n- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)\n- CSS and Tailwind are not supported - use inline styles\n\n## Text Styling\n\n- Add the `selectable` prop to every `<Text/>` element displaying important data or error messages\n- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment\n\n## Shadows\n\nUse CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.\n\n```tsx\n<View style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} />\n```\n\n'inset' shadows are supported.\n\n# Navigation\n\n## Link\n\nUse `<Link href=\"/path\" />` from 'expo-router' for navigation between routes.\n\n```tsx\nimport { Link } from 'expo-router';\n\n// Basic link\n<Link href=\"/path\" />\n\n// Wrapping custom components\n<Link href=\"/path\" asChild>\n  <Pressable>...</Pressable>\n</Link>\n```\n\nWhenever possible, include a `<Link.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.\n\n## Stack\n\n- ALWAYS use `_layout.tsx` files to define stacks\n- Use Stack from 'expo-router/stack' for native navigation stacks\n\n### Page Title\n\nSet the page title in Stack.Screen options:\n\n```tsx\n<Stack.Screen options={{ title: \"Home\" }} />\n```\n\n## Context Menus\n\nAdd long press context menus to Link components:\n\n```tsx\nimport { Link } from \"expo-router\";\n\n<Link href=\"/settings\" asChild>\n  <Link.Trigger>\n    <Pressable>\n      <Card />\n    </Pressable>\n  </Link.Trigger>\n  <Link.Menu>\n    <Link.MenuAction\n      title=\"Share\"\n      icon=\"square.and.arrow.up\"\n      onPress={handleSharePress}\n    />\n    <Link.MenuAction\n      title=\"Block\"\n      icon=\"nosign\"\n      destructive\n      onPress={handleBlockPress}\n    />\n    <Link.Menu title=\"More\" icon=\"ellipsis\">\n      <Link.MenuAction title=\"Copy\" icon=\"doc.on.doc\" onPress={() => {}} />\n      <Link.MenuAction\n        title=\"Delete\"\n        icon=\"trash\"\n        destructive\n        onPress={() => {}}\n      />\n    </Link.Menu>\n  </Link.Menu>\n</Link>;\n```\n\n## Link Previews\n\nUse link previews frequently to enhance navigation:\n\n```tsx\n<Link href=\"/settings\">\n  <Link.Trigger>\n    <Pressable>\n      <Card />\n    </Pressable>\n  </Link.Trigger>\n  <Link.Preview />\n</Link>\n```\n\nLink preview can be used with context menus.\n\n## Modal\n\nPresent a screen as a modal:\n\n```tsx\n<Stack.Screen name=\"modal\" options={{ presentation: \"modal\" }} />\n```\n\nPrefer this to building a custom modal component.\n\n## Sheet\n\nPresent a screen as a dynamic form sheet:\n\n```tsx\n<Stack.Screen\n  name=\"sheet\"\n  options={{\n    presentation: \"formSheet\",\n    sheetGrabberVisible: true,\n    sheetAllowedDetents: [0.5, 1.0],\n    contentStyle: { backgroundColor: \"transparent\" },\n  }}\n/>\n```\n\n- Using `contentStyle: { backgroundColor: \"transparent\" }` makes the background liquid glass on iOS 26+.\n\n## Common route structure\n\nA standard app layout with tabs and stacks inside each tab:\n\n```\napp/\n  _layout.tsx — <NativeTabs />\n  (index,search)/\n    _layout.tsx — <Stack />\n    index.tsx — Main list\n    search.tsx — Search view\n```\n\n```tsx\n// app/_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router/unstable-native-tabs\";\nimport { Theme } from \"../components/theme\";\n\nexport default function Layout() {\n  return (\n    <Theme>\n      <NativeTabs>\n        <NativeTabs.Trigger name=\"(index)\">\n          <Icon sf=\"list.dash\" />\n          <Label>Items</Label>\n        </NativeTabs.Trigger>\n        <NativeTabs.Trigger name=\"(search)\" role=\"search\" />\n      </NativeTabs>\n    </Theme>\n  );\n}\n```\n\nCreate a shared group route so both tabs can push common screens:\n\n```tsx\n// app/(index,search)/_layout.tsx\nimport { Stack } from \"expo-router/stack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n  const screen = segment.match(/\\((.*)\\)/)?.[1]!;\n  const titles: Record<string, string> = { index: \"Items\", search: \"Search\" };\n\n  return (\n    <Stack\n      screenOptions={{\n        headerTransparent: true,\n        headerShadowVisible: false,\n        headerLargeTitleShadowVisible: false,\n        headerLargeStyle: { backgroundColor: \"transparent\" },\n        headerTitleStyle: { color: PlatformColor(\"label\") },\n        headerLargeTitle: true,\n        headerBlurEffect: \"none\",\n        headerBackButtonDisplayMode: \"minimal\",\n      }}\n    >\n      <Stack.Screen name={screen} options={{ title: titles[screen] }} />\n      <Stack.Screen name=\"i/[id]\" options={{ headerLargeTitle: false }} />\n    </Stack>\n  );\n}\n```\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["building","native","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-building-native-ui","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/building-native-ui","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34882 github stars · SKILL.md body (10,887 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T12:50:42.262Z","embedding":null,"createdAt":"2026-04-18T21:33:48.979Z","updatedAt":"2026-04-24T12:50:42.262Z","lastSeenAt":"2026-04-24T12:50:42.262Z","tsv":"'/_layout.tsx':1199 '/components/theme':1176 '/datetimepicker':684 '/references/route-structure.md':477 '/stack':997,1206 '/unstable-native-tabs':1172 '0':931,935,936,937 '0.05':938 '0.5':1120 '1':257,1221 '1.0':1121 '1.4':750 '18':220 '1px':932 '2':274 '26':177,1136 '2px':933 '3':286 '38k':753 '3d':202 'account':794,816 'across':76 'actual':67 'ad':706 'add':398,730,827,890,974,1018 'alias':466,469 'align':911 'almost':696,714 'alway':225,425,435,445,509,611,646,697,715,793,846,984 'android':256 'anim':19,77,140,831 'animations.md':92 'anti':504 'anti-pattern':503 'api':645 'app':10,223,236,281,323,486,498,508,1142,1151,1196 'app.json':347 'app/_layout.tsx':1163 'appl':212,320,772 'appli':633 'applic':39 'arch':128 'area':578,627,797,813 'ask':1300 'asyncstorag':168,537 'audio':144,546 'automat':630,703,806 'av':550,557 'backdrop':609 'background':119,1131 'backgroundcolor':1123,1127,1241 'backgroundimag':126 'backtick':416 'bacons/apple-targets':327 'bar':159,733 'basic':961 'beauti':9 'behavior':655 'belong':483,688 'block':1042 'blur':190,193 'bordercurv':836 'bottom':811 'boundari':1308 'box':363 'boxshadow':915,930 'build':2,8,32,65,233,290,297,308,397,1096 'building-native-ui':1 'built':672 'built-in':671 'button':184 'camera':143,367 'capsul':844 'case':439 'cautious':410 'chang':834 'charact':458 'check':275 'child':694 'clarif':1302 'clear':1275 'clip':324,878 'co':490 'co-loc':489 'code':245,270,317,407 'color':1244 'comment-card.tsx':444 'common':1137,1193 'communiti':683 'complet':5 'complex':399 'compon':17,492,596,614,719,723,769,965,1025,1100 'condit':660 'configur':116,340,462 'consid':745 'const':1218,1222 'consult':86 'contain':739 'contentcontainerstyl':866 'contentinsetadjustmentbehavior':629,702,805 'contentstyl':1122,1126 'context':579,975,1016,1021,1077 'continu':837 'control':45 'controls.md':101 'convent':151,481,973 'copi':744,1050 'corner':840 'correct':424 'could':742 'counter':903 'cover':14 'creat':231,288,395,842,1183 'criteria':1311 'critic':224 'css':122,879,914 'custom':63,232,243,289,296,315,338,396,855,964,1098 'data':740,899 'datetimepick':107 'decid':55 'deep':383 'default':1178,1214 'defin':989 'delet':1056 'delight':666 'describ':1279 'destruct':1045,1059 'detail':479 'dimens':644 'dimensions.get':650 'directori':487,499 'display':897 'div':761 'doc.on.doc':1052 'dom':768 'driven':99 'dynam':152,1107 'e.g':443 'ea':307 'effect':46,84,200,605 'either':798 'element':600,757,857,896 'elev':925 'enhanc':981,1068 'ensur':414,506,807 'enter':94,828 'environ':1291 'environment-specif':1290 'error':901 'escap':418,422 'etc':370,380 'everi':895 'exit':95,830 'experi':667 'experiment':125 'expert':1296 'expo':12,24,37,57,73,114,135,192,198,227,235,239,249,254,260,264,272,284,303,313,336,349,352,365,371,392,542,545,549,552,556,559,570,593,603,658,767,948,959,995,1031,1170,1204 'expo-audio':544 'expo-av':548,555 'expo-blur':191 'expo-glass-effect':197,602 'expo-hapt':657 'expo-imag':134,558,592 'expo-permiss':541 'expo-rout':113,947,958,994,1030,1169,1203 'expo-symbol':569 'expo-video':551 'expo/vector-icons':573 'export':1177,1213 'express':345 'extens':325 'fals':1237,1239,1266 'faster':826 'featur':178,277,359 'feel':36 'file':147,434,441,449,460,987 'filter':164 'first':229,394,693,718 'flatlist':635 'flex':780 'flexbox':641 'fluid':214 'folder':155 'follow':771,971 'fontvari':906 'footer':117 'forget':420 'form':110,1108 'form-sheet.md':109 'format':746 'formsheet':1116 'frequent':979,1066 'function':1179,1215 'fundament':15 'game':204 'gap':781,869 'general':776 'gestur':100,378 'glass':196,199,604,608,1133 'go':58,228,240,261,273,285,337,350,353,393 'gpu':205 'gradient':123 'gradients.md':121 'graphic':203 'group':154,520,1186 'guid':6 'guidanc':42 'guidelin':26,775 'handleblockpress':1047 'handler':379 'handlesharepress':1039 'haptic':659,674 'header':79,161,181,801 'headerbackbuttondisplaymod':1251 'headerblureffect':1249 'headerlargestyl':1240 'headerlargetitl':1247,1265 'headerlargetitleshadowvis':1238 'headersearchbaropt':725 'headershadowvis':1236 'headertitlestyl':1243 'headertranspar':1234 'home':1015 'hook':163 'huge':356 'human':773 'icon':1036,1043,1051,1057,1166 'icons.md':130 'id':1263 'imag':136,560,594,595 'img':601,759 'import':427,472,898,955,1027,1164,1173,1200,1207 'includ':334,968 'index':1153,1197,1227 'index.tsx':1156 'inlin':818,886 'input':1305 'inset':628,814,939 'insid':518,720,1148 'instead':597,622,642,852,870 'interact':120 'interfac':774 'intrins':599,756 'involv':71 'io':103,176,187,219,251,662,972,1135 'ios/android':305 'item':1182,1228 'iter':401 'js':174 'kebab':438 'kebab-cas':437 'label':1167,1246 'larg':747 'layout':96,1143,1180,1216 'layout.tsx':986,1152,1155 'legaci':540,920 'librari':376,522 'like':675,749,758 'limit':1267 'link':384,944,956,962,1024,1028,1061,1064,1071 'link.applezoom':218 'link.menuaction':1033,1040,1048,1054 'liquid':195,607,1132 'list':1158 'local':312 'locat':368,491 'long':1019 'm':751 'main':1157 'make':664,1129 'margin':783,790 'match':514,1276 'may':516 'measur':652 'media':81 'media.md':142 'menus':185,976,1017,1022,1078 'messag':902 'migrat':172 'minim':1252 'miss':1313 'modal':1079,1085,1089,1092,1099 'modern':72 'modul':314,319,332,526 'move':451 'name':139,442,461,564,1088,1112,1254,1261 'nativ':3,22,35,64,102,244,316,331,339,530,576,583,678,682,922,999,1212 'native-feel':34 'nativetab':171,1165 'navig':18,44,373,454,849,943,951,982,1000,1069 'need':41,53,90,301 'nest':415 'never':419,455,488,524,538,754,918 'new':127 'none':1250 'nosign':1044 'notif':369,382 'npx':248,253,263,302 'num':909 'number':748 'old':447 'onpress':1038,1046,1053,1060 'option':728,1010,1013,1090,1114,1256,1264 'organ':156 'os':586 'output':1285 'packag':366 'pad':785,788,862,867,872 'page':711,860,1002,1006 'parti':330 'path':465 'pattern':20,75,165,505 'permiss':543,1306 'picker':108,533 'platform':49 'platform-specif':48 'platform.os':588 'platformcolor':1208,1245 'possibl':792,967 'prefer':468,523,647,724,779,787,1093 'present':1080,1091,1102,1115 'press':1020 'preview':978,1062,1065,1072 'process.env.expo':585 'prop':736,893,917 'push':381,1192 'qr':269 'quot':423 'rang':357 're':389 'react':529,575,582,677,681,921,1211 'react-nat':581,1210 'react-native-commun':680 'react-native-safe-area-context':574 'react.use':589 'react.usecontext':591 'reanim':93,377 'record':1224 'reduc':877 'refactor':474 'refer':85,91 'relat':471 'remov':446,527 'requir':68,292,299,403,1304 'resourc':88 'respons':610,620 'restructur':453 'return':1181,1231 'reus':823 'review':1297 'rgba':934 'root':613 'round':839 'rout':150,153,448,475,480,482,512,521,687,722,953,1138,1187 'route-structure.md':149 'router':13,38,115,372,949,960,996,1032,1171,1205 'rule':778 'run':221,247,250,255,262,304 'safe':577,626,796,812 'safeareaview':535,584 'safeti':1307 'save':148 'scan':267 'scope':1278 'screen':653,1082,1104,1194,1219,1255,1259 'screenopt':1233 'scroll':98,617 'scroll-driven':97 'scrollview':700,708,864,875 'scrollview/flatlist':804 'search':158,186,732,1154,1160,1198,1229,1230 'search.md':157 'search.tsx':1159 'sectionlist':637 'securestor':169 'see':293,476 'segment':1217 'segment.match':1220 'segmentedcontrol':106 'select':892 'set':704,1004 'setup':406 'sf':131,137,563,566 'shadow':912,923,940 'shape':845 'share':1035,1185 'sheet':111,1101,1109,1113 'sheetalloweddet':1119 'sheetgrabbervis':1117 'size':654 'skill':1270 'skill-building-native-ui' 'slider':105 'slower':400 'smarter':625 'sourc':138,562 'source-sickn33' 'special':457 'specif':50,1292 'sqlite':167 'square.and.arrow.up':1037 'stack':180,691,800,850,983,990,992,1001,1147,1201,1232 'stack.screen':727,1009,1012,1087,1111,1253,1260 'standard':1141 'start':258,265 'state':833 'statement':428 'stop':1298 'storag':80 'storage.md':166 'string':413,1225,1226 'structur':1139 'studio':405 'style':16,408,770,777,786,819,824,887,889,916,926,929 'stylesheet.create':821 'substitut':1288 'success':1310 'suffici':60 'support':354,884,942 'switch':104 'symbol':132,567,571 'tab':23,78,175,802,1145,1150,1190 'tabs.md':170 'tabular':908 'tabular-num':907 'tailwind':881 'target':321 'task':70,1274 'test':279,1294 'text':738,856,888 'theme':1174 'third':329 'third-parti':328 'thorough':282 'three.js':210 'titl':851,1003,1007,1014,1034,1041,1049,1055,1223,1257,1258 'toolbar':183 'toolbar-and-headers.md':179 'top':431,809 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transit':216 'transpar':1124,1128,1242 'trash':1058 'treat':1283 'tri':226,391 'true':1118,1235,1248 'tsconfig.json':463 'tsx':927,954,1011,1026,1070,1086,1110,1162,1195 'type':493 'ui':4,25,51,74,375 'unless':762,822,841 'unsur':390 'untermin':412 'use':29,311,426,436,456,525,539,621,640,656,668,734,755,835,847,865,885,905,913,919,945,985,991,1063,1075,1125,1268 'usesearch':162 'usewindowdimens':648 'util':495 'valid':1293 'via':124,133,326 'video':145,553 'view':618,669,928,1161 'visual':83,206 'visual-effects.md':189 'webgpu':208 'webgpu-three.md':201 'webview':534,765 'weight':141 'well':639 'whenev':966 'whether':56 'widget':322 'without':241 'work':237,278,351 'wrap':612,963 'xcode/android':404 'zoom':213,215 'zoom-transitions.md':211","prices":[{"id":"31574f5f-921f-4f33-b20b-9c910736b308","listingId":"d6b8ccdc-1061-4dcd-bcb7-f4a3219c1b3c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:33:48.979Z"}],"sources":[{"listingId":"d6b8ccdc-1061-4dcd-bcb7-f4a3219c1b3c","source":"github","sourceId":"sickn33/antigravity-awesome-skills/building-native-ui","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/building-native-ui","isPrimary":false,"firstSeenAt":"2026-04-18T21:33:48.979Z","lastSeenAt":"2026-04-24T12:50:42.262Z"}],"details":{"listingId":"d6b8ccdc-1061-4dcd-bcb7-f4a3219c1b3c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"building-native-ui","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34882,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"fe91dcf570d9d042a826b813ffaa9e832db938bd","skill_md_path":"skills/building-native-ui/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/building-native-ui"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"building-native-ui","license":"MIT","description":"Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/building-native-ui"},"updatedAt":"2026-04-24T12:50:42.262Z"}}