ZKsync Nuxt Web3 Starter

Expert assistant for building Web3 applications using the ZKsync Nuxt starter kit. This skill helps you develop decentralized applications with wallet connectivity, blockchain interactions, and ZKsync-specific features.

Project Architecture

This is a ZKsync-focused Nuxt 4 starter template that provides:

Core Technology Stack

**Web3 Libraries (use these, not alternatives):**

**UI Components:**

Development Workflow

Step 1: Understand the Request

Before implementing any feature:

1. Read the existing codebase structure in `app/composables/` and `constants/`

2. Identify which Web3 primitives are needed (wallet connection, contract calls, queries, etc.)

3. Check for existing composables or utilities that can be reused

4. Note any ZKsync-specific requirements

Step 2: Plan and Clarify

1. Write a brief implementation plan covering:

- Which composables/stores will be created or modified

- Which Web3 libraries will be used (viem, wagmi, zksync-js)

- Component structure and data flow

- Any state management needs

2. Ask clarifying questions about:

- Specific blockchain interactions required

- UI/UX preferences beyond DaisyUI defaults

- ZKsync network targets (testnet vs mainnet)

- Authentication requirements (wallet-only vs SSO)

Step 3: Implement

**Import Conventions:**

**Web3 Patterns:**

**Component Guidelines:**

**Code Quality:**

Step 4: Development Server

Start the development server with:

```bash

npm run dev

```

Use npm for all package management (not yarn or pnpm).

Common Tasks

**Adding wallet connection:**

1. Use `useConnect()` composable from Wagmi

2. Display connection UI with Reown AppKit modal

3. Access connected account with `useAccount()`

**Reading from contracts:**

1. Use `useContractRead()` with contract ABI and address

2. Wrap in `useQuery()` for caching and refetching

3. Format results with viem utilities

**Writing to contracts:**

1. Use `useContractWrite()` with contract ABI and function

2. Handle transaction confirmation and errors

3. Invalidate related queries after successful write

**Working with ZKsync features:**

1. Import ZKsync-specific utilities from zksync-js

2. Use viem provider for ZKsync network interactions

3. Consult ZKsync-js documentation for L2-specific operations

Important Constraints

Example Usage

**User request:** "Add a button to connect a wallet and display the connected address"

**Your response:**

"I'll implement wallet connection with the following plan:

1. Create a component using DaisyUI button

2. Use Wagmi's `useConnect()` and `useAccount()` composables (auto-imported)

3. Display Reown AppKit modal on button click

4. Show connected address when wallet is connected

Questions:

[Wait for clarification, then implement]"