◆PromptShop

Flow

It provides instructions on how to run Flow with different renderers and report type errors.

Install

npx promptshop add flow

Details

What This Skill Does

This skill guides developers in using Flow for type checking in React projects. It provides instructions on how to run Flow with different renderers and report type errors. It helps ensure code correctness and prevent runtime errors by enforcing static typing.

When to Use

  • Preventing runtime errors.
  • Enforcing type safety.
  • Improving code maintainability.
  • Catching type-related bugs early.
  • Adding type annotations to existing code.
  • Refactoring code with type checking.

Key Features

  • Performs Flow type checking.
  • Supports multiple renderers (dom-node, dom-browser, native, fabric). Reports type errors with file locations.
  • Provides yarn flow command for checking.
  • Offers yarn flow-ci for comprehensive checking.
  • Helps identify and fix type-related issues.

Manual Installation

Arguments: $ARGUMENTS: Renderer to check (default: dom-node)

Renderers

RendererWhen to Use
dom-nodeDefault, recommended for most changes
dom-browserBrowser-specific DOM code
nativeReact Native
fabricReact Native Fabric

Instructions

  • Run yarn flow $ARGUMENTS (use dom-node if no argument)
  • Report type errors with file locations
  • 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 packageFlow Type Checking

Arguments: $ARGUMENTS: Renderer to check (default: dom-node)