react-native-vision-camera — скилл для Claude Code
Скилл-навигатор по VisionCamera v5 для React Native: подсказывает агенту, какой справочник открыть под задачу и какие правила v5 не нарушать.
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-codeЧто делает react-native-vision-camera
Скилл устроен как роутер. В SKILL.md лежит таблица «задача → справочник», и агент читает только нужный файл: установка и разрешения, перенос кода с v4, outputs и constraints, обработка кадров, съёмка и ручные настройки, продвинутые возможности. Каждый справочник самодостаточен, поэтому лишние файлы в контекст не попадают.
Главная ценность — список жёстких правил v5. Версия переписана на Nitro Modules: пропсов photo и video больше нет, вместо них массив outputs, вместо format и useCameraFormat — constraints, а takePhoto() заменён на capturePhoto у output-объекта. Агент, который помнит v4, без этих правил напишет нерабочий код.
Заранее понадобятся пир-зависимости: react-native-nitro-modules и react-native-nitro-image. Для frame processors нужны ещё react-native-vision-camera-worklets и react-native-worklets от Software Mansion. Каждый Frame обязательно закрывается через .dispose() в finally — пул буферов ограничен, и забытый кадр останавливает конвейер.
Скилл рассчитан на обычные задачи: интерфейс камеры, снимки, запись видео, баркоды. Для тяжёлых конвейеров с отрисовкой поверх кадра авторы отсылают к отдельному скиллу react-native-vision-camera-realtime.
Какие задачи решает
- перенести экран камеры с VisionCamera v4 на v5
- подобрать fps и разрешение через constraints вместо форматов
- снять фото в память без записи временных файлов
- разобраться, какие пакеты нужны для frame processors
- вынести сканер баркодов из ядра в отдельный пакет
Примеры запросов агенту
- Помоги переписать экран съёмки с
takePhotoна API VisionCamera v5 - Покажи, как собрать
outputsизusePhotoOutputиuseVideoOutput - Настрой
constraintsпод 60 fps и подскажи, что делать сframe.dispose()
Как установить react-native-vision-camera
1Через Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-code2Вручную: положить файлы
~/.claude/skills/react-native-vision-camera/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-native-vision-camera/
1Через Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a codex2Вручную: положить файлы
.agents/skills/react-native-vision-camera/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a cursor2Вручную: положить файлы
.cursor/skills/react-native-vision-camera/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install margelo/react-native-skills react-native-vision-camera2Вручную: положить файлы
.github/skills/react-native-vision-camera/SKILL.md1Через Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a gemini-cli2Командой платформы
gemini skills install https://github.com/margelo/react-native-skills --path skills/react-native-vision-cameraВручную: положить файлы
.devin/skills/react-native-vision-camera/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-native-vision-camera
Как установить react-native-vision-camera в Claude Code?
Выполните npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-code, файл появится по пути ~/.claude/skills/react-native-vision-camera/SKILL.md.
Что делает этот скилл?
Он помогает агенту писать код под VisionCamera v5: подсказывает, какой справочник загрузить, и перечисляет правила, которые отличают v5 от v4.
Чем отличается от скилла react-native-vision-camera-realtime?
Этот покрывает установку, миграцию с v4, настройку outputs, съёмку и базовую обработку кадров. Для низкой задержки на GPU и ML авторы отсылают к отдельному скиллу.
