callstackincubator/agent-skills

For full behavioral testing of React Native TV applications, Appium is the recommended tool. It supports native platforms (Android TV and Apple TV) via UiAutomator2 and XCUITest respectively, and web-based platforms (Tizen, webOS) via browser automation.

Key Strategies:

• Use Appium + WebdriverIO for native TV platforms.
• Use driver.pressKeyCode to simulate D-pad navigation.
• Use accessibility labels as selectors (e.g., ~home-button).
• Utilize device farms (AWS, BrowserStack, Sauce Labs) for testing on real hardware to account for performance and display quirks.

This plugin includes specialized skills for different stages of the React Native lifecycle:

Best Practices

• Vercel React Native Skills: Focuses on app structure, development patterns, and technical decision-making during feature implementation.
• React Native Best Practices: Focuses on production-quality performance work, including profiling, startup time, rendering behavior, memory management, bundle size, and native integration tradeoffs.

Upgrading

• Upgrading React Native: Provides guidance for version upgrades, covering template diffs, dependency alignment, iOS/Android project changes, and post-upgrade verification steps.

The react-native-tv-best-practices skill organizes guidance into specific topic prefixes. Use these prefixes to locate deep-dive documentation for your specific area of concern:

• focus-*: focus engines, focus guides, focus event performance
• nav-*: D-pad navigation, Back/Menu behavior, keyboard/search input
• design-*: 10-foot typography, layout, color, focus visibility
• perf-*: startup, memory, lists, animation, and network constraints on TV hardware
• video-*: playback architecture, DRM/protocol selection, debugging
• a11y-*: TV accessibility implementation and audit checks
• setup-*: stack detection, setup, architecture, cross-platform behavior
• test-* and release-*: test coverage, E2E, and CI/release workflows

The assess-react-native-migration skill is used to produce a read-only migration decision for a mobile product. It diagnoses the product and delivery system to determine if, and how, a migration to React Native should occur.

Key constraints:

• It is a diagnostic tool only; it does not execute the migration.
• It focuses on gathering evidence (observed, measured, reported, assumed, or unknown) rather than providing an aggregate readiness score.
• It evaluates the marginal value of React Native over the existing native system.
• It does not recommend specific implementation details (like Expo vs. bare React Native) until a migration path is accepted.

React Native's renderer performs an optimization called View Flattening, where it automatically removes "layout-only" views from the native view hierarchy. These are views that only affect layout and do not require their own native representation for drawing, events, accessibility, measurement, or native-component child semantics.

Benefits

• Reduced memory usage
• Faster rendering
• Shallower native view tree

When to use this knowledge

• When a native component receives an unexpected number of children.
• When debugging layout issues involving native components.
• When building native components that rely on receiving specific children.
• When the JS tree structure does not match the actual native view hierarchy.

To prevent jank and dropped frames in @gorhom/bottom-sheet, avoid using React state (useState) for gesture-driven or scroll-driven visual updates. Updating React state during an interaction causes the entire component subtree to re-render on the JS thread. Instead, use react-native-reanimated shared values (useSharedValue) and consume them via useAnimatedStyle to keep animations entirely on the UI thread.

const animatedIndex = useSharedValue(0);

const overlayStyle = useAnimatedStyle(() => ({
  opacity: interpolate(
    animatedIndex.value,
    [0, 1],
    [0, 0.5],
    Extrapolation.CLAMP
  ),
}));

<BottomSheet animatedIndex={animatedIndex}>
  <ExpensiveContent />
</BottomSheet>
<Animated.View style={[styles.overlay, overlayStyle]} />

The first section of a skill file should be a 'Quick' section to provide immediate value. Choose the type based on the skill's nature:

• Quick Pattern: Used for code transformations (e.g., showing Incorrect → Correct code).
• Quick Command: Used for shell or tool invocations (e.g., npx source-map-explorer).
• Quick Config: Used for configuration changes (e.g., a metro.config.js snippet).
• Quick Reference: Used for conceptual overviews (e.g., a summary table).

Use this decision map to choose the specific skill/guide required for your current upgrade phase: