skills.rest
Zodomo
ZodomoCOMMUNITY
Explore all skills by this author →
𝕏@ZodomoGitHub

frontend-ux

Enforce four-state Ethereum dApp action flows with pending states and error translation.

7|Updated Apr 4, 2026
Search Tags:#error handling#wallet integration#ui theming#ethereum dapp#rpc reliability#transaction ux#approval flows
One-click install
npx skills add https://github.com/Zodomo/DrandVerifier --skill frontend-ux-zodomo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux
Source: https://github.com/Zodomo/DrandVerifier/tree/main/.opencode/skills/ethskills/frontend-ux
Command: npx skills add https://github.com/Zodomo/DrandVerifier --skill frontend-ux-zodomo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UX mistakes in Ethereum dApps cause users to double-submit transactions, misunderstand address/value inputs, rely on stale state, and encounter confusing wallet errors that reduce trust and increase failed transactions.

Core Features & Use Cases

  • Deterministic transaction button states: Enforces per-action pending states (disabled + spinner + correct label) until onchain confirmation.
  • Four-state action flow: Guides UX from connect → network switch → approval → execution with correct ordering and fresh onchain status checks.
  • Safe address and amount presentation: Standardizes address validation, copy/explorer/ENS handling, and adds USD context and human-readable decimals for ETH/tokens.
  • RPC reliability and contract error translation: Promotes intentional provider usage, stable polling, and human-readable error mapping for reverts and wallet failures.
  • Pre-publish product identity: Ensures OG/Twitter metadata, absolute reachable images, theming semantics, and branding checks before release.

Quick Start

Use frontend-ux to design your Ethereum dApp’s connect/approve/execute flows so every onchain action has immediate disabling, correct pending labels, and readable failures, while displaying addresses and token amounts with proper formatting and USD context.

Frequently Asked Questions about frontend-ux

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

FAQPage Schema
How do I prevent double-submit transactions in an Ethereum dApp?▼

Prevent double-submit transactions in an Ethereum dApp by enforcing deterministic transaction button states that disable the button and display a spinner with a correct pending label until onchain confirmation is received.

What is the correct wallet connection and approval flow for dApps?▼

The correct wallet connection and approval flow for dApps is a strict four-state action flow that guides users sequentially through connect, network switch, approval, and execution with fresh onchain status checks.

How do I display Ethereum addresses and token amounts safely?▼

Display Ethereum addresses and token amounts safely by standardizing address validation, enabling copy and explorer links, and rendering token amounts with human-readable decimals alongside USD context.

Why does my dApp show confusing transaction errors and stale state?▼

Your dApp shows confusing transaction errors and stale state due to unreliable RPC polling and untranslated contract reverts, which require intentional provider configuration and human-readable error mapping to resolve.

What production metadata checks do I need before publishing a dApp?▼

Production metadata checks needed before publishing a dApp include validating OG and Twitter metadata, verifying absolute reachable image URLs, and ensuring theming semantics and branding checks are complete.

Can I use this dApp UX flow without external UI component libraries?▼

Yes, you can use this dApp UX flow without external UI component libraries because it operates with no dependencies, focusing solely on state management logic and UX rules for wallet and transaction handling.

Related Skills

Explore More Design & Creative Skills→
liumeixinliumeixin
4

base

Query Base blockchain data with USD pricing via RPC and CoinGecko.

Community
Advanced
collat-labscollat-labs
1

frontend-ux

Enforces UX rules for React/TypeScript Ethereum dApps with onchain interactions.

Official
Intermediate
IziedkingIziedking
4

viem-integration

Integrate EVM blockchain functionality into TypeScript and JavaScript applications.

Community
Intermediate
multiversxmultiversx
12

multiversx-dapp-frontend

Integrate React frontends with MultiversX blockchain for wallet and transaction handling.

Official
Intermediate