midnight-dapp-dev

Use this agent when building or modifying a Midnight DApp frontend — scaffolding UI/API packages, wiring contracts to the browser, building React components for contract interaction, or debugging wallet/provider/ transaction issues. Example 1: User wants to add a UI — "Add a frontend to my Midnight project." The dev agent checks if UI/API packages exist, invokes /midnight-dapp-dev:init if needed, then helps wire the contract. Example 2: User needs a component — "Create a form to call the mint circuit." The dev agent builds a React component with proper wallet state, transaction submission, and error handling. Example 3: User has a wallet issue — "My wallet won't connect." The dev agent debugs the connection flow: extension detection, network ID mismatch, authorization errors. Example 4: User wants contract wiring — "Wire up my counter contract to the API layer." The dev agent imports the compiled contract, fills type stubs, and creates circuit call wrappers.

This skill should be used when building a Midnight DApp frontend, "create a React component for contract interaction", "set up wallet connection", "add a contract state subscription", "configure Vite for Midnight", "write tests for a DApp component", "debug wallet connection", "provider assembly", "transaction flow in the browser", "DApp Connector API", "RxJS observable for contract state", "scaffold a Midnight DApp", "useContractState hook", or working with Midnight SDK packages (@midnight-ntwrk/*) in a Vite + React project.

This skill should be used when the user asks about connecting a browser-based DApp to the Midnight Lace wallet extension using the DApp Connector API. Covers the full connection lifecycle (InitialAPI, ConnectedAPI, WalletConnectedAPI), wallet detection via window.midnight, error handling with DAppConnectorAPIError, React 19.x and Next.js 16.x wallet integration patterns, building MidnightProviders from the DApp Connector, FetchZkConfigProvider, balanceUnsealedTransaction, getConfiguration, shielded and unshielded addresses, Lace setup and funding, and wallet-delegated proving.

This skill should be used when the user asks to scaffold a new Midnight DApp frontend, create a Vite + React 19 project for Midnight, initialize a UI and API package for a Compact contract, set up a shadcn + Tailwind v4 frontend, or invokes /midnight-dapp-dev:init. Generates a complete browser DApp scaffold with wallet connection, provider assembly, and contract interaction boilerplate.

This skill should be used when the user asks about the Midnight.js SDK, midnight-js packages, @midnight-ntwrk npm packages, setting up SDK providers, deploying or finding contracts with deployContract or findDeployedContract, calling circuits with callTx or submitCallTx, the transaction lifecycle, SDK provider types (WalletProvider, MidnightProvider, PublicDataProvider, ProofProvider, ZkConfigProvider, PrivateStateProvider), testkit-js testing, observable state subscriptions, contract maintenance and verifier keys, or connecting to the indexer or proof server.