Run any Skill in Manus with one click

flow-react-sdk

Stars5

Forks1

UpdatedApril 20, 2026 at 18:57

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).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

onflow

onflow/flow-ai-tools

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

5 files

SKILL.md

readonly

name

flow-react-sdk

description

Flow React SDK

Build React apps on Flow with TypeScript-first hooks and components. Built on TanStack Query for automatic caching, retries, and background updates.

Quick Start

npm install @onflow/react-sdk

import { FlowProvider, Connect, useFlowQuery } from '@onflow/react-sdk';

function App() {
  return (
    <FlowProvider config={{ accessNodeUrl: 'https://access-mainnet.onflow.org', flowNetwork: 'mainnet' }}>
      <Connect />
      <MyComponent />
    </FlowProvider>
  );
}

Navigation Map

Task	Reference
Installation, FlowProvider, Next.js, theming, dark mode	setup.md
Cadence hooks: query, mutate, auth, events, accounts, blocks, NFT metadata	hooks.md
Cross-VM hooks: EVM batch tx, token/NFT bridging, cross-chain balances	cross-vm.md
UI components: Connect, TransactionButton, TransactionDialog, NftCard	components.md

Companion Skills

cadence-lang — Consult when writing Cadence scripts/transactions used in useFlowQuery and useFlowMutate. The Cadence code passed to hooks must follow all language rules (access control, entitlements, resource handling).
flow-project-setup — Consult for flow.json configuration that FlowProvider loads via flowJson prop. Contract addresses and network config must be aligned.
flow-cli — Use to test scripts and transactions via CLI before integrating them into React hooks.
cadence-tokens — Consult when using useFlowNftMetadata or building NFT/FT frontends for the correct MetadataViews and collection paths.

More from this repository

same repository

flow-ecosystem

onflow/flow-ai-tools

Use when a developer is building, analyzing, or shipping on Flow (Cadence or Flow EVM) and needs an ecosystem tool: on-chain analytics, metrics, a query, or a dashboard (Dune); a Flow EVM RPC endpoint, node access, or reading chain state from an app (Alchemy); or swapping tokens, adding liquidity, getting a price quote, or integrating a DEX (PunchSwap / KittyPunch). Routes the builder to the right Flow ecosystem integration and supplies how to call it (MCP server, docs, or on-chain contract). Triggers on requests like "building on Flow and need a tool for X", "how do I get Flow on-chain data or a dashboard", "what should I use to query Flow", "Flow EVM RPC or node provider", "how do I swap or add liquidity on Flow", "integrate a DEX on Flow", or "is there a Flow tool for X". Not for non-Flow chains, and not for Cadence language correctness.

2026-06-235

cadence-lang

onflow/flow-ai-tools

Comprehensive guide for writing correct, secure, and idiomatic Cadence smart contract code on the Flow blockchain. Covers language fundamentals (resources, contracts, transactions, interfaces, accounts, references, imports), access control and entitlements, capabilities, pre/post conditions, security best practices, anti-patterns to avoid, and proven design patterns. TRIGGER when: writing or debugging Cadence code, asking about Cadence syntax, access(self), access(all), entitlements, resources, move operator (<-), capabilities, references, pre/post conditions, storage paths, "how do I write cadence", "cadence error", "compile error in .cdc", "what does access(self) mean", "how do resources work", "capability-based security". DO NOT TRIGGER when: building NFT/FT token contracts (use cadence-tokens), setting up flow.json or FCL (use flow-project-setup), reviewing existing code for vulnerabilities (use cadence-audit), generating new contracts from scratch (use cadence-scaffold).

2026-05-065

cadence-scaffold

onflow/flow-ai-tools

Generate production-ready Cadence smart contracts, transactions, and DeFi transactions from scratch following security-first standards. Scaffolds secure code with proper access control, entitlements, events, storage paths, and phase discipline. TRIGGER when: creating new Cadence contracts, generating transactions, scaffolding DeFi transactions, building smart contracts from scratch, "generate contract", "create transaction", "scaffold", "new contract", "new transaction", "build a contract for", "write me a contract", "help me create a", "template for", "boilerplate", "starter contract", "create an NFT contract", "generate a transfer transaction". DO NOT TRIGGER when: reviewing or auditing existing code (use cadence-audit), asking about Cadence syntax or language rules (use cadence-lang), configuring flow.json (use flow-project-setup).

2026-05-065

cadence-testing

onflow/flow-ai-tools

Guide for writing, running, and debugging unit tests for Cadence smart contracts using the built-in Cadence Testing Framework and `flow test`. Covers test file structure (_test.cdc, setup/beforeEach/tearDown), assertions and matchers, blockchain emulation (accounts, deployments, events, time manipulation), coverage reports, CI integration, and testing patterns. TRIGGER when: writing Cadence unit tests, debugging failing tests, using Test.assert / Test.expect / Test.assertEqual / Test.expectFailure, matchers (Test.equal, Test.beGreaterThan, etc.), Test.createAccount / Test.deployContract / Test.executeTransaction / Test.executeScript in tests, Test.moveTime, Test.eventsOfType in tests, Test.reset, `flow test`, `flow test --cover`, coverage reports, `_test.cdc`, "how do I test this contract", "test is flaky", "mock a capability in a test". DO NOT TRIGGER when: writing contract or transaction code itself (use cadence-lang), generating new contracts/transactions from scratch (use cadence-scaffold), auditing non-t

2026-04-235

cadence-audit

onflow/flow-ai-tools

Comprehensive audit and review skill for Cadence smart contracts on the Flow blockchain. Identifies security vulnerabilities, bugs, code quality issues, and optimization opportunities. Produces severity-rated findings (Critical/High/Medium/Low) with actionable fixes. TRIGGER when: auditing, reviewing, or improving Cadence code, checking for security issues, performing code review on .cdc files, looking for anti-patterns or vulnerabilities, optimizing smart contract code, "review cadence", "audit cadence", "check cadence security", "validate cadence contract", "review my .cdc file", "security review", "code review", "find vulnerabilities", "check this contract", "is this code secure", "audit my project". DO NOT TRIGGER when: writing new contracts from scratch (use cadence-scaffold), asking about Cadence syntax or patterns (use cadence-lang), building token contracts (use cadence-tokens).

2026-04-205

cadence-tokens

onflow/flow-ai-tools

Guide for developing NFT and Fungible Token contracts on the Flow blockchain using Cadence. Covers NonFungibleToken and FungibleToken interface conformance, MetadataViews integration for marketplace compatibility, collection patterns, minting, standard paths, event emission, and modular NFT architectures for complex traits and evolution. TRIGGER when: building NFT contracts, FT token contracts, implementing NonFungibleToken or FungibleToken interfaces, working with MetadataViews, creating collections, minting tokens, "create an NFT", "build a token contract", "mint NFT", "NFT collection", "fungible token vault", "royalties", "MetadataViews.Display", "NonFungibleToken.Collection", "token standards", "FungibleToken.Vault". DO NOT TRIGGER when: asking about general Cadence syntax or patterns (use cadence-lang), setting up flow.json or deploying (use flow-project-setup), auditing code (use cadence-audit).

2026-04-205

name

flow-react-sdk

description

Flow React SDK

Build React apps on Flow with TypeScript-first hooks and components. Built on TanStack Query for automatic caching, retries, and background updates.

Quick Start

npm install @onflow/react-sdk

import { FlowProvider, Connect, useFlowQuery } from '@onflow/react-sdk';

function App() {
  return (
    <FlowProvider config={{ accessNodeUrl: 'https://access-mainnet.onflow.org', flowNetwork: 'mainnet' }}>
      <Connect />
      <MyComponent />
    </FlowProvider>
  );
}

Navigation Map

Task	Reference
Installation, FlowProvider, Next.js, theming, dark mode	setup.md
Cadence hooks: query, mutate, auth, events, accounts, blocks, NFT metadata	hooks.md
Cross-VM hooks: EVM batch tx, token/NFT bridging, cross-chain balances	cross-vm.md
UI components: Connect, TransactionButton, TransactionDialog, NftCard	components.md

Companion Skills

cadence-lang — Consult when writing Cadence scripts/transactions used in useFlowQuery and useFlowMutate. The Cadence code passed to hooks must follow all language rules (access control, entitlements, resource handling).
flow-project-setup — Consult for flow.json configuration that FlowProvider loads via flowJson prop. Contract addresses and network config must be aligned.
flow-cli — Use to test scripts and transactions via CLI before integrating them into React hooks.
cadence-tokens — Consult when using useFlowNftMetadata or building NFT/FT frontends for the correct MetadataViews and collection paths.