Stats
Actions
Tags
From midnight-dapp-dev
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/midnight-dapp-dev:coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guidance for building browser-based DApps on the Midnight blockchain using
references/provider-patterns.mdreferences/state-management.mdreferences/testing-patterns.mdreferences/vite-config.mdtemplates/api/package.jsontemplates/api/src/index.tstemplates/api/src/private-state.tstemplates/api/src/types.tstemplates/api/tsconfig.jsontemplates/ui/components.jsontemplates/ui/index.htmltemplates/ui/package.jsontemplates/ui/src/App.tsxtemplates/ui/src/__tests__/App.test.tsxtemplates/ui/src/__tests__/midnight-providers.test.tsxtemplates/ui/src/__tests__/setup.tstemplates/ui/src/__tests__/wallet-context.test.tsxtemplates/ui/src/components/network-badge.tsxtemplates/ui/src/components/proof-server-status.tsxtemplates/ui/src/components/ui/badge.tsxGuidance for building browser-based DApps on the Midnight blockchain using Vite + React 19 + shadcn + Tailwind v4. This skill is the authoritative reference for DApp Connector API usage, SDK provider patterns, and frontend architecture for Midnight.
Every Midnight browser DApp assembles 6 providers from the Lace wallet's
configuration. All network endpoints come from getConfiguration() — no
hardcoded URLs.
WalletProvider (React Context)
→ connect("undeployed") → ConnectedAPI
→ getConfiguration() → { indexerUri, indexerWsUri, substrateNodeUri, networkId }
MidnightProvidersProvider (React Context)
→ publicDataProvider ← indexerPublicDataProvider(indexerUri, indexerWsUri)
→ zkConfigProvider ← FetchZkConfigProvider(window.location.origin)
→ proofProvider ← httpClientProofProvider(proofServerUri, zkConfigProvider)
→ walletProvider ← { getCoinPublicKey, getEncryptionPublicKey, balanceTx }
→ midnightProvider ← { submitTx }
→ privateStateProvider ← in-memory Map
The proof server URI is derived from substrateNodeUri by replacing port
9944 with 6300. If serviceUriConfig().proverServerUri is available, use
that instead.
Contract call → UnprovenTransaction
→ proofProvider.proveTx() (proof server generates ZK proof)
→ walletProvider.balanceTx() (Lace adds coin inputs, signs)
→ midnightProvider.submitTx() (Lace broadcasts to node)
→ publicDataProvider observable (indexer confirms on-chain)
Midnight SDK requires these Vite plugins for browser compatibility:
@vitejs/plugin-react@tailwindcss/vite — Tailwind v4, CSS-based config (@import "tailwindcss")vite-plugin-wasm — WASM support for SDKvite-plugin-top-level-awaitvite-plugin-node-polyfills — buffer, process, util, crypto, stream@originjs/vite-plugin-commonjsFor detailed configuration, see references/vite-config.md.
Combine on-chain ledger state with local private state using RxJS
combineLatest, expose via React hooks. For patterns and examples,
see references/state-management.md.
Test wallet connection states, provider assembly, and component rendering
with Vitest + Testing Library. Mock window.midnight for wallet tests.
For patterns, see references/testing-patterns.md.
To scaffold a new UI + API package, invoke /midnight-dapp-dev:init.
The init skill copies templates from this skill's templates/ directory
and substitutes {{PLACEHOLDER}} values.
The templates/ directory contains the flat template tree:
templates/ui/ — Vite + React 19 + shadcn + Tailwind v4 app with wallet integrationtemplates/api/ — TypeScript SDK layer with provider factory and state observablereferences/provider-patterns.md — The 6-provider pattern, wallet-driven config, browser vs Node.js differences, DApp Connector API typesreferences/state-management.md — RxJS combineLatest, derived state, useContractState hook, observable patternsreferences/testing-patterns.md — Vitest + Testing Library patterns, mocking wallet, testing providersreferences/vite-config.md — Required plugins, polyfills, Tailwind v4 CSS setup, path aliasesnpx claudepluginhub devrelaicom/midnight-expert --plugin midnight-dapp-devThis 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 to create a new Midnight project, scaffold a Compact smart contract project, use create-mn-app, initialize a DApp, set up a new Midnight application, start a new project, use a project template, set up hello-world or counter template, or set up a Midnight development environment for the first time. Also triggered by "new project", "start a project", "init project", "create-mn-app", or "scaffold".
This skill should be used when the user asks about Midnight network architecture, transaction structure, guaranteed vs fallible sections, Zswap/Kachina integration, ledger and state management, cryptographic binding, balance verification, nullifiers, address derivation, transaction merging, atomic swaps, fee handling, or the privacy model separating private and public domains.