---
name: ansight-app-inspection-react-native
description: Use this skill when inspecting, debugging, verifying, or extracting evidence from a running React Native iOS or Android app through Ansight Studio. Prefer Ansight Studio MCP tools, then discover React Native tools such as React component tree, React shadow tree, component search, navigation state, optional actions, native VisualTree, database, file-system, preferences, secure-storage, reflection (`reflect.*`), artifacts, logs, telemetry, React Native memory channels, and screenshots before falling back to simulator, emulator, or device access.
---

# Ansight React Native App Inspection Skill

Use this skill when the target app is a React Native app paired with Ansight Studio.

Do not use this skill for native-only iOS, native-only Android, .NET, Flutter, server, desktop, or web-only projects.

## Goal

Use Ansight Studio, React inspection tools, and native iOS/Android tool suites to inspect behavior, diagnose bugs, verify fixes, and extract evidence from a React Native app.

## Required Constraints

- Prefer mounted `ansight_*` MCP tools before direct simulator, emulator, device, Metro, or app-container access.
- Prefer `ansight-daemon mcp-stdio` when configuring agent access.
- Select the app and live session explicitly; do not guess when more than one live session matches.
- Pull Studio-owned state, logs, telemetry, annotations, screenshots, and artifacts before invoking remote app tools.
- Call `ansight_list_app_tools` before any `ansight_call_app_tool`.
- Only call tool ids that are present in the returned catalog.
- Prefer read-only evidence first. Use React actions, native writes, delete tools, `reflect.invoke_method`, `reflect.set_member_value`, file mutation, preferences mutation, secure-storage mutation, or overlay mutation only when the user request requires it.
- Distinguish React component tree evidence from native view hierarchy evidence.
- Report any fallback to direct simulator, emulator, or device access and the reason Ansight could not satisfy the request.

## Default Workflow

1. Confirm Ansight Studio access.
   - Prefer mounted `ansight_*` tools.
   - If setup is required, configure `ansight-daemon mcp-stdio`.
2. Identify the target app.
   - Call `ansight_list_apps`.
   - Use `ansight_get_app` when app metadata or linked codebase metadata is needed.
3. Identify the target session.
   - Call `ansight_list_sessions` with `liveOnly=true` for live debugging.
   - Pass `appId` when known.
   - Ask the user to choose if multiple sessions match.
4. Gather host-owned evidence:
   - `ansight_get_app_state`
   - `ansight_get_logs`
   - `ansight_get_telemetry`
   - `ansight_get_annotations`
5. Discover React Native and native remote tools:
   - Call `ansight_list_app_tools` with the selected `sessionId`.
   - Inspect scopes, argument schemas, and guard policy.
6. Choose React inspection or native tool families based on the question.
7. Verify the behavior after any source-code fix or runtime mutation.

## React Native Evidence Priority

For React UI/component issues:

- Prefer `react.get_component_tree` when the workflow needs React component names, composite structure, props/state availability, or component ownership.
- Prefer `react.get_shadow_tree` when the workflow needs the committed React Native host tree with composite components flattened out.
- Use `react.find_components` and `react.get_component` for focused lookup when the catalog exposes them.
- Use `react.get_navigation_state` when navigation state matters and the app registered a navigation ref.
- Keep props and state off unless the app installed React tools with sanitized props/state and the task requires them.

For native rendering, screenshot, or platform-view issues:

- Use native VisualTree only when present and when Studio needs the native iOS/Android hierarchy, native screenshots, or overlays.
- Use React component/shadow trees and native VisualTree together when diagnosing a mismatch between React state and rendered native UI.

For performance and memory issues:

- Use `ansight_get_telemetry` for native memory, FPS, timing, and React Native memory channels.
- Look for React Native runtime memory channels before assuming JavaScript heap data must be sampled through JS.
- Correlate telemetry with logs, screen views, app lifecycle, screenshots, and React navigation state.

For persistence or local data issues:

- Use logs and telemetry first to bracket the failing time window.
- Use native database tools only after listing database roots and schema.
- Use native file-system tools only after listing approved roots.
- Use preferences and secure-storage tools only after confirming allow-listed stores, keys, or prefixes.
- Use native `reflect.*` tools only against registered roots from `reflect.list_roots`, and only after reading the tool schema and guard policy.
- Use native or JavaScript custom tools only when packaged suites cannot answer the question.

## Component Tree vs Shadow Tree

- Component tree: React Fiber tree including composite components. Use it for component ownership, props/state availability, logical UI structure, and finding the component responsible for a label or action.
- Shadow tree: committed React Native host tree with composites flattened out. Use it for rendered host layout and text/input hierarchy.
- Native VisualTree: platform-native UIKit or Android hierarchy. Use it for native screenshots, overlays, platform widgets, and platform layout/rendering issues.

## Common React Native Remote Tool Families

These families may be present, depending on installation and runtime guards. Do not call them unless the catalog returns them.

- React Inspection: component tree, shadow tree, component search, focused component reads, navigation state, and optional component actions.
- Native VisualTree: iOS/Android hierarchy, screenshot capture, node inspection, and diagnostic overlays.
- Database: SQLite discovery, schema inspection, and read-only queries.
- FileSystem: sandbox root listing, file reads, downloads, writes, copies, moves, and deletes.
- Preferences: native preferences store/key inspection and mutation.
- SecureStorage: allow-listed native secure-storage values.
- Reflection (`reflect.*`): native registered roots, member reads, opt-in `reflect.set_member_value`, and opt-in `reflect.invoke_method`.
- JavaScript or native custom tools: narrow app-specific operations.
- Artifacts: app-owned diagnostic exports.

`reflect.*` is expected to be enabled only in a development-time remote-tool profile, such as `withReflectionTools(...)` under `__DEV__` or a native Debug build. If the catalog does not expose it, report that the app may not have the development-time reflection suite enabled.

## Mutation Rules

- Do not mutate by default.
- React actions are write-scoped and opt-in. Invoke them only when `react.invoke_component_action` is present, the action prop is allow-listed by the app, and the user asks for controlled test driving.
- Use native overlays, preference writes, secure-storage writes, file writes, deletes, `reflect.invoke_method`, or `reflect.set_member_value` only when the user asks for mutation or controlled test driving.
- Explain the exact mutation, target component/node/root/key/path, and expected rollback before making it.
- Clean up overlays and temporary files when the workflow is complete.

## Direct Simulator, Emulator, Device, Or Metro Fallback

Fallback only when:

- Ansight Studio is not reachable
- no matching live or captured session exists
- the required React Native or native tool is not exposed
- the MCP bridge or remote app tool returns a concrete blocking failure

When falling back, state whether you used Simulator, emulator/device logs, Metro output, native build output, app container access, or source inspection.

## Output Expectations

Report:

- app id and session id used
- React Native app id plus iOS bundle id or Android application id when available
- Ansight tools called
- whether component tree, shadow tree, native VisualTree, or a combination drove the conclusion
- key logs, telemetry, React Native memory channels, screenshots, tree nodes, navigation state, database rows, files, preferences, secure-storage values, artifacts, or custom-tool results
- any mutation performed
- any exported artifact path
- verification result after the fix or action
- any fallback to direct simulator/emulator/device/Metro access and why it was necessary