wagmi-development_skill

Overview

This skill provides full-stack patterns for adding Wagmi features that wrap Viem actions and expose query/mutation options and framework bindings. It standardizes how to implement core actions, TanStack Query options, and React/Vue hooks/composables so new features are consistent across packages. Use it when adding read-only or wallet-backed actions that must work across core, react, and vue packages.

How this skill works

It defines a three-layer workflow: core actions that call Viem with wagmi-specific parameter handling, query/mutation option factories that produce TanStack Query-compatible options and keys, and framework bindings that adapt options into React hooks and Vue composables. The core action layer imports Viem actions with a viem_ prefix, augments parameter types (chainId, connector), and selects the appropriate client. Query options build enabled flags, queryFn/mutationFn, and stable query keys. Framework bindings call useConfig/useChainId, compute reactive params in Vue, and return typed useQuery/useMutation wrappers.

When to use it

• Adding a new Viem-based action (read-only or wallet) to packages/core
• Exposing TanStack Query options for a core action
• Creating React hooks or Vue composables that wrap a new core action
• Implementing wallet mutations that require connector/client switching
• Adding type inference and runtime/type tests for a new action

Best practices

• Prefix Viem imports with viem_ to avoid naming collisions
• Always include ChainIdParameter; add ConnectorParameter for wallet actions
• Use getClient for read-only and getConnectorClient for wallet or account-specific calls
• Omit wagmi-only props (chainId, connector) when forwarding to Viem actions
• Use ExactPartial vs UnionExactPartial based on parameter shape; include structuralSharing for complex returns
• Write both runtime tests and type tests where inference matters; connect/disconnect in wallet tests

Example use cases

• Implementing a new balance or contract read action in packages/core and publishing query options
• Creating a useX hook in packages/react that wires myActionQueryOptions and useQuery
• Building a Vue composable that deepUnref parameters and returns useQuery for reactivity
• Adding a wallet mutation hook that uses getConnectorClient and useMutation with proper types
• Authoring type benchmarks and type tests for ABI-related, generic type inference