# Onchain TypeScript Skills

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Viem](https://img.shields.io/badge/viem-2.x-blue)](https://viem.sh)
[![Wagmi](https://img.shields.io/badge/wagmi-3.x-blue)](https://wagmi.sh)

Claude Code skills for building TypeScript applications on Ethereum and EVM chains using **Viem** and **Wagmi**.

**Versions:** Viem 2.x | Wagmi 3.x | TypeScript 5.7.3+

## Installation

### Via npx (Recommended)

```bash
# Install both skills
npx add-skill 0xSardius/onchain-typescript-skills

# Or install specific skills
npx add-skill 0xSardius/onchain-typescript-skills --skill viem
npx add-skill 0xSardius/onchain-typescript-skills --skill wagmi
```

### Via Claude Code Plugin

```bash
# Register marketplace
/plugin marketplace add 0xSardius/onchain-typescript-skills

# Install specific plugin
/plugin install viem@0xSardius/onchain-typescript-skills
/plugin install wagmi@0xSardius/onchain-typescript-skills
/plugin install onchain-full@0xSardius/onchain-typescript-skills
```

## Skills Included

### Viem
**Use for:** Node scripts, CLI tools, backend services, any non-React TypeScript

- Public/wallet client setup
- Contract read/write patterns with `simulateContract`
- ABI type safety with `as const`
- Event watching and filtering
- Error handling patterns
- Gas estimation and nonce management

**Triggers on:** Contract interactions, wallet operations, transaction signing, ABI encoding, event watching

### Wagmi
**Use for:** React and Next.js applications with blockchain functionality

- v3 config and provider setup
- Core hooks (useAccount, useReadContract, useWriteContract)
- v3 hooks (useConnectors, useChains)
- Transaction confirmation with useWaitForTransactionReceipt
- SSR/hydration handling for Next.js
- ConnectKit/RainbowKit integration
- React-specific pitfalls and patterns

**Triggers on:** useAccount, useConnect, useReadContract, useWriteContract, WagmiProvider, React blockchain hooks

## When to Use Which

| Building... | Use |
|------------|-----|
| Node.js script reading contracts | Viem |
| CLI tool for blockchain ops | Viem |
| Backend service monitoring events | Viem |
| React app with wallet connect | Wagmi |
| Next.js dapp | Wagmi |
| Server-side contract calls in Next.js | Viem (in API routes) |

## Key Patterns Encoded

### Type Safety
Both skills emphasize `as const` for ABI type inference - the most common source of bugs in AI-generated blockchain code.

### Simulate Before Write
Viem skill enforces the `simulateContract` → `writeContract` pattern to catch errors before spending gas.

### React Rules of Hooks
Wagmi skill addresses conditional hook calls (use `enabled` option instead) and stale closure prevention.

## Contributing

PRs welcome! Focus areas:
- Additional chain configurations
- More error handling patterns
- Testing utilities
- Integration patterns (TheGraph, indexers, etc.)

## License

MIT