本技能面向 Sui 前端 / dApp 开发，核心是 @mysten/dapp-kit-react（React）与 @mysten/dapp-kit-core（Vue、原生 JS、Svelte、Web Components 及其他框架）。资料指出，浏览器端 Sui 应用失败通常有固定几类原因：使用了错误的包（无后缀的 @mysten/dapp-kit 是仅支持 JSON-RPC 的旧包，已弃用）、错误的客户端（dApp Kit 在 createDAppKit 的 createClient 中接收 SuiGrpcClient，不应传入 SuiJsonRpcClient）、过时的 provider 栈（v1 的 QueryClientProvider → SuiClientProvider → WalletProvider 已不再使用，新方式为 createDAppKit 工厂 + DAppKitProvider 或非 React 等价物）、已移除的 hooks（useSuiClientQuery、useSuiClientInfiniteQuery、useSignAndExecuteTransaction、useConnectWallet、useDisconnectWallet、useSuiClient、useSuiClientContext 等已被 useCurrentClient / useCurrentNetwork / useDAppKit() 加自建 TanStack Query 封装取代）、在 execute 与 refetch 之间跳过 waitForTransaction（全节点异步索引交易，立即失效缓存会取到旧数据），以及在应用代码中用 tx.build() 构建 PTB 后再交给钱包（会破坏钱包的 gas 选择，应始终把 Transaction 实例传给钱包）。
主要能力与参考文件：setup（安装、工厂、provider，适用于新建 dApp 项目、搭建 React/Next.js/Vue 或从旧三 provider 模式迁移，涵盖包选择、createDAppKit({ networks, createClient })、DAppKitProvider 与 declare module 类型增强）；react（React hooks 与模式，涵盖 useCurrentAccount、useCurrentWallet、useCurrentNetwork、useCurrentClient、useDAppKit、useWallets、useWalletConnection、ConnectButton 组件及钱包门控 UI 惯用法）；non-react（Vue、原生 JS、Web Components，涵盖 @mysten/dapp-kit-core、nanostores 响应式状态如 dAppKit.stores.$connection、Web Components 注册、通过 @nanostores/vue 的 Vue 绑定）；queries（TanStack Query 模式，涵盖 useQuery + useCurrentClient、useInfiniteQuery 分页、enabled 守卫、写入后的缓存失效）；transactions（签名与执行，涵盖 dAppKit.signAndExecuteTransaction、基于 $kind 的结果判别、signTransaction、signPersonalMessage、waitForTransaction + invalidateQueries 顺序及常见钱包 UX 失败）；limitations（前端不能或不应做的事，涵盖无后端专属功能、浏览器/SSR 注意事项、自动连接可靠性、不在浏览器中存放密钥的规则）。
关键概念：两个包一套 API，@mysten/dapp-kit-react 包装 @mysten/dapp-kit-core，createDAppKit 在两者中都存在，动作（signAndExecuteTransaction、signTransaction、switchNetwork、connectWallet、disconnectWallet）一致，区别在于读取响应式状态的方式（React 用 hooks，非 React 读 nanostores stores）；一个实例支持多网络，createDAppKit({ networks, createClient }) 创建实例，dAppKit.switchNetwork(name) 切换，createClient 工厂按网络惰性调用一次；默认使用 gRPC，新 dApp Kit 为 SuiGrpcClient 构建，JSON-RPC 已弃用；钱包仅限浏览器，钱包检测使用 window.navigator.wallets 与 CustomEvents，涉及钱包状态的组件必须客户端渲染，Next.js/SSR 中需 'use client'；钱包拥有 gas，应用构建 Transaction 并传给钱包，钱包选择 gas coin、设置预算并签名，除非是赞助流程否则不要调用 tx.build() 传字节；全节点最终一致，signAndExecuteTransaction 返回 digest 时数据尚不可查询，refetch 前必须 waitForTransaction。
规则要点：新代码使用 @mysten/dapp-kit-react 或 @mysten/dapp-kit-core，绝不用裸 @mysten/dapp-kit；createClient 中使用 SuiGrpcClient（来自 @mysten/sui/grpc），不用已移除的 SuiClient；使用 createDAppKit + DAppKitProvider，不用三 provider 栈（若用 TanStack Query 取数仍可包 QueryClientProvider，但 dApp Kit 本身不需要）；加入 declare module 类型增强；不使用已移除的 hooks；对当前账户做空值检查（useCurrentAccount() 连接前返回 null，查询中用 enabled: !!account 门控）；缓存失效前先 waitForTransaction；把 Transaction 实例传给钱包而非 tx.build() 字节（赞助流程例外，用 tx.build({ client, onlyTransactionKind: true })）；检查 result.$kind === 'FailedTransaction'，不要假设成功，也不要用 v1 的 result.effects?.status?.status；钱包门控 UI 必须客户端渲染；Vue 中 useStore 返回 Vue ref，脚本代码用 .value。
代码审查清单按类别列出常见问题：导入/包（@mysten/sui.js、无后缀 @mysten/dapp-kit、从错误路径导入 ConnectButton、SuiClient、TransactionBlock）；已移除的 hooks；provider 栈；组件内构造客户端；交易构造（tx.pure 未类型化、提前 tx.build()）；执行/等待/状态（signAndExecuteTransactionBlock、{ transactionBlock: tx } 参数形状、v1 状态形状、直接读 result.digest、执行后立即失效缓存）；SSR/Next.js（钱包感知组件缺少 'use client'）。资料建议审查时逐项走完清单，典型从过时教程复制的多行片段通常堆叠 5–10 个问题。
常见错误还包括：需要连接钱包的查询未加 enabled: !!account；在 React-Query queryFn 中返回 Transaction；使用 { transactionBlock: tx } 而非 { transaction: tx }；直接读 result.digest；在 waitForTransaction 前失效查询；组件内 new SuiGrpcClient(...)；直接实例化 SuinsClient / DeepBookClient（应使用 client.$extend(suins(), deepbook({ address }))）；autoConnect: true 带来困惑 UX；在多处硬编码 testnet/mainnet URL（应放在按网络名索引的 GRPC_URLS 映射中）；直接使用 wallet-standard API（应使用 useWallets() / dAppKit.stores.$wallets）；在浏览器中存储私钥或密钥。资料还提到，当环境支持时可查询 Sui 文档 MCP 服务器（https://sui.mcp.kapa.ai）获取最新答案，用于验证和补充参考文件未覆盖的细节。