{
  "schemaVersion": "1.0",
  "item": {
    "slug": "vercel-react-native-skills",
    "name": "React Native Skills",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/xaiohuangningde/vercel-react-native-skills",
    "canonicalUrl": "https://clawhub.ai/xaiohuangningde/vercel-react-native-skills",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/vercel-react-native-skills",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=vercel-react-native-skills",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "AGENTS.md",
      "SKILL.md",
      "rules/animation-derived-value.md",
      "rules/animation-gesture-detector-press.md",
      "rules/animation-gpu-properties.md",
      "rules/design-system-compound-components.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/vercel-react-native-skills"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/vercel-react-native-skills",
    "agentPageUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "React Native Skills",
        "body": "Comprehensive best practices for React Native and Expo applications. Contains\nrules across multiple categories covering performance, animations, UI patterns,\nand platform-specific optimizations."
      },
      {
        "title": "When to Apply",
        "body": "Reference these guidelines when:\n\nBuilding React Native or Expo apps\nOptimizing list and scroll performance\nImplementing animations with Reanimated\nWorking with images and media\nConfiguring native modules or fonts\nStructuring monorepo projects with native dependencies"
      },
      {
        "title": "Rule Categories by Priority",
        "body": "PriorityCategoryImpactPrefix1List PerformanceCRITICALlist-performance-2AnimationHIGHanimation-3NavigationHIGHnavigation-4UI PatternsHIGHui-5State ManagementMEDIUMreact-state-6RenderingMEDIUMrendering-7MonorepoMEDIUMmonorepo-8ConfigurationLOWfonts-, imports-"
      },
      {
        "title": "1. List Performance (CRITICAL)",
        "body": "list-performance-virtualize - Use FlashList for large lists\nlist-performance-item-memo - Memoize list item components\nlist-performance-callbacks - Stabilize callback references\nlist-performance-inline-objects - Avoid inline style objects\nlist-performance-function-references - Extract functions outside render\nlist-performance-images - Optimize images in lists\nlist-performance-item-expensive - Move expensive work outside items\nlist-performance-item-types - Use item types for heterogeneous lists"
      },
      {
        "title": "2. Animation (HIGH)",
        "body": "animation-gpu-properties - Animate only transform and opacity\nanimation-derived-value - Use useDerivedValue for computed animations\nanimation-gesture-detector-press - Use Gesture.Tap instead of Pressable"
      },
      {
        "title": "3. Navigation (HIGH)",
        "body": "navigation-native-navigators - Use native stack and native tabs over JS navigators"
      },
      {
        "title": "4. UI Patterns (HIGH)",
        "body": "ui-expo-image - Use expo-image for all images\nui-image-gallery - Use Galeria for image lightboxes\nui-pressable - Use Pressable over TouchableOpacity\nui-safe-area-scroll - Handle safe areas in ScrollViews\nui-scrollview-content-inset - Use contentInset for headers\nui-menus - Use native context menus\nui-native-modals - Use native modals when possible\nui-measure-views - Use onLayout, not measure()\nui-styling - Use StyleSheet.create or Nativewind"
      },
      {
        "title": "5. State Management (MEDIUM)",
        "body": "react-state-minimize - Minimize state subscriptions\nreact-state-dispatcher - Use dispatcher pattern for callbacks\nreact-state-fallback - Show fallback on first render\nreact-compiler-destructure-functions - Destructure for React Compiler\nreact-compiler-reanimated-shared-values - Handle shared values with compiler"
      },
      {
        "title": "6. Rendering (MEDIUM)",
        "body": "rendering-text-in-text-component - Wrap text in Text components\nrendering-no-falsy-and - Avoid falsy && for conditional rendering"
      },
      {
        "title": "7. Monorepo (MEDIUM)",
        "body": "monorepo-native-deps-in-app - Keep native dependencies in app package\nmonorepo-single-dependency-versions - Use single versions across packages"
      },
      {
        "title": "8. Configuration (LOW)",
        "body": "fonts-config-plugin - Use config plugins for custom fonts\nimports-design-system-folder - Organize design system imports\njs-hoist-intl - Hoist Intl object creation"
      },
      {
        "title": "How to Use",
        "body": "Read individual rule files for detailed explanations and code examples:\n\nrules/list-performance-virtualize.md\nrules/animation-gpu-properties.md\n\nEach rule file contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references"
      },
      {
        "title": "Full Compiled Document",
        "body": "For the complete guide with all rules expanded: AGENTS.md"
      }
    ],
    "body": "React Native Skills\n\nComprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.\n\nWhen to Apply\n\nReference these guidelines when:\n\nBuilding React Native or Expo apps\nOptimizing list and scroll performance\nImplementing animations with Reanimated\nWorking with images and media\nConfiguring native modules or fonts\nStructuring monorepo projects with native dependencies\nRule Categories by Priority\nPriority\tCategory\tImpact\tPrefix\n1\tList Performance\tCRITICAL\tlist-performance-\n2\tAnimation\tHIGH\tanimation-\n3\tNavigation\tHIGH\tnavigation-\n4\tUI Patterns\tHIGH\tui-\n5\tState Management\tMEDIUM\treact-state-\n6\tRendering\tMEDIUM\trendering-\n7\tMonorepo\tMEDIUM\tmonorepo-\n8\tConfiguration\tLOW\tfonts-, imports-\nQuick Reference\n1. List Performance (CRITICAL)\nlist-performance-virtualize - Use FlashList for large lists\nlist-performance-item-memo - Memoize list item components\nlist-performance-callbacks - Stabilize callback references\nlist-performance-inline-objects - Avoid inline style objects\nlist-performance-function-references - Extract functions outside render\nlist-performance-images - Optimize images in lists\nlist-performance-item-expensive - Move expensive work outside items\nlist-performance-item-types - Use item types for heterogeneous lists\n2. Animation (HIGH)\nanimation-gpu-properties - Animate only transform and opacity\nanimation-derived-value - Use useDerivedValue for computed animations\nanimation-gesture-detector-press - Use Gesture.Tap instead of Pressable\n3. Navigation (HIGH)\nnavigation-native-navigators - Use native stack and native tabs over JS navigators\n4. UI Patterns (HIGH)\nui-expo-image - Use expo-image for all images\nui-image-gallery - Use Galeria for image lightboxes\nui-pressable - Use Pressable over TouchableOpacity\nui-safe-area-scroll - Handle safe areas in ScrollViews\nui-scrollview-content-inset - Use contentInset for headers\nui-menus - Use native context menus\nui-native-modals - Use native modals when possible\nui-measure-views - Use onLayout, not measure()\nui-styling - Use StyleSheet.create or Nativewind\n5. State Management (MEDIUM)\nreact-state-minimize - Minimize state subscriptions\nreact-state-dispatcher - Use dispatcher pattern for callbacks\nreact-state-fallback - Show fallback on first render\nreact-compiler-destructure-functions - Destructure for React Compiler\nreact-compiler-reanimated-shared-values - Handle shared values with compiler\n6. Rendering (MEDIUM)\nrendering-text-in-text-component - Wrap text in Text components\nrendering-no-falsy-and - Avoid falsy && for conditional rendering\n7. Monorepo (MEDIUM)\nmonorepo-native-deps-in-app - Keep native dependencies in app package\nmonorepo-single-dependency-versions - Use single versions across packages\n8. Configuration (LOW)\nfonts-config-plugin - Use config plugins for custom fonts\nimports-design-system-folder - Organize design system imports\njs-hoist-intl - Hoist Intl object creation\nHow to Use\n\nRead individual rule files for detailed explanations and code examples:\n\nrules/list-performance-virtualize.md\nrules/animation-gpu-properties.md\n\n\nEach rule file contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references\nFull Compiled Document\n\nFor the complete guide with all rules expanded: AGENTS.md"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/xaiohuangningde/vercel-react-native-skills",
    "publisherUrl": "https://clawhub.ai/xaiohuangningde/vercel-react-native-skills",
    "owner": "xaiohuangningde",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/vercel-react-native-skills",
    "downloadUrl": "https://openagent3.xyz/downloads/vercel-react-native-skills",
    "agentUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/vercel-react-native-skills/agent.md"
  }
}