flow — скилл для Claude Code: проверка типов Flow в React
Запускает проверку типов Flow в проекте React и показывает ошибки с файлами и строками. Пригодится, когда правишь код и не хочешь вручную вспоминать команду с нужным рендерером.
npx skills add react/react --skill flow -a claude-codeЧто делает flow
Скилл принимает аргумент — рендерер, который надо проверить. Без аргумента берётся dom-node, это же значение советует автор для большинства правок. Остальные варианты: dom-browser для браузерного DOM-кода, native и fabric для React Native.
Внутри три шага. Сначала запускается yarn flow $ARGUMENTS, потом ошибки типов выводятся с указанием файлов, а для полной проверки есть yarn flow-ci — она медленная, поэтому в обычном цикле правок её лучше не гонять.
Отдельно перечислены типичные промахи. Запуск без рендерера, подавления вроде $FlowFixMe, которые скрывают настоящую проблему, и типы, импортированные не из того пакета. Если в проекте нет Yarn и настроенного Flow, команда просто не отработает — это повод проверить окружение до того, как звать скилл.
Какие задачи решает
- прогнать проверку типов Flow после правки компонента
- увидеть ошибки типов с привязкой к файлам
- выбрать нужный рендерер вместо рендерера по умолчанию
- разобраться, не прячет ли
$FlowFixMeреальную ошибку - проверить весь проект целиком перед коммитом
Примеры запросов агенту
- проверь типы Flow в dom-node
- запусти flow для native и покажи ошибки
- прогони полную проверку через yarn flow-ci
Как установить flow
1Через Skills CLI (Vercel)
npx skills add react/react --skill flow -a claude-code2Вручную: положить файлы
~/.claude/skills/flow/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/flow/
1Через Skills CLI (Vercel)
npx skills add react/react --skill flow -a codex2Вручную: положить файлы
.agents/skills/flow/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add react/react --skill flow -a cursor2Вручную: положить файлы
.cursor/skills/flow/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install react/react flow2Вручную: положить файлы
.github/skills/flow/SKILL.md1Через Skills CLI (Vercel)
npx skills add react/react --skill flow -a gemini-cli2Командой платформы
gemini skills install https://github.com/react/react --path .claude/skills/flowВручную: положить файлы
.devin/skills/flow/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add react/react --skill flow -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора4
Весь набор →Похожие
Вопросы о flow
Как установить flow в Claude?
Выполните npx skills add react/react --skill flow -a claude-code. Скилл окажется в ~/.claude/skills/flow/SKILL.md.
Что делает flow?
Запускает yarn flow с выбранным рендерером и отдаёт ошибки типов с локациями файлов. Для полной проверки использует yarn flow-ci.
Какой рендерер указывать?
Если аргумент не передан, берётся dom-node — автор советует его для большинства изменений. Для браузерного DOM-кода нужен dom-browser, для React Native — native или fabric.
Исходный текст
SKILL.md · MIT
--- name: flow description: Use when you need to run Flow type checking, or when seeing Flow type errors in React code. --- # Flow Type Checking Arguments: - $ARGUMENTS: Renderer to check (default: dom-node) ## Renderers | Renderer | When to Use | |----------|-------------| | `dom-node` | Default, recommended for most changes | | `dom-browser` | Browser-specific DOM code | | `native` | React Native | | `fabric` | React Native Fabric | ## Instructions 1. Run `yarn flow $ARGUMENTS` (use `dom-node` if no argument) 2. Report type errors with file locations 3. For comprehensive checking (slow), use `yarn flow-ci` ## Common Mistakes - **Running without a renderer** - Always specify or use default `dom-node` - **Ignoring suppressions** - Check if `$FlowFixMe` comments are masking real issues - **Missing type imports** - Ensure types are imported from the correct package
© react · MIT · react/react
