[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCV91DGDHC4ZKXBH1050GN":3,"skill-same:01M6FCV91DGDHC4ZKXBH1050GN":53},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6FCV91DGDHC4ZKXBH1050GN","react-to-ios",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmichaelboeding\u002Fskills\u002Freact-to-ios\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25],"react","ios","react to ios","2026-11-10 10:12:30",false,"# React to iOS: Feature Parity Implementation\n\nUse React\u002FReact Native code as the reference to implement the equivalent native iOS feature. Not a literal translation - understand what the React code does, then implement it idiomatically for iOS.\n\n**Use this when:**\n- Porting a feature from React\u002FReact Native to native iOS\n- React is the \"source of truth\" for a feature\n- Building native iOS alternatives to web components\n- Migrating from React Native to native Swift\n\n## Key Principle\n\n```\nReact Code → Understand Feature → Match iOS Codebase Patterns → Implement\n                 (what)                  (how it's done here)\n```\n\n**Preserved:** Feature behavior, data structure shapes, business logic, user flows, API contracts\n**Adapted:** Language idioms, frameworks, UI patterns to match the iOS codebase\n\n---\n\n## Common Mappings Reference\n\n| React\u002FReact Native | iOS\u002FSwift Equivalent |\n|--------------------|---------------------|\n| `useState` | `@State` \u002F `@Published` |\n| `useEffect` | `.onAppear` \u002F `.task` \u002F `viewDidLoad` |\n| `useContext` | Environment objects \u002F Dependency injection |\n| `useMemo` \u002F `useCallback` | Computed properties \u002F lazy vars |\n| `useReducer` | State machine \u002F Combine |\n| Props | Init parameters \u002F Bindings |\n| `View` \u002F `div` | SwiftUI `View` \u002F UIKit `UIView` |\n| `Text` | `Text` \u002F `UILabel` |\n| `Image` | `Image` \u002F `UIImageView` |\n| `ScrollView` | `ScrollView` \u002F `UIScrollView` |\n| `FlatList` | `List` \u002F `LazyVStack` \u002F `UITableView` |\n| `TouchableOpacity` | `Button` \u002F tap gestures |\n| `TextInput` | `TextField` \u002F `UITextField` |\n| `StyleSheet` | SwiftUI modifiers \u002F UIKit constraints |\n| `fetch` \u002F `axios` | `URLSession` \u002F async-await |\n| Redux \u002F Zustand | Combine \u002F SwiftUI state \u002F TCA |\n| React Navigation | `NavigationStack` \u002F `UINavigationController` |\n| React Query \u002F SWR | Async\u002Fawait patterns \u002F Combine |\n| Styled Components | View modifiers \u002F custom ViewModifiers |\n| Context Providers | `@EnvironmentObject` \u002F DI containers |\n\n---\n\n## Workflow\n\n### Step 0: Gather Context\n\n**Ask the user for both pieces of information:**\n\n```\nTo port a feature from React to iOS, I need:\n\n1. PATH TO REACT CODEBASE (source of truth)\n   Where is the React\u002FReact Native project located?\n   Example: \u002Fpath\u002Fto\u002Freact-app or ..\u002Freact-native-app\n\n2. FEATURE TO IMPLEMENT\n   What feature or component should I port?\n   Example: \"UserProfile component\" or \"the checkout flow\" or \"src\u002Fcomponents\u002FDashboard\"\n```\n\n**Assumptions:**\n- Current working directory = iOS codebase (target)\n- User provides path to React codebase (source)\n\nIf the user already provided this info, proceed. Otherwise, ask.\n\n### Step 1: Locate the React Feature\n\nNavigate to the React codebase path and find the relevant files:\n\n1. Go to the React path provided\n2. Find files related to the feature (components, hooks, stores, utils)\n3. Read and understand the implementation\n\n**Files to look for:**\n- Component files (`.tsx`, `.jsx`, `.js`)\n- Custom hooks (`use*.ts`)\n- State management (Redux slices, Zustand stores, Context)\n- API services\n- Types\u002Finterfaces (`.ts`, `.d.ts`)\n- Styles (CSS modules, styled-components, StyleSheet)\n\n### Step 2: Analyze the React Code\n\nThoroughly understand:\n\n| Aspect | What to Extract |\n|--------|-----------------|\n| **Feature Behavior** | What does this feature do? User-facing functionality |\n| **Component Structure** | Component hierarchy, props, composition patterns |\n| **State Management** | useState, useReducer, Redux, Context usage |\n| **Side Effects** | useEffect patterns, data fetching, subscriptions |\n| **Business Logic** | Validations, transformations, calculations |\n| **API Contracts** | Network calls, request\u002Fresponse shapes |\n| **UI Flow** | Screens, navigation, user interactions |\n| **Edge Cases** | Error handling, loading states, empty states |\n\n```\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n                  REACT FEATURE ANALYSIS\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n## Feature: [Name]\n\n### What It Does\n[User-facing description]\n\n### Component Structure\n[Component hierarchy and relationships]\n\n### Props & State\n[Key props, state variables, their purposes]\n\n### Side Effects\n[What useEffect\u002Fdata fetching does]\n\n### Business Logic\n[Core logic summary]\n\n### API Calls\n[Endpoints, request\u002Fresponse shapes]\n\n### UI Flow\n[Screens, navigation, interactions]\n\n### Edge Cases Handled\n- [Case 1]\n- [Case 2]\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n```\n\n### Step 3: Analyze iOS Codebase Patterns\n\n**Before implementing, understand how THIS iOS codebase does things:**\n\n1. **Check if `.claude\u002Fcodebase-style.md` exists** - If yes, use it and skip manual analysis\n2. Find similar features in the codebase\n3. Note the patterns used:\n   - Architecture pattern (MVVM, MVC, TCA, VIPER)\n   - UI framework (SwiftUI vs UIKit)\n   - State management approach\n   - Networking approach\n   - Dependency injection\n   - File\u002Ffolder organization\n   - Naming conventions\n\n```\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n                 iOS CODEBASE PATTERNS\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nStyle Guide: [Found \u002F Not found]\n\nPatterns observed from existing code:\n- Architecture: [MVVM \u002F MVC \u002F TCA \u002F VIPER \u002F etc.]\n- UI Framework: [SwiftUI \u002F UIKit \u002F Mixed]\n- State: [how state is managed]\n- Networking: [how API calls are made]\n- DI: [how dependencies are injected]\n- Navigation: [how navigation works]\n\nSimilar features to reference:\n- [Feature 1]: [path]\n- [Feature 2]: [path]\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n```\n\n### Step 4: Create Implementation Plan\n\nMap the React feature to iOS equivalents **using the patterns from Step 3**:\n\n```\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n                  IMPLEMENTATION PLAN\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n## Files to Create\n\n| # | File | Purpose | React Equivalent |\n|---|------|---------|------------------|\n| 1 | [path matching codebase conventions] | [purpose] | [React file] |\n| 2 | ... | ... | ... |\n\n## Key Mappings\n\n| React Concept | iOS Equivalent (matching codebase patterns) |\n|---------------|---------------------------------------------|\n| [React thing] | [iOS equivalent as done in this codebase] |\n| ... | ... |\n\n## State Migration\n\n| React State | iOS State Management |\n|-------------|---------------------|\n| [useState\u002FRedux\u002Fetc.] | [How it maps to iOS patterns] |\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n```\n\n### Step 5: Implement\n\nCreate the iOS implementation:\n\n- **Match the codebase's existing patterns exactly**\n- Use the same architecture, UI patterns, state management as other features\n- Follow the same naming conventions\n- Keep data structure shapes equivalent for API compatibility\n- Translate React patterns to idiomatic Swift\u002FSwiftUI\n\n**Pattern Translation Tips:**\n\n| React Pattern | iOS Implementation |\n|---------------|-------------------|\n| Component with props | `View` with init parameters or `@Binding` |\n| useState + setState | `@State` property with direct mutation |\n| useEffect on mount | `.onAppear` or `.task` modifier |\n| useEffect with deps | `.onChange(of:)` modifier |\n| useEffect cleanup | `.onDisappear` or `task` cancellation |\n| Conditional rendering | `if\u002Felse` or `@ViewBuilder` |\n| List mapping | `ForEach` |\n| Event handlers | Action closures or Bindings |\n| CSS\u002FStyleSheet | SwiftUI modifiers or custom `ViewModifier` |\n\n**⚠️ IMPORTANT: After creating each `.swift` file, register it with Xcode:**\n\n```bash\nruby ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Fadd-to-xcode\u002Fscripts\u002Fadd_to_xcode.rb \u003Cfilepath>\n```\n\nWithout this step, files won't appear in Xcode or compile. See the `add-to-xcode` skill.\n\n### Step 6: Copy Assets (if needed)\n\n**If the feature uses assets, offer to copy them:**\n\nAssets that may need to be copied:\n- Images, icons (convert to Asset Catalog format)\n- Colors (convert to Color Sets)\n- Fonts\n- Lottie animations\n- Sounds\n\nIf assets are needed and the user wants them copied, use file operations to transfer and convert them appropriately for iOS.\n\n### Step 7: Report Results\n\n```\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n                 REACT → iOS COMPLETE\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n## Feature: [Name]\n\n### Files Created\n\n| File | Purpose |\n|------|---------|\n| [path] | [description] |\n\n### Feature Parity Checklist\n\n- [x] Core functionality matches React\n- [x] Data structures equivalent\n- [x] State management properly translated\n- [x] Side effects handled\n- [x] Error handling preserved\n- [x] Loading states preserved\n- [x] Edge cases handled\n- [x] Matches iOS codebase patterns\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n```\n\n---\n\n## Triggers\n\n```\n\"react to ios\"\n\"react native to ios\"\n\"convert from react\"\n\"port this react component to swift\"\n\"implement this react feature for ios\"\n\"ios version of this react code\"\n\"native ios from react native\"\n\"migrate react native to swift\"\n```\n\n---\n\n## Integration with style-guide\n\n**Recommended:** Run the `style-guide` skill on the iOS codebase first.\n\n```\nstyle guide    ← Run this first on iOS codebase\nreact to ios   ← Then run this\n```\n\nThis generates `.claude\u002Fcodebase-style.md` which this skill will automatically reference.\n\n**If style guide exists:**\n- Skip manual pattern analysis (Step 3)\n- Reference the documented patterns directly\n- Ensure perfect consistency with existing code\n\n**If no style guide:**\n- This skill will analyze patterns manually (Step 3)\n- Consider running `style-guide` first for better results\n\n---\n\n## Tips\n\n1. **Don't translate literally** - Understand the feature, then implement idiomatically\n2. **Match the codebase** - Use the same patterns as existing iOS code\n3. **Keep data shapes equivalent** - API compatibility matters\n4. **Handle paradigm differences** - React is declarative but different from SwiftUI\n5. **Verify feature parity** - Same behavior, not same code\n6. **Consider lifecycle differences** - React component lifecycle ≠ SwiftUI view lifecycle\n7. **State is different** - React re-renders on state change; SwiftUI uses property wrappers\n8. **Navigation differs** - React Router\u002FNavigation vs NavigationStack patterns\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fmichaelboeding\u002Fskills\u002Freact-to-ios",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-to-ios",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-to-ios",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-to-ios","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmichaelboeding\u002Fskills\u002Freact-to-ios\u002FSKILL.md",true,[],[54,66,76,85,91,98],{"skillNo":55,"name":56,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":62,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[59],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[63,64,65],"model","model hierarchy","model hierarchy skill",{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":72,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[71],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},[73,74,75],"MCP","zoom","zoom mcp",{"skillNo":77,"name":78,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[82,83,84,74],"sdk","zoom apps sdk","apps",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[87],{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":97,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[96],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},[93],{"skillNo":99,"name":100,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[100]]