skills.rest
wevm
wevmOFFICIAL
Explore all skills by this author →
Website𝕏@wevm_devGitHub

wagmi-development

Standardize Wagmi feature development with Viem-based action wrappers, TypeScript typings, and React and Vue bindings.

6.7k|1.4k|Updated Nov 23, 2021
Search Tags:#react#vue#wagmi#viem#framework bindings#core actions#query options
One-click install
npx skills add https://github.com/wevm/wagmi --skill wagmi-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wagmi-development
Source: https://github.com/wevm/wagmi/tree/main/.agents/skills/wagmi-development
Command: npx skills add https://github.com/wevm/wagmi --skill wagmi-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides end-to-end patterns for building Wagmi features across core actions, query options, and framework bindings, helping teams deliver new actions and hooks faster and more consistently.

Core Features & Use Cases

  • Core Action Patterns: Base functionality wrapping Viem; type-safe wrappers; unify client access patterns.
  • Query Options: TanStack Query integration for read-only or mutation operations; stable query keys and options.
  • Framework Bindings: React and Vue bindings to expose useMyAction hooks and composables across UI frameworks.

Quick Start

  • Define a new action in the core layer following the provided template (types, wrapper, and Viem integration).
  • Add corresponding query options and framework bindings according to the established patterns.
  • Export the action and its query/types in the appropriate exports files.

Frequently Asked Questions about wagmi-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new action and hook in Wagmi across React and Vue?▼

To add a new Wagmi action and hook, define a type-safe Viem wrapper in the core layer, create TanStack Query options, and expose it through React and Vue framework bindings.

What is the standard pattern for wrapping Viem actions in Wagmi?▼

The standard pattern for wrapping Viem actions involves creating type-safe wrappers in the core package that unify client access patterns, ensuring consistent execution and reliability.

Does Wagmi provide templates for TanStack Query integration?▼

Yes, Wagmi provides patterns for TanStack Query integration, allowing developers to establish stable query keys and options for both read-only operations and mutations.

Can I use the same core Wagmi actions for both React and Vue bindings?▼

Yes, you can use the same core Wagmi actions for both React and Vue by applying unified framework binding patterns to expose corresponding hooks and composables across UI frameworks.

What's the best way to standardize Wagmi feature development across multiple packages?▼

The best way to standardize Wagmi feature development is using codified templates for core actions, query options, and framework bindings to accelerate delivery and ensure consistency across packages.

Related Skills

Explore More Software Engineering Skills→
okxokx
12

uniswap-viem-integration

Configure viem clients and wagmi wallet connections for EVM blockchains in TypeScript.

Official
Intermediate
Dargon789Dargon789
3

wagmi-development

Develop full-stack Wagmi features across core actions, query options, and framework bindings.

Community
Advanced
oakossoakoss
1

tanstack-query

Manage React server state with TanStack Query caching and background updates.

Official
Advanced
LennyDevXLennyDevX

viem-integration

Read EVM blockchain data and send transactions using Viem.

Community
Intermediate