Guide for building React applications on the Flow blockchain using @onflow/react-sdk. Covers FlowProvider setup, Cadence hooks (useFlowQuery, useFlowMutate, useFlowCurrentUser, useFlowEvents), Cross-VM hooks for EVM bridging and batch transactions, and UI components (Connect, TransactionButton, TransactionDialog, NftCard). Built on TanStack Query with TypeScript support. TRIGGER when: building React apps on Flow, using @onflow/react-sdk, setting up FlowProvider, using Flow React hooks, "useFlowQuery", "useFlowMutate", "useFlowCurrentUser", "Connect component", "TransactionButton", "wallet connect react", "react flow app", "FCL React", "flow react hooks", "bridge tokens react", "cross-vm react", "NftCard", "useFlowEvents", "how to query Flow from React", "authenticate user in React". DO NOT TRIGGER when: writing Cadence contracts (use cadence-lang), configuring flow.json without React (use flow-project-setup), building non-React frontends or backends, auditing code (use cadence-audit).
How to install flow-react-sdk?
onflow/flow-ai-tools/flow-react-sdk
$npx -y skills add onflow/flow-ai-tools --skill flow-react-sdkInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/onflow/flow-ai-tools" --skill "onflow/flow-ai-tools/flow-react-sdk"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/onflow/flow-ai-tools" that are relevant to the current task. Run `npx skills add "https://github.com/onflow/flow-ai-tools"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering.Jul 2026
- hyperframes-registryInstall, discover, and wire registry blocks and components into HyperFrames compositions.Jul 2026
- composition-patternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing…Jul 2026
- shadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces.Jul 2026
- lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV…Jul 2026
- image-to-code-skillElite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then…Jul 2026
