skills.rest
Moonsong-Labs
Moonsong-LabsOFFICIAL
Explore all skills by this author →
GitHub

canton-webapp-generator

Generate a React webapp scaffold with Vite and Tailwind for Canton ledger integration.

1|1|Updated Nov 4, 2025
Search Tags:#frontend#SDK#generator#webapp#Canton#Daml
One-click install
npx skills add https://github.com/Moonsong-Labs/canton-dev --skill canton-webapp-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canton-webapp-generator
Source: https://github.com/Moonsong-Labs/canton-dev/tree/main/packages/canton-devenv-start/templates/.claude/skills/canton-webapp-generator
Command: npx skills add https://github.com/Moonsong-Labs/canton-dev --skill canton-webapp-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the manual setup overhead when starting Canton-fronted projects by auto-generating a complete React webapp scaffold configured for Canton ledger integration.

Core Features & Use Cases

  • Automatic scaffolding: Produces a fully wired React app with Vite, Tailwind, routing, and placeholder UI components ready for customization.
  • SDK integration ready: Validates the presence of a Canton SDK at sdk/ and prepares the webapp to consume templates and API types.
  • Developer onboarding: Reduces boilerplate for new Canton projects, enabling instant frontend development against a Daml-based ledger.

Quick Start

Use the command npx ts-node <path-to-skill>/scripts/generate-webapp.ts <project-path> <project-name> to generate the webapp scaffold in <project-path>/webapp, then cd <project-path>/webapp and run npm install and npm run dev.

Frequently Asked Questions about canton-webapp-generator

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

FAQPage Schema
How do I generate a React frontend for a Canton ledger project?▼

To generate a React frontend for a Canton ledger, run the Skill's generation script with your project path and name. It outputs a complete webapp scaffold with Vite, Tailwind, routing, and UI components ready for customization.

Do I need a Canton SDK folder to scaffold a webapp?▼

Yes, you need a Canton SDK folder. The scaffolding process validates the presence of an existing SDK at the sdk/ directory to prepare the webapp to consume templates and API types.

What is included in the auto-generated Canton webapp scaffold?▼

The Canton webapp scaffold includes a React application configured with Vite and Tailwind, routing, placeholder UI components, authentication, and contract lists ready for instant frontend development.

How do I run the generated Canton webapp dev server?▼

To run the Canton webapp dev server, navigate to the generated <project-path>/webapp directory, execute npm install to install dependencies, and then run npm run dev.

What's the best way to reduce boilerplate for new Daml-based web projects?▼

The best way to reduce boilerplate for Daml-based web projects is to auto-generate a complete React webapp scaffold wired for Canton ledger integration, eliminating manual setup overhead.

Can I use Vite and Tailwind for Canton Daml frontend development?▼

Yes, you can use Vite and Tailwind for Canton Daml frontend development. The generated scaffold uses Vite and Tailwind for setup to provide a working frontend with authentication and contract lists.

Related Skills

Explore More Software Engineering Skills→
Swofty-DevelopmentsSwofty-Developments

daml

Write and validate Daml code on the Canton Network.

Community
Advanced
findinfinitelabsfindinfinitelabs

react-typescript-frontend

Build a type-safe Chuukese React frontend with Mantine UI v8 and Vite.

Community
Intermediate
0xBigBoss0xBigBoss
53

canton-network-repos

Maps Canton, DAML, and Splice repository hierarchies with version compatibility guidance.

Community
Intermediate
yukieijiyukieiji

web-artifacts-builder

Generate stateful React, TypeScript, and Vite frontend artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced