react-native-vision-camera — Claude Code skill for VisionCamera v5
A routing skill for VisionCamera v5 in React Native: it tells the agent which reference to load for the task and which v5 rules to respect.
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-codeWhat react-native-vision-camera does
The skill works as a router. SKILL.md holds a task-to-reference table, and the agent opens only the file it needs: install and permissions, porting from v4, outputs and constraints, frame processing, capture and manual controls, advanced features. Each reference stands alone, so nothing extra lands in the context.
The hard rules for v5 are the main draw. The release is rebuilt on Nitro Modules: the photo and video props are gone in favour of an outputs array, format and useCameraFormat gave way to constraints, and takePhoto() is replaced by capturePhoto on the output object. An agent still thinking in v4 will produce code that does not run.
Peer dependencies come first: react-native-nitro-modules and react-native-nitro-image. Frame processors also need react-native-vision-camera-worklets plus Software Mansion's react-native-worklets. Every Frame has to be released with .dispose() inside a finally block, because the buffer pool is finite and a leaked frame stalls the pipeline.
Day-to-day work is the target: a camera screen, stills, video recording, barcodes. For heavy per-frame work the authors point to a separate skill, react-native-vision-camera-realtime.
What it helps with
- move a camera screen from VisionCamera v4 to v5
- pick fps and resolution with constraints instead of formats
- capture a still into memory without temp files
- find out which packages frame processors require
- pull the barcode scanner out of core into its own package
Example prompts for the agent
- Rewrite my capture screen from
takePhototo the VisionCamera v5 API - Show me how to build an
outputsarray fromusePhotoOutputanduseVideoOutput - Set
constraintsfor 60 fps and explain whereframe.dispose()goes
How to install react-native-vision-camera
1Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-code2Manually: put the files in place
~/.claude/skills/react-native-vision-camera/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-native-vision-camera/
1Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a codex2Manually: put the files in place
.agents/skills/react-native-vision-camera/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a cursor2Manually: put the files in place
.cursor/skills/react-native-vision-camera/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install margelo/react-native-skills react-native-vision-camera2Manually: put the files in place
.github/skills/react-native-vision-camera/SKILL.md1Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a gemini-cli2Platform CLI
gemini skills install https://github.com/margelo/react-native-skills --path skills/react-native-vision-cameraManually: put the files in place
.devin/skills/react-native-vision-camera/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-native-vision-camera
How do I install react-native-vision-camera in Claude Code?
Run npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-code; the skill lands at ~/.claude/skills/react-native-vision-camera/SKILL.md.
What does this skill do?
It steers the agent toward correct VisionCamera v5 code, choosing the right reference for the job and listing the rules that separate v5 from v4.
How is it different from react-native-vision-camera-realtime?
This one covers setup, the v4 migration, outputs, capture and basic frame work. The authors route low-latency GPU and ML pipelines to the other skill.
