create-miden-app 1.0.6 → 1.0.7

package/template/create-miden-app/template/.claude/skills/react-sdk-patterns/SKILL.md

@@ -1,294 +0,0 @@
----
-name: react-sdk-patterns
-description: Complete guide to building Miden frontends with @miden-sdk/react hooks. Covers MidenProvider setup, all query hooks (useAccounts, useAccount, useNotes, useSyncState, useAssetMetadata), all mutation hooks (useCreateWallet, useSend, useMultiSend, useMint, useConsume, useSwap, useTransaction, useCreateFaucet), transaction stages, signer integration, and utility functions. Use when writing, editing, or reviewing Miden React frontend code.
----
-
-# Miden React SDK Patterns
-
-## SDK Choice
-
-ALWAYS use `@miden-sdk/react` hooks. Only fall back to raw `@miden-sdk/miden-sdk` WebClient via `useMidenClient()` for operations not covered by hooks. The React SDK handles WASM safety (runExclusive), state management (Zustand), auto-sync, and transaction stage tracking automatically.
-
-## MidenProvider Configuration
-
-```tsx
-import { MidenProvider } from "@miden-sdk/react";
-
-<MidenProvider
-  config={{
-    rpcUrl: "devnet",           // "devnet" | "testnet" | "localhost" | custom URL
-    prover: "devnet",           // "local" | "devnet" | "testnet" | custom URL
-    autoSyncInterval: 15000,    // ms, set to 0 to disable. Default: 15000
-    noteTransportUrl: "...",    // optional: for private note delivery
-  }}
-  loadingComponent={<Loading />}  // shown during WASM init
-  errorComponent={<Error />}      // shown on init failure (receives Error prop)
->
-  <App />
-</MidenProvider>
-```
-
-| Network | rpcUrl | Use When |
-|---------|--------|----------|
-| Devnet | `"devnet"` | Development, testing with fake tokens |
-| Testnet | `"testnet"` | Pre-production testing |
-| Localhost | `"localhost"` | Local node at `http://localhost:57291` |
-
-## Query Hooks
-
-All return `{ data, isLoading, error, refetch }`.
-
-### useAccounts()
-```tsx
-const { data: accounts } = useAccounts();
-// accounts.wallets — regular wallet accounts
-// accounts.faucets — token faucet accounts
-// accounts.all — everything (AccountHeader[])
-```
-
-### useAccount(accountId: string)
-```tsx
-const { data: account } = useAccount(accountId);
-// account.account — Account object (.id, .nonce, .bech32id())
-// account.assets — AssetBalance[] (assetId, amount, symbol?, decimals?)
-// account.getBalance(faucetId) — bigint balance for specific token
-```
-
-### useNotes(filter?)
-```tsx
-const { data: notes } = useNotes();
-// notes.notes — InputNoteRecord[]
-// notes.consumableNotes — ConsumableNoteRecord[]
-// notes.noteSummaries — NoteSummary[] (id, assets, sender)
-// notes.consumableNoteSummaries — NoteSummary[]
-
-// Filter by account:
-const { data } = useNotes({ accountId: "0x..." });
-// Filter by status:
-const { data } = useNotes({ status: "committed" });
-```
-
-### useSyncState()
-```tsx
-const { syncHeight, isSyncing, lastSyncTime, sync, error } = useSyncState();
-await sync(); // Manual sync
-```
-
-### useAssetMetadata(faucetId: string | string[])
-```tsx
-const { data: metadata } = useAssetMetadata(faucetId);
-// metadata.symbol — "TEST"
-// metadata.decimals — 8
-```
-
-### useTransactionHistory(options?)
-```tsx
-const { records, record, status, isLoading } = useTransactionHistory({ id: txId });
-// status: "pending" | "committed" | "discarded" | null
-```
-
-## Mutation Hooks
-
-All return `{ mutate, data, isLoading, stage, error, reset }`.
-
-**Transaction stages**: `"idle"` → `"executing"` → `"proving"` → `"submitting"` → `"complete"`
-
-### useCreateWallet()
-```tsx
-const { mutate: createWallet, isLoading } = useCreateWallet();
-const account = await createWallet({
-  storageMode: "private",  // "private" | "public" | "network". Default: "private"
-  mutable: true,           // Default: true
-  authScheme: 0,           // 0 = RpoFalcon512, 1 = EcdsaK256Keccak. Default: 0
-});
-```
-
-### useCreateFaucet()
-```tsx
-const { mutate: createFaucet } = useCreateFaucet();
-const faucet = await createFaucet({
-  tokenSymbol: "TEST",
-  decimals: 8,             // Default: 8
-  maxSupply: 1000000n,     // bigint!
-  storageMode: "public",   // Default: "private"
-});
-```
-
-### useSend()
-```tsx
-const { mutate: send, stage } = useSend();
-await send({
-  from: senderAccountId,
-  to: recipientAccountId,
-  assetId: faucetId,       // token faucet ID
-  amount: 1000n,           // bigint!
-  noteType: "private",     // "private" | "public". Default: "private"
-  recallHeight: 100,       // optional: sender can reclaim after this block
-  timelockHeight: 50,      // optional: recipient can consume after this block
-});
-```
-
-### useMultiSend()
-```tsx
-const { mutate: multiSend } = useMultiSend();
-await multiSend({
-  from: senderAccountId,
-  assetId: faucetId,
-  recipients: [
-    { to: recipient1, amount: 500n },
-    { to: recipient2, amount: 300n },
-  ],
-  noteType: "private",
-});
-```
-
-### useMint()
-```tsx
-const { mutate: mint } = useMint();
-await mint({
-  targetAccountId: recipientId,
-  faucetId: myFaucetId,
-  amount: 10000n,         // bigint!
-  noteType: "public",
-});
-```
-
-### useConsume()
-```tsx
-const { mutate: consume } = useConsume();
-await consume({
-  accountId: myAccountId,
-  noteIds: [noteId1, noteId2],
-});
-```
-
-### useSwap()
-```tsx
-const { mutate: swap } = useSwap();
-await swap({
-  accountId: myAccountId,
-  offeredFaucetId: tokenA,
-  offeredAmount: 100n,
-  requestedFaucetId: tokenB,
-  requestedAmount: 50n,
-  noteType: "private",
-  paybackNoteType: "private",
-});
-```
-
-### useTransaction() — Escape Hatch
-```tsx
-const { mutate: execute } = useTransaction();
-
-// With pre-built TransactionRequest:
-await execute({ accountId, request: txRequest });
-
-// With factory function (gets access to client):
-await execute({
-  accountId,
-  request: (client) => client.newSwapTransactionRequest(/* ... */),
-});
-```
-
-### useWaitForCommit()
-```tsx
-const { mutate: waitForCommit } = useWaitForCommit();
-await waitForCommit({
-  transactionId: result.transactionId,
-  timeoutMs: 10000,   // Default: 10000
-  intervalMs: 1000,    // Default: 1000
-});
-```
-
-### useWaitForNotes()
-```tsx
-const { mutate: waitForNotes } = useWaitForNotes();
-await waitForNotes({
-  accountId: myAccountId,
-  minCount: 1,         // Default: 1
-  timeoutMs: 10000,
-});
-```
-
-## Transaction Progress UI
-
-```tsx
-function SendButton({ from, to, assetId, amount }) {
-  const { mutate: send, stage, isLoading, error } = useSend();
-
-  return (
-    <div>
-      <button onClick={() => send({ from, to, assetId, amount })} disabled={isLoading}>
-        {isLoading ? `${stage}...` : "Send"}
-      </button>
-      {error && <p>Error: {error.message}</p>}
-    </div>
-  );
-}
-```
-
-## Signer Integration
-
-### Local Keystore (Default)
-No signer provider needed. Keys are managed in the browser via IndexedDB.
-
-### External Signers
-Wrap MidenProvider with a signer provider. Three pre-built options:
-- `ParaSignerProvider` from `@miden-sdk/para` — EVM wallets
-- `TurnkeySignerProvider` from `@miden-sdk/miden-turnkey-react` — passkey auth
-- `MidenFiSignerProvider` from `@miden-sdk/wallet-adapter-react` — MidenFi wallet
-
-```tsx
-// Example: Para signer wrapping MidenProvider
-import { ParaSignerProvider } from "@miden-sdk/para";
-<ParaSignerProvider apiKey="..." environment="PRODUCTION">
-  <MidenProvider config={...}><App /></MidenProvider>
-</ParaSignerProvider>
-```
-
-### useSigner() — Unified Interface
-```tsx
-const { isConnected, connect, disconnect, name } = useSigner();
-```
-
-### Custom Signer
-Implement `SignerContextValue` interface via `SignerContext.Provider`. Requires: `name`, `storeName` (unique per user for DB isolation), `accountConfig`, `signCb`, `connect`, `disconnect`. See `frontend-source-guide` skill for source references.
-
-## Utility Functions
-
-```tsx
-import { formatAssetAmount, parseAssetAmount, getNoteSummary, formatNoteSummary, toBech32AccountId } from "@miden-sdk/react";
-
-formatAssetAmount(1000000n, 8)       // "0.01"
-parseAssetAmount("0.01", 8)           // 1000000n
-const summary = getNoteSummary(note); // { id, assets, sender }
-formatNoteSummary(summary);           // "1.5 TEST"
-toBech32AccountId("0x1234...");       // "miden1qy35..."
-```
-
-## Direct Client Access
-
-```tsx
-const client = useMidenClient(); // throws if not ready
-const { runExclusive } = useMiden();
-
-// For operations not covered by hooks:
-await runExclusive(async (client) => {
-  const header = await client.getBlockHeaderByNumber(100);
-});
-```
-
-## Type Imports
-
-```tsx
-import type {
-  MidenConfig, QueryResult, MutationResult, TransactionStage,
-  AccountsResult, AccountResult, AssetBalance, NotesResult, NoteSummary,
-  SendOptions, MultiSendOptions, MintOptions, ConsumeOptions, SwapOptions,
-  CreateWalletOptions, CreateFaucetOptions, ExecuteTransactionOptions,
-  TransactionResult, SyncState, WaitForCommitOptions, WaitForNotesOptions,
-  Account, AccountId, InputNoteRecord, ConsumableNoteRecord,
-  TransactionRecord, TransactionRequest, NoteType, AccountStorageMode,
-  SignerContextValue, SignCallback, SignerAccountConfig,
-} from "@miden-sdk/react";
-```

package/template/create-miden-app/template/.claude/skills/signer-integration/SKILL.md

@@ -1,158 +0,0 @@
----
-name: signer-integration
-description: Guide to integrating external signers (Para, Turnkey, MidenFi wallet adapter) and building custom signers for Miden React frontends. Covers provider setup, passkey authentication, unified signer interface, custom SignerContext implementation, and custom account components. Use when adding wallet connection, authentication, or external key management to a Miden frontend.
----
-
-# Miden Signer Integration
-
-## Overview
-
-By default, MidenProvider uses a **local keystore** (keys in IndexedDB, no wallet connection needed). For production apps, wrap MidenProvider with a signer provider to use external key management.
-
-Signer providers must wrap MidenProvider (outer → inner):
-```
-<SignerProvider>      ← manages keys + auth
-  <MidenProvider>     ← manages Miden client
-    <App />
-  </MidenProvider>
-</SignerProvider>
-```
-
-## Pre-Built Signer Providers
-
-### Para (EVM Wallets)
-```tsx
-import { ParaSignerProvider } from "@miden-sdk/para";
-
-<ParaSignerProvider apiKey="your-api-key" environment="PRODUCTION">
-  <MidenProvider config={{ rpcUrl: "testnet" }}>
-    <App />
-  </MidenProvider>
-</ParaSignerProvider>
-
-const { para, wallet, isConnected } = useParaSigner();
-```
-
-### Turnkey (Passkey Authentication)
-```tsx
-import { TurnkeySignerProvider } from "@miden-sdk/miden-turnkey-react";
-
-// Config is optional — defaults to https://api.turnkey.com
-// and reads VITE_TURNKEY_ORG_ID from environment
-<TurnkeySignerProvider>
-  <MidenProvider config={{ rpcUrl: "testnet" }}>
-    <App />
-  </MidenProvider>
-</TurnkeySignerProvider>
-
-// Or with explicit config:
-<TurnkeySignerProvider config={{
-  apiBaseUrl: "https://api.turnkey.com",
-  defaultOrganizationId: "your-org-id",
-}}>
-  ...
-</TurnkeySignerProvider>
-```
-
-Connect via passkey:
-```tsx
-import { useSigner } from "@miden-sdk/react";
-import { useTurnkeySigner } from "@miden-sdk/miden-turnkey-react";
-
-const { isConnected, connect, disconnect } = useSigner();
-await connect();  // triggers passkey flow, auto-selects account
-
-// Turnkey-specific extras
-const { client, account, setAccount } = useTurnkeySigner();
-```
-
-### MidenFi Wallet Adapter (Browser Extension)
-```tsx
-import { MidenFiSignerProvider } from "@miden-sdk/wallet-adapter-react";
-
-<MidenFiSignerProvider network="Testnet">
-  <MidenProvider config={{ rpcUrl: "testnet" }}>
-    <App />
-  </MidenProvider>
-</MidenFiSignerProvider>
-```
-
-## Unified Signer Interface
-
-Works with any signer provider above:
-```tsx
-import { useSigner } from "@miden-sdk/react";
-
-const { isConnected, connect, disconnect, name } = useSigner();
-
-if (!isConnected) {
-  return <button onClick={connect}>Connect {name}</button>;
-}
-```
-
-## Building a Custom Signer
-
-Implement `SignerContextValue` via `SignerContext.Provider`:
-
-```tsx
-import { SignerContext } from "@miden-sdk/react";
-
-<SignerContext.Provider value={{
-  name: "MyWallet",
-  storeName: `mywallet_${userAddress}`,  // unique per user for DB isolation
-  isConnected: true,
-  accountConfig: {
-    publicKey: userPublicKeyCommitment,  // Uint8Array
-    storageMode: "private",
-  },
-  signCb: async (pubKey, signingInputs) => {
-    // Route to your signing service
-    return signature;  // Uint8Array
-  },
-  connect: async () => { /* trigger wallet connection */ },
-  disconnect: async () => { /* clear session */ },
-}}>
-  <MidenProvider config={{ rpcUrl: "testnet" }}>
-    <App />
-  </MidenProvider>
-</SignerContext.Provider>
-```
-
-**Required fields:**
-- `name` — Display name for the signer
-- `storeName` — Unique string per user (isolates IndexedDB data between users)
-- `accountConfig` — Public key commitment + storage mode
-- `signCb` — Callback that signs transaction data with your key management service
-- `connect` / `disconnect` — Session lifecycle handlers
-
-## Custom Account Components
-
-Attach application-specific `AccountComponent` instances (e.g., DEX logic from `.masp` packages) to accounts created by the signer:
-
-```tsx
-import { type SignerAccountConfig } from "@miden-sdk/react";
-import { AccountComponent } from "@miden-sdk/miden-sdk";
-
-const myDexComponent: AccountComponent = await loadCompiledComponent();
-
-const accountConfig: SignerAccountConfig = {
-  publicKeyCommitment: userPublicKeyCommitment,
-  accountType: "RegularAccountUpdatableCode",
-  storageMode: myStorageMode,
-  customComponents: [myDexComponent],
-};
-```
-
-Components are appended to the `AccountBuilder` after the default basic wallet component. The field is optional — omitting it preserves default behavior.
-
-## Which Signer to Choose
-
-| Signer | Auth Method | Keys Stored | Best For |
-|--------|-------------|-------------|----------|
-| Local keystore (default) | None | Browser IndexedDB | Development, demos |
-| Para | EVM wallet | Para servers | Apps with existing EVM users |
-| Turnkey | Passkey (biometric) | Turnkey servers | Consumer apps, no seed phrases |
-| MidenFi Wallet | Browser extension | Extension | Power users with MidenFi wallet |
-| Custom | Your choice | Your infrastructure | Enterprise, custom auth flows |
-
-**Key trade-off**: Local keystore requires no setup but keys are lost if the user clears browser data. External signers persist keys server-side but add a dependency.

package/template/create-miden-app/template/.claude/skills/vite-wasm-setup/SKILL.md

@@ -1,128 +0,0 @@
----
-name: vite-wasm-setup
-description: Guide to configuring Vite for Miden WASM applications. Covers the midenVitePlugin() setup, COOP/COEP headers, production deployment headers, TypeScript compatibility, and troubleshooting common Vite + WASM issues. Use when setting up a new Miden frontend, debugging build or runtime errors related to WASM or Vite configuration, or deploying to production.
----
-
-# Vite + WASM Configuration for Miden
-
-## Required vite.config.ts
-
-```typescript
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { midenVitePlugin } from "@miden-sdk/vite-plugin";
-
-export default defineConfig({
-  plugins: [react(), midenVitePlugin()],
-});
-```
-
-`midenVitePlugin()` accepts an options object:
-
-```typescript
-midenVitePlugin({ crossOriginIsolation: true })
-// Enables COOP/COEP headers in dev server. Defaults to false to avoid breaking OAuth popups.
-```
-
-## What midenVitePlugin() Handles
-
-`@miden-sdk/vite-plugin` abstracts all Miden-specific Vite configuration:
-
-- **WASM loading** — Configures Vite to correctly import `.wasm` modules
-- **Top-level await** — Enables top-level `await` required by the WASM SDK initialization
-- **optimizeDeps** — Excludes `@miden-sdk/miden-sdk` from pre-bundling (pre-bundling corrupts the WASM binary)
-- **COOP/COEP headers** — Optionally adds `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` headers via `crossOriginIsolation` option
-
-You do not need to install or configure `vite-plugin-wasm`, `vite-plugin-top-level-await`, or dexie aliases manually.
-
-## Required Dependencies
-
-```json
-{
-  "dependencies": {
-    "@miden-sdk/react": "^0.13.0",
-    "@miden-sdk/miden-sdk": "^0.13.0"
-  },
-  "devDependencies": {
-    "@miden-sdk/vite-plugin": "^0.13.0"
-  }
-}
-```
-
-## Production Deployment Headers
-
-COOP/COEP headers must be set on the production server. `midenVitePlugin({ crossOriginIsolation: true })` only affects the Vite dev server.
-
-### Nginx
-```nginx
-add_header Cross-Origin-Opener-Policy same-origin;
-add_header Cross-Origin-Embedder-Policy require-corp;
-```
-
-### Vercel (vercel.json)
-```json
-{
-  "headers": [
-    {
-      "source": "/(.*)",
-      "headers": [
-        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
-        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
-      ]
-    }
-  ]
-}
-```
-
-### Cloudflare Pages (_headers)
-```
-/*
-  Cross-Origin-Opener-Policy: same-origin
-  Cross-Origin-Embedder-Policy: require-corp
-```
-
-### WASM MIME Type
-Ensure your server serves `.wasm` files with `application/wasm` MIME type.
-
-## COOP/COEP Gotchas
-
-These headers break:
-- **Third-party iframes** (YouTube embeds, Twitter embeds, analytics)
-- **External scripts** without CORS headers
-- **OAuth popups** from different origins
-
-Workaround: Use `credentialless` for COEP if you need cross-origin resources:
-```
-Cross-Origin-Embedder-Policy: credentialless
-```
-
-Note: `credentialless` provides weaker isolation but allows most cross-origin resources.
-
-## TypeScript Compatibility
-
-Standard Vite-compatible tsconfig settings work with Miden. The only actual constraint is ES2020+ for `bigint` support:
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  }
-}
-```
-
-`module: "ESNext"` and `moduleResolution: "bundler"` are standard Vite defaults, not Miden-specific requirements. If you're using the Vite-generated tsconfig, no changes are needed beyond ensuring `target` is ES2020+.
-
-## Troubleshooting
-
-| Issue | Cause | Fix |
-|-------|-------|-----|
-| "SharedArrayBuffer is not defined" | Missing COOP/COEP headers | Use `midenVitePlugin({ crossOriginIsolation: true })` in dev; set headers on production server |
-| WASM module not found | SDK not configured correctly | Ensure `midenVitePlugin()` is in plugins array |
-| "Top-level await not supported" | Missing plugin setup | Ensure `midenVitePlugin()` is in plugins array |
-| WASM init hangs | COEP blocking WASM fetch | Check network tab for blocked requests; enable `crossOriginIsolation` |
-| Build succeeds but WASM fails at runtime | Wrong MIME type | Serve .wasm as application/wasm |
-| "recursive use of an object" | Concurrent WASM access | Use runExclusive() from useMiden() |
-| Double initialization in dev | React StrictMode | Use MidenProvider (handles this internally) |

package/template/create-miden-app/template/.env.example

@@ -1,5 +0,0 @@
-# Miden RPC endpoint (default: "testnet")
-VITE_MIDEN_RPC_URL=testnet
-
-# Miden prover (default: "testnet", alternative: "local")
-VITE_MIDEN_PROVER=testnet

package/template/create-miden-app/template/CLAUDE.md

@@ -1,116 +0,0 @@
-# Miden Frontend App
-
-React 19 + TypeScript + Vite frontend for the Miden blockchain.
-
-## Project Structure
-
-- `src/` — React application source
-- `src/components/` — UI components (Counter, AppContent)
-- `src/hooks/` — Custom hooks (useIncrementCounter)
-- `src/lib/` — Shared utilities
-- `vite.config.ts` — Vite config with midenVitePlugin() from @miden-sdk/vite-plugin
-- `package.json` — Dependencies: @miden-sdk/react, @miden-sdk/miden-sdk, @demox-labs/miden-wallet-adapter
-
-## Build & Dev
-
-```
-npm run dev          # Start dev server (Vite)
-npm run build        # Type check + production build (tsc -b && vite build)
-npm run lint         # ESLint
-```
-
-Type checking alone (verification command):
-```
-npx tsc -b --noEmit
-```
-
-## SDK Choice: React SDK over Raw WebClient
-
-ALWAYS prefer `@miden-sdk/react` hooks over raw `@miden-sdk/miden-sdk` WebClient methods.
-Only use WebClient directly via `useMidenClient()` for operations not covered by hooks.
-
-### Setup (main.tsx or App.tsx)
-```tsx
-import { MidenProvider } from "@miden-sdk/react";
-
-<MidenProvider config={{ rpcUrl: "devnet", prover: "devnet" }}>
-  <App />
-</MidenProvider>
-```
-
-### Query Hooks (return { data, isLoading, error, refetch })
-```tsx
-const { data: accounts } = useAccounts();       // .wallets, .faucets, .all
-const { data: account } = useAccount(accountId); // .balance(faucetId)
-const { data: notes } = useNotes();              // .input, .consumable
-const { syncHeight, sync } = useSyncState();
-const { data: metadata } = useAssetMetadata(faucetId); // .symbol, .decimals
-```
-
-### Mutation Hooks (return { mutate, isLoading, stage, error, reset })
-Transaction stages: `idle → executing → proving → submitting → complete`
-```tsx
-const { mutate: createWallet } = useCreateWallet();
-const { mutate: send, stage } = useSend();
-const { mutate: consume } = useConsume();
-const { mutate: mint } = useMint();
-const { mutate: swap } = useSwap();
-const { mutate: execute } = useTransaction();  // arbitrary tx requests
-```
-
-### Token Amounts Are BigInt
-```tsx
-import { formatAssetAmount, parseAssetAmount } from "@miden-sdk/react";
-const display = formatAssetAmount(balance, 8);  // bigint → string
-const amount = parseAssetAmount("1.5", 8);       // string → bigint
-```
-
-## Critical Pitfalls
-
-**WASM init must complete first**: Always use MidenProvider's `loadingComponent` or check `useMiden().isReady`. Components rendering before WASM init will crash.
-
-**Recursive WASM access crashes**: Never call client methods concurrently. Use `runExclusive()` from `useMiden()` for sequential execution. Built-in hooks handle this automatically.
-
-**COOP/COEP headers required**: WASM SharedArrayBuffer needs `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: require-corp` in vite.config.ts AND production server.
-
-**Token amounts are bigint, not number**: `send({ amount: 1000 })` will fail. Use `amount: 1000n` or `parseAssetAmount("10", 8)`.
-
-## General Frontend Skills (Recommended)
-
-For general React, TypeScript, and design capabilities, install these official skills alongside our Miden-specific ones:
-
-```bash
-# Vercel's React/design skills
-git clone https://github.com/vercel-labs/agent-skills.git
-# Install: react-best-practices, web-design-guidelines, composition-patterns
-
-# Anthropic's frontend design skill (Claude Code plugin)
-# See: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design
-```
-
-These provide the general frontend layer. The Miden-specific skills below layer on top.
-
-## Miden Skills
-
-For Miden-specific guidance, Claude will auto-load these skills when relevant:
-- `react-sdk-patterns` — Complete React SDK hook API reference
-- `frontend-pitfalls` — All frontend/WASM/browser pitfalls with safe/unsafe examples
-- `miden-concepts` — Miden architecture from a developer perspective
-- `vite-wasm-setup` — Vite + WASM configuration, deployment headers, troubleshooting
-
-## Advanced Development
-
-For complex applications beyond basic hook usage (custom signers, raw WebClient, advanced note flows):
-
-1. Clone `miden-client` repo alongside this project (see `frontend-source-guide` skill)
-2. Use Plan Mode first — Claude explores React SDK source + examples before coding
-3. Claude uses sub-agents to explore repos efficiently without filling main context
-4. The type check hook provides verification — check types, fix errors, recheck
-
-The basic skills cover ~80% of patterns. Source repos provide the remaining 20% for advanced builders.
-
-## Verification Workflow
-
-After modifying TypeScript/React code, always:
-1. Type check: `npx tsc -b --noEmit`
-2. Build test: `npm run build`