Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From midnight-dapp-dev
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.
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:initThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffold a Vite + React 19 + shadcn + Tailwind v4 UI package and a TypeScript
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 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 scaffolding, extending, or debugging an Oclif CLI for Midnight Compact contracts -- including CLI scaffold, Oclif CLI template, wallet commands, contract deployment CLI, devnet CLI, CLI development, add CLI commands, Midnight CLI patterns, CLI error handling, CLI spinner and progress patterns, building a command-line interface for Compact contracts, scaffolding a new CLI project, or extending the generated CLI with new commands
Share bugs, ideas, or general feedback.
Scaffold a Vite + React 19 + shadcn + Tailwind v4 UI package and a TypeScript API package into the current project.
Run the init script:
bash "${CLAUDE_SKILL_ROOT}/scripts/init.sh" [--ui-name <name>] [--api-name <name>] [--contract-package <pkg>]
| Argument | Default | Description |
|---|---|---|
--ui-name | ui | UI package directory name |
--api-name | api | API package directory name |
--contract-package | Auto-detected or @{project}/contract | Contract package name |
The script:
package.json to derive the project namemanaged/ output)templates/ directorypackage.json workspaces if applicablepackage.json (workspace root)midnight-dapp-dev:core skill's templates/ directory must be accessible| Error | Cause | Action |
|---|---|---|
| "Template directory not found" | Templates not accessible from skill directory | Verify the midnight-dapp-dev plugin is installed correctly |
| "Directory already exists" | UI or API directory already present | Choose a different name or remove the existing directory first |
| Script exits non-zero | General failure during scaffolding | Check the error output for the specific failing step |
copy-contract-keys script in the UI package.json with the path to the contract's compiled keys/ and zkir/ outputsrc/index.ts and src/types.tsnpm run dev in the UI directory to start the dev serverThe template uses these {{PLACEHOLDER}} variables:
| Variable | Description |
|---|---|
{{PROJECT_NAME}} | Project name from root package.json |
{{UI_PACKAGE_NAME}} | UI package name (derived: {project}-ui) |
{{API_PACKAGE_NAME}} | API package name (derived: {project}-api) |
{{UI_DIR}} | UI directory name (default: ui) |
{{API_DIR}} | API directory name (default: api) |
{{CONTRACT_PACKAGE}} | Contract package name (scanned or prompted) |
{{PACKAGE_MANAGER}} | Detected package manager |