skills.rest
MoriwakiYusuke
MoriwakiYusukeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Provide frontend patterns for Next.js clients using PAPI smoldot light-client access.

Updated Feb 6, 2026
Search Tags:#next.js#zustand#wasm#papi#web workers#stealth addresses#smoldot
One-click install
npx skills add https://github.com/MoriwakiYusuke/anarchy --skill frontend-patterns-moriwakiyusuke
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/MoriwakiYusuke/anarchy/tree/main/.claude/skills/frontend-patterns
Command: npx skills add https://github.com/MoriwakiYusuke/anarchy --skill frontend-patterns-moriwakiyusuke

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Anarchy’s frontend needs reliable, repeatable patterns for connecting a Next.js App Router UI to the PAPI-based smoldot light client, dispatching chain extrinsics, running Wasm cryptography in Web Workers, and implementing stealth address/DM scanning without breaking SSR rules or leaking secrets.

Core Features & Use Cases

  • PAPI + smoldot integration patterns: Use a single PAPI client singleton via getUnsafeApi() to avoid @polkadot/api metadata/signature issues during the metadata v16 transition.
  • Safe extrinsic + storage access: Handle runtime storage reads, runtime API calls (e.g., DM scan), and extrinsic submission with correct type conversions (notably BigInt for u64/u128).
  • Wasm-in-Workers cryptography workflow: Initialize anarchy-wasm-engine in the main thread only when appropriate, then offload heavy crypto (KZG/SSS/DM encrypt-decrypt scanning) to a WorkerPool to keep the UI responsive.
  • Stealth & DM scanning + state orchestration: Implement scanner flows with bounded block ranges, progress updates into Zustand stores, and session-only key management rules.
  • i18n, SSR guards, and validation/state machine conventions: Standardize error mapping to i18n keys, prevent window is not defined SSR crashes, and use explicit UI state machines for pending/confirmed flows.

Quick Start

Use frontend-patterns to implement a new Next.js page that initializes the PAPI smoldot client on the client side, calls the runtime DM scanner API, and runs Wasm cryptographic steps through the shared WorkerPool while streaming progress into the zustand store.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I integrate a PAPI smoldot light client in Next.js without breaking SSR?▼

To integrate a PAPI smoldot light client in Next.js without breaking SSR, initialize the PAPI client singleton strictly on the client side using getUnsafeApi() and apply SSR guards to prevent window is not defined crashes during server rendering.

What is the best way to run Wasm cryptography in a Next.js frontend?▼

The best way to run Wasm cryptography in a Next.js frontend is offloading heavy crypto tasks like KZG and encryption scanning to a Web Worker WorkerPool, keeping the main thread and UI responsive while managing state via Zustand stores.

How do I handle BigInt SCALE type encoding for PAPI runtime storage and extrinsics?▼

Handle BigInt SCALE type encoding for PAPI runtime storage and extrinsics by ensuring correct type conversions for u64 and u128 values during runtime API calls and extrinsic submission, avoiding standard number types to maintain encoding accuracy.

Why use getUnsafeApi instead of the standard Polkadot API during the metadata v16 transition?▼

Use getUnsafeApi instead of the standard Polkadot API during the metadata v16 transition to avoid signature and metadata compatibility issues, ensuring reliable extrinsic dispatch and storage access within the smoldot light client environment.

How do I implement stealth address scanning with session-only key management?▼

Implement stealth address scanning with session-only key management by bounding block ranges for scanner flows, streaming progress updates into Zustand stores, and enforcing strict session-only key handling rules to prevent secret leakage.

Can I use Zustand for UI state machines during pending extrinsic confirmation flows?▼

Yes, you can use Zustand for UI state machines during pending extrinsic confirmation flows by establishing explicit state boundaries and mapping runtime errors to i18nized keys for standardized frontend state orchestration.

Related Skills

Explore More Software Engineering Skills→
bytetalentbytetalent

Server Client Page Split

Separate server and client components in Next.js App Router pages.

Official
Intermediate
VocaidVocaid
1

Interact with 0G Chain Contracts

Read and write 0G Chain contracts with ethers v6.

Official
Intermediate
MoriwakiYusukeMoriwakiYusuke

wasm-engine

Develop browser-executed cryptographic primitives for KZG-VSS, stealth addressing, and encrypted DMs.

Community
Advanced
paritytechparitytech
8

product-sdk-chain-connection

Connect to Polkadot parachains and query chain state via @parity/product-sdk-chain-client.

Official
Intermediate