flow-react-sdk

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

Ir a la instalación

Repositorio: onflow/flow-ai-tools
Última actividad en el origen: 20 de abril de 2026 a las 18:57
Idioma detectado de SKILL.md: inglés
Estrellas: 6
Forks: 2

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

npx skills add https://github.com/onflow/flow-ai-tools --skill flow-react-sdk

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos

5 archivos

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

cadence-lang

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 (including checks-effects-interactions, trust-boundary validation, and bounded loops), anti-patterns to avoid, proven design patterns, style and readability rules, and numeric precision with checked arithmetic. 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, optional binding, if let, guard let, force-unwrap, string templates, UFix128, Fix128, fixed-point precision, overflow, checks-effects-interactions, reentrancy, "how do I write cadence", "cadence error", "compile error in .cdc", "what does access(self) mean", "how do resources work",

2026-07-31

cadence-scaffold

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-07-31

cadence-testing

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-07-31

Ver todos los de este repositorio

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.

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

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

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.

flow-react-sdk

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Más de este repositorio

Flow React SDK

Quick Start

Navigation Map

Companion Skills

Flow React SDK

Quick Start

Navigation Map

Companion Skills