[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6RC83SWMKSAC0E0BAVGJFNN":3,"skill-same:01M6RC83SWMKSAC0E0BAVGJFNN":105},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":61,"commitSha":62,"skillDirectory":63,"forksCount":64,"repositoryHtmlUrl":65,"repositoryHomepageUrl":6,"ownerHtmlUrl":66,"ownerBlogUrl":67,"ownerDescription":6,"updatedAt":68,"install":69,"resources":82},"01M6RC83SWMKSAC0E0BAVGJFNN","react-native-expert",null,"Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.","PIXARTSeu\u002FSynapse","PIXARTSeu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F274446381?v=4","01M6RB4XPN9YBZCRY4FVN9PJCT","Pixarts ","01M6RB4XTF8G9KHQEMC21FGDKD",12,"MIT","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"react","native","react native","react native expert","expert","master","when","expo mobile","rendering","input","keyboard","app","frontend","expo","mobile","modules","up","projects","code","performance","2026-11-10 10:12:30",false,"---\nname: react-native-expert\ndescription: Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.\nlicense: MIT\nmetadata:\n  author: https:\u002F\u002Fgithub.com\u002FJeffallan\n  version: \"1.1.0\"\n  domain: frontend\n  triggers: React Native, Expo, mobile app, iOS, Android, cross-platform, native module\n  role: specialist\n  scope: implementation\n  output-format: code\n  related-skills: react-expert, flutter-expert, test-master\n---\n\n# React Native Expert\n\nSenior mobile engineer building production-ready cross-platform applications with React Native and Expo.\n\n## Core Workflow\n\n1. **Setup** — Expo Router or React Navigation, TypeScript config → _run `npx expo doctor` to verify environment and SDK compatibility; fix any reported issues before proceeding_\n2. **Structure** — Feature-based organization\n3. **Implement** — Components with platform handling → _verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on_\n4. **Optimize** — FlatList, images, memory → _profile with Flipper or React DevTools_\n5. **Test** — Both platforms, real devices\n\n### Error Recovery\n- **Metro bundler errors** → clear cache with `npx expo start --clear`, then restart\n- **iOS build fails** → check Xcode logs → resolve native dependency or provisioning issue → rebuild with `npx expo run:ios`\n- **Android build fails** → check `adb logcat` or Gradle output → resolve SDK\u002FNDK version mismatch → rebuild with `npx expo run:android`\n- **Native module not found** → run `npx expo install \u003Cmodule>` to ensure compatible version, then rebuild native layers\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| Navigation | `references\u002Fexpo-router.md` | Expo Router, tabs, stacks, deep linking |\n| Platform | `references\u002Fplatform-handling.md` | iOS\u002FAndroid code, SafeArea, keyboard |\n| Lists | `references\u002Flist-optimization.md` | FlatList, performance, memo |\n| Storage | `references\u002Fstorage-hooks.md` | AsyncStorage, MMKV, persistence |\n| Structure | `references\u002Fproject-structure.md` | Project setup, architecture |\n\n## Constraints\n\n### MUST DO\n- Use FlatList\u002FSectionList for lists (not ScrollView)\n- Implement memo + useCallback for list items\n- Handle SafeAreaView for notches\n- Test on both iOS and Android real devices\n- Use KeyboardAvoidingView for forms\n- Handle Android back button in navigation\n\n### MUST NOT DO\n- Use ScrollView for large lists\n- Use inline styles extensively (creates new objects)\n- Hardcode dimensions (use Dimensions API or flex)\n- Ignore memory leaks from subscriptions\n- Skip platform-specific testing\n- Use waitFor\u002FsetTimeout for animations (use Reanimated)\n\n## Code Examples\n\n### Optimized FlatList with memo + useCallback\n\n```tsx\nimport React, { memo, useCallback } from 'react';\nimport { FlatList, View, Text, StyleSheet } from 'react-native';\n\ntype Item = { id: string; title: string };\n\nconst ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (\n  \u003CView style={styles.item}>\n    \u003CText onPress={onPress}>{title}\u003C\u002FText>\n  \u003C\u002FView>\n));\n\nexport function ItemList({ data }: { data: Item[] }) {\n  const handlePress = useCallback((id: string) => {\n    console.log('pressed', id);\n  }, []);\n\n  const renderItem = useCallback(\n    ({ item }: { item: Item }) => (\n      \u003CListItem title={item.title} onPress={() => handlePress(item.id)} \u002F>\n    ),\n    [handlePress]\n  );\n\n  return (\n    \u003CFlatList\n      data={data}\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      removeClippedSubviews\n      maxToRenderPerBatch={10}\n      windowSize={5}\n    \u002F>\n  );\n}\n\nconst styles = StyleSheet.create({\n  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },\n});\n```\n\n### KeyboardAvoidingView Form\n\n```tsx\nimport React from 'react';\nimport {\n  KeyboardAvoidingView,\n  Platform,\n  ScrollView,\n  TextInput,\n  StyleSheet,\n  SafeAreaView,\n} from 'react-native';\n\nexport function LoginForm() {\n  return (\n    \u003CSafeAreaView style={styles.safe}>\n      \u003CKeyboardAvoidingView\n        style={styles.flex}\n        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n      >\n        \u003CScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps=\"handled\">\n          \u003CTextInput style={styles.input} placeholder=\"Email\" autoCapitalize=\"none\" \u002F>\n          \u003CTextInput style={styles.input} placeholder=\"Password\" secureTextEntry \u002F>\n        \u003C\u002FScrollView>\n      \u003C\u002FKeyboardAvoidingView>\n    \u003C\u002FSafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  safe: { flex: 1 },\n  flex: { flex: 1 },\n  content: { padding: 16, gap: 12 },\n  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },\n});\n```\n\n### Platform-Specific Component\n\n```tsx\nimport { Platform, StyleSheet, View, Text } from 'react-native';\n\nexport function StatusChip({ label }: { label: string }) {\n  return (\n    \u003CView style={styles.chip}>\n      \u003CText style={styles.label}>{label}\u003C\u002FText>\n    \u003C\u002FView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 4,\n    borderRadius: 999,\n    backgroundColor: '#0a7ea4',\n    \u002F\u002F Platform-specific shadow\n    ...Platform.select({\n      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },\n      android: { elevation: 3 },\n    }),\n  },\n  label: { color: '#fff', fontSize: 13, fontWeight: '600' },\n});\n```\n\n## Output Format\n\nWhen implementing React Native features, deliver:\n1. **Component code** — TypeScript, with prop types defined\n2. **Platform handling** — `Platform.select` or `.ios.tsx` \u002F `.android.tsx` splits as needed\n3. **Navigation integration** — route params typed, back-button handling included\n4. **Performance notes** — memo boundaries, key extractor strategy, image caching\n\n## Knowledge Reference\n\nReact Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand\n","# React Native Expert\n\nSenior mobile engineer building production-ready cross-platform applications with React Native and Expo.\n\n## Core Workflow\n\n1. **Setup** — Expo Router or React Navigation, TypeScript config → _run `npx expo doctor` to verify environment and SDK compatibility; fix any reported issues before proceeding_\n2. **Structure** — Feature-based organization\n3. **Implement** — Components with platform handling → _verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on_\n4. **Optimize** — FlatList, images, memory → _profile with Flipper or React DevTools_\n5. **Test** — Both platforms, real devices\n\n### Error Recovery\n- **Metro bundler errors** → clear cache with `npx expo start --clear`, then restart\n- **iOS build fails** → check Xcode logs → resolve native dependency or provisioning issue → rebuild with `npx expo run:ios`\n- **Android build fails** → check `adb logcat` or Gradle output → resolve SDK\u002FNDK version mismatch → rebuild with `npx expo run:android`\n- **Native module not found** → run `npx expo install \u003Cmodule>` to ensure compatible version, then rebuild native layers\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| Navigation | `references\u002Fexpo-router.md` | Expo Router, tabs, stacks, deep linking |\n| Platform | `references\u002Fplatform-handling.md` | iOS\u002FAndroid code, SafeArea, keyboard |\n| Lists | `references\u002Flist-optimization.md` | FlatList, performance, memo |\n| Storage | `references\u002Fstorage-hooks.md` | AsyncStorage, MMKV, persistence |\n| Structure | `references\u002Fproject-structure.md` | Project setup, architecture |\n\n## Constraints\n\n### MUST DO\n- Use FlatList\u002FSectionList for lists (not ScrollView)\n- Implement memo + useCallback for list items\n- Handle SafeAreaView for notches\n- Test on both iOS and Android real devices\n- Use KeyboardAvoidingView for forms\n- Handle Android back button in navigation\n\n### MUST NOT DO\n- Use ScrollView for large lists\n- Use inline styles extensively (creates new objects)\n- Hardcode dimensions (use Dimensions API or flex)\n- Ignore memory leaks from subscriptions\n- Skip platform-specific testing\n- Use waitFor\u002FsetTimeout for animations (use Reanimated)\n\n## Code Examples\n\n### Optimized FlatList with memo + useCallback\n\n```tsx\nimport React, { memo, useCallback } from 'react';\nimport { FlatList, View, Text, StyleSheet } from 'react-native';\n\ntype Item = { id: string; title: string };\n\nconst ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (\n  \u003CView style={styles.item}>\n    \u003CText onPress={onPress}>{title}\u003C\u002FText>\n  \u003C\u002FView>\n));\n\nexport function ItemList({ data }: { data: Item[] }) {\n  const handlePress = useCallback((id: string) => {\n    console.log('pressed', id);\n  }, []);\n\n  const renderItem = useCallback(\n    ({ item }: { item: Item }) => (\n      \u003CListItem title={item.title} onPress={() => handlePress(item.id)} \u002F>\n    ),\n    [handlePress]\n  );\n\n  return (\n    \u003CFlatList\n      data={data}\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      removeClippedSubviews\n      maxToRenderPerBatch={10}\n      windowSize={5}\n    \u002F>\n  );\n}\n\nconst styles = StyleSheet.create({\n  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },\n});\n```\n\n### KeyboardAvoidingView Form\n\n```tsx\nimport React from 'react';\nimport {\n  KeyboardAvoidingView,\n  Platform,\n  ScrollView,\n  TextInput,\n  StyleSheet,\n  SafeAreaView,\n} from 'react-native';\n\nexport function LoginForm() {\n  return (\n    \u003CSafeAreaView style={styles.safe}>\n      \u003CKeyboardAvoidingView\n        style={styles.flex}\n        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n      >\n        \u003CScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps=\"handled\">\n          \u003CTextInput style={styles.input} placeholder=\"Email\" autoCapitalize=\"none\" \u002F>\n          \u003CTextInput style={styles.input} placeholder=\"Password\" secureTextEntry \u002F>\n        \u003C\u002FScrollView>\n      \u003C\u002FKeyboardAvoidingView>\n    \u003C\u002FSafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  safe: { flex: 1 },\n  flex: { flex: 1 },\n  content: { padding: 16, gap: 12 },\n  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },\n});\n```\n\n### Platform-Specific Component\n\n```tsx\nimport { Platform, StyleSheet, View, Text } from 'react-native';\n\nexport function StatusChip({ label }: { label: string }) {\n  return (\n    \u003CView style={styles.chip}>\n      \u003CText style={styles.label}>{label}\u003C\u002FText>\n    \u003C\u002FView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  chip: {\n    paddingHorizontal: 12,\n    paddingVertical: 4,\n    borderRadius: 999,\n    backgroundColor: '#0a7ea4',\n    \u002F\u002F Platform-specific shadow\n    ...Platform.select({\n      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },\n      android: { elevation: 3 },\n    }),\n  },\n  label: { color: '#fff', fontSize: 13, fontWeight: '600' },\n});\n```\n\n## Output Format\n\nWhen implementing React Native features, deliver:\n1. **Component code** — TypeScript, with prop types defined\n2. **Platform handling** — `Platform.select` or `.ios.tsx` \u002F `.android.tsx` splits as needed\n3. **Navigation integration** — route params typed, back-button handling included\n4. **Performance notes** — memo boundaries, key extractor strategy, image caching\n\n## Knowledge Reference\n\nReact Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand\n",{"name":5,"license":15,"metadata":54,"description":7},{"role":55,"scope":56,"author":57,"domain":41,"version":58,"triggers":59,"output-format":47,"related-skills":60},"specialist","implementation","https:\u002F\u002Fgithub.com\u002FJeffallan","1.1.0","React Native, Expo, mobile app, iOS, Android, cross-platform, native module","react-expert, flutter-expert, test-master","main","c19c0bc0a04d25a849ce749fe88250e688f06437",".agents\u002Fskills\u002Freact-native-expert",1,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse","https:\u002F\u002Fgithub.com\u002FPIXARTSeu","https:\u002F\u002Fpixarts.eu\u002F","2026-09-24 06:30:45",{"source":8,"skillName":5,"commands":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add PIXARTSeu\u002FSynapse --skill react-native-expert",{"tool":75,"command":76},"bunx","bunx skills add PIXARTSeu\u002FSynapse --skill react-native-expert",{"tool":78,"command":79},"pnpm","pnpm dlx skills add PIXARTSeu\u002FSynapse --skill react-native-expert","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002FSKILL.md",true,[83,89,93,97,101],{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fexpo-router.md","REFERENCE","参考文档",4078,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002Freferences\u002Fexpo-router.md",{"path":90,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Flist-optimization.md",4434,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002Freferences\u002Flist-optimization.md",{"path":94,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fplatform-handling.md",3881,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002Freferences\u002Fplatform-handling.md",{"path":98,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fproject-structure.md",4116,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002Freferences\u002Fproject-structure.md",{"path":102,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":103,"sourceHtmlUrl":104},"references\u002Fstorage-hooks.md",4370,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-native-expert\u002Freferences\u002Fstorage-hooks.md",[106,131,138,164,188,212],{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":114,"publishedAt":49},"01M6X0ECZKGP44NP2JW588B9RG","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[112,113],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[29,115,116,117,118,119,48,120,121,122,123,47,124,125,126,127,128,129,130,35],"vercel react best practices","best practices","react best practices","vercel","writing","components","react components","guidelines","tasks","Optimization","data","refactoring","patterns","next","triggers","data fetching",{"skillNo":132,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":137,"publishedAt":49},"01M6X05WCVH879XKZEAQ15PHQX","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Fskill\u002Fvercel-react-best-practices\u002FSKILL.md",[135,136],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[29,115,116,117,118,119,48,120,121,122,123,47,124,125,126,127,128,129,130,35],{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":148,"publishedAt":49},"01M6WZ286AR2SYE9GZYVW0CNYG","wordpress-pro","Develops custom WordPress themes and plugins, creates and registers Gutenberg blocks and block patterns, configures WooCommerce stores, implements WordPress REST API endpoints, applies security hardening (nonces, sanitization, escaping, capability checks), and optimizes performance through caching and query tuning. Use when building WordPress themes, writing plugins, customizing Gutenberg blocks, extending WooCommerce, working with ACF, using the WordPress REST API, applying hooks and filters, or improving WordPress performance and security.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fwordpress-pro\u002FSKILL.md",[144,147],{"categoryNo":145,"categoryName":146,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[149,150,151,119,152,48,47,153,154,155,156,157,158,33,159,160,161,162,163,35],"wordpress","wordpress pro","pro","security","tuning","api","laravel","reviewer","hooks","filters","query","woocommerce","caching","themes","sanitization",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":172,"publishedAt":49},"01M6WZ1ZVG6PJ4PVN9RTK0BX7Z","websocket-engineer","Use when building real-time communication systems with WebSockets or Socket.IO. Invoke for bidirectional messaging, horizontal scaling with Redis, presence tracking, room management.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fwebsocket-engineer\u002FSKILL.md",[170,171],{"categoryNo":145,"categoryName":146,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[173,174,175,176,47,177,178,154,156,179,33,180,181,182,183,184,185,186,187,35],"websocket","engineer","websocket engineer","architecture","messaging","monitoring","fastapi","time","scaling","io","communication systems","presence","updates","socket","invoke",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":197,"publishedAt":49},"01M6WZ1G86ZR73H0WNM6CGNRGF","vue-expert","Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR\u002FSSG projects, sets up Pinia stores, scaffolds Quasar\u002FCapacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fvue-expert\u002FSKILL.md",[194,195,196],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":145,"categoryName":146,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[198,33,199,41,119,200,120,201,202,203,46,204,205,206,207,43,208,209,210,211],"vue","vue expert","typescript","config","applications","Composition","pinia","use","router","workers","reusable","worker","apps","hybrid",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":216,"categories":217,"keywords":220,"publishedAt":49},"01M6WZ1AP3GFCBAMD712X8KRP7","vue-expert-js","Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fvue-expert-js\u002FSKILL.md",[218,219],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[198,221,33,222,199,41,200,120,47,154,203,46,223,224,45,44,225,226,227,35],"js","vue expert js","coverage","only","options","jsdoc","quick"]