Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub devrelaicom/midnight-expert --plugin midnight-dapp-devHow 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.tsxThis 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.
Share bugs, ideas, or general feedback.
Guidance 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 aliases