Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

flow — Claude Code skill: Flow type checking for React

Runs Flow type checking in a React project and reports errors with file locations. Useful when you edit code and don't want to look up the right renderer flag each time.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add react/react --skill flow -a claude-code
Open on GitHub

What flow does

The skill takes one argument: the renderer to check. With no argument it falls back to dom-node, which the author recommends for most changes. The other options are dom-browser for browser-specific DOM code, plus native and fabric for React Native.

Three steps sit inside. It runs yarn flow $ARGUMENTS, reports type errors with file locations, and offers yarn flow-ci for a full check. That last one is slow, so keep it out of the normal edit loop.

A short list of common mistakes comes with it. Running without a renderer, $FlowFixMe suppressions that hide a real problem, types imported from the wrong package. If your project has no Yarn or no Flow config, the command won't run at all — worth checking before you reach for the skill.

What it helps with

  • run Flow after editing a component
  • see type errors tied to specific files
  • pick a renderer instead of the default one
  • find out whether a $FlowFixMe hides a real error
  • check the whole project before a commit

Example prompts for the agent

  • check Flow types with dom-node
  • run flow for native and show me the errors
  • run the full check with yarn flow-ci

How to install flow

1Skills CLI (Vercel)

npx skills add react/react --skill flow -a claude-code

2Manually: put the files in place

~/.claude/skills/flow/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/flow/

From the same set4

The whole set →
fix react The skill formats changed files and checks for remaining lint issues before a commit. Use it when code needs to pass CI checks. Claude Code CX Codex Cursor +1 2,300installs verify react Validates code changes against React repository requirements before committing. Runs Prettier, linter, Flow type checks, and tests. Claude Code CX Codex Cursor +1 1,200installs flags react This skill runs React's feature-flag command and explains the results. Use it to compare release channels when a feature behaves differently between them. Claude Code CX Codex Cursor +1 1,100installs

Similar

better-accessibility jakubkrehel Reviews an interface against WCAG 2.2 and fixes issues in the project’s styling system. Use it to check keyboard navigation and screen-reader behavior. Claude Code CX Codex Cursor +1 29,200installs better-writing jakubkrehel Writes and reviews UI copy, from button labels to errors and empty states. It keeps product vocabulary consistent and guides users to the next step. Claude Code CX Codex Cursor +1 28,700installs game-engine official github Guides GitHub Copilot when building browser games and game engines with HTML5 and JavaScript. Use it for 2D or 3D rendering, physics, collisions, and controls. GitHub Copilot 13,140installs penpot-uiux-design official github A skill for building interfaces in Penpot via MCP tools: web, mobile, dashboards, design systems. Works with Penpot API directly from your code editor. GitHub Copilot 12,782installs transitions-dev Jakubantalik Twelve standalone CSS transitions for modals, dropdowns, badges, and card resizes. Helps coding agents wire production-ready UI animations without external libraries. Claude Code CX Codex Cursor +1 1,900installs design-is thedotmack Audits an interface against Dieter Rams' ten design principles, collects evidence with subagents, and generates a /make-plan prompt. Claude Code CX Codex Cursor +1 4,200installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about flow

How do I install flow in Claude?

Run npx skills add react/react --skill flow -a claude-code. The skill lands in ~/.claude/skills/flow/SKILL.md.

What does flow do?

It runs yarn flow with the renderer you pick and returns type errors with file locations. For a full check it uses yarn flow-ci.

Which renderer should I use?

With no argument it uses dom-node, which the author recommends for most changes. Browser DOM code needs dom-browser, React Native needs native or fabric.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor