react-native-ai-debugger 1.0.35 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,6 +31,48 @@ An MCP (Model Context Protocol) server for AI-powered React Native debugging. En
|
|
|
31
31
|
- **Efficient Buffering** - Circular buffers: 500 logs, 200 network requests
|
|
32
32
|
- **Platform Support** - Expo SDK 54+ (Bridgeless) and React Native 0.70+ (Hermes)
|
|
33
33
|
|
|
34
|
+
## Claude Code Skills
|
|
35
|
+
|
|
36
|
+
This repository includes pre-built [Claude Code skills](https://docs.anthropic.com/en/docs/claude-code/skills) for common React Native debugging workflows. Skills let Claude handle multi-step tasks (session setup, log inspection, network debugging, etc.) with a single slash command instead of manual back-and-forth.
|
|
37
|
+
|
|
38
|
+
### Available Skills
|
|
39
|
+
|
|
40
|
+
| Skill | Description |
|
|
41
|
+
| ----- | ----------- |
|
|
42
|
+
| `session-setup` | Bootstrap a debugging session: discover devices, boot simulators, connect to Metro |
|
|
43
|
+
| `debug-logs` | Capture, filter, and analyze console logs to find errors and warnings |
|
|
44
|
+
| `network-inspect` | Monitor and inspect HTTP requests, filter by status/method, and analyze failures |
|
|
45
|
+
| `app-state` | Inspect Redux/Apollo/context state, navigate the app, and execute code in the runtime |
|
|
46
|
+
| `component-inspect` | Inspect React component tree, props, state, and layout |
|
|
47
|
+
| `layout-check` | Verify UI layout against design specs using screenshots and component data |
|
|
48
|
+
| `device-interact` | Automate device interaction: tap, swipe, text input, and element finding |
|
|
49
|
+
| `bundle-check` | Detect and diagnose Metro bundler errors and compilation failures |
|
|
50
|
+
|
|
51
|
+
### Installing Skills (Claude Code)
|
|
52
|
+
|
|
53
|
+
Copy the skill files into your project's `.claude/skills/` directory:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
# Install all skills
|
|
57
|
+
mkdir -p .claude/skills
|
|
58
|
+
curl -s https://api.github.com/repos/igorzheludkov/react-native-ai-debugger/contents/skills \
|
|
59
|
+
| grep download_url \
|
|
60
|
+
| cut -d '"' -f 4 \
|
|
61
|
+
| xargs -I {} sh -c 'curl -sL {} -o .claude/skills/$(basename {})'
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Or pick individual skills from the [`skills/`](./skills/) folder and drop them into `.claude/skills/`.
|
|
65
|
+
|
|
66
|
+
Then invoke in Claude Code:
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
/session-setup
|
|
70
|
+
/debug-logs
|
|
71
|
+
/network-inspect
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Skills can also be triggered **automatically** — each skill file contains a "When to Trigger" section that tells Claude when to proactively invoke it without a slash command. For example, Claude will run `bundle-check` on its own when it detects a red screen, or `session-setup` when starting a fresh debugging task with no connection established yet.
|
|
75
|
+
|
|
34
76
|
## Requirements
|
|
35
77
|
|
|
36
78
|
- Node.js 18+
|