midnight-dapp-dev:core

Scaffold a Midnight DApp frontend with Vite and React.

37|9|Updated Feb 25, 2026
One-click install
npx skills add https://github.com/devrelaicom/midnight-expert --skill midnight-dapp-dev-core
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: midnight-dapp-dev:core
Source: https://github.com/devrelaicom/midnight-expert/tree/main/plugins/midnight-dapp-dev/skills/core
Command: npx skills add https://github.com/devrelaicom/midnight-expert --skill midnight-dapp-dev-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides frontend developers to scaffold and wire a Midnight DApp frontend using Vite + React, including wallet integration and provider orchestration.

Core Features & Use Cases

  • Scaffold a complete Midnight DApp frontend (UI + API scaffolding) based on templates.
  • Demonstrate how to assemble the 6 providers (publicDataProvider, zkConfigProvider, proofProvider, walletProvider, midnightProvider, privateStateProvider) and connect to Lace through the DApp Connector API.
  • Provide patterns for state management, contract state derivation, and React context usage in a DApp.

Quick Start

Use the provided scaffolding to bootstrap a ready-to-run Midnight DApp frontend from the included templates and references.

Frequently Asked Questions about midnight-dapp-dev:core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a Midnight DApp frontend with React and Vite?

To scaffold a Midnight DApp frontend, this skill initializes a Vite + React blueprint with templates for UI components, API integration, and reactive state management to accelerate startup.

What providers do I need to assemble for a Midnight DApp?

A Midnight DApp requires six providers: publicDataProvider, zkConfigProvider, proofProvider, walletProvider, midnightProvider, and privateStateProvider. This skill uses a factory pattern to assemble them for browser-based UIs.

How do I connect a Midnight DApp to the Lace wallet?

You connect a Midnight DApp to the Lace wallet through the DApp Connector API. This skill provides the necessary wallet integration patterns and provider assembly to establish the connection within your React application.

Does this skill provide patterns for managing private state in a Midnight DApp?

Yes, this skill provides specific patterns for private state management alongside contract state derivation and React context usage. These templates help manage both private and public contract states effectively.

Can I use this skill to bootstrap a ready-to-run DApp UI from templates?

Yes, you can bootstrap a ready-to-run Midnight DApp frontend using the included scaffolding, references, and example patterns. It generates a complete UI and API blueprint designed for rapid startup.

What is the best way to orchestrate multiple providers in a Midnight React application?

The best way to orchestrate providers in a Midnight React application is using a factory assembly approach. This skill scaffolds the six required providers simultaneously to ensure proper dependency injection and state management.