frontend-ux

Enforce Ethereum dApp frontend UX patterns for transaction flows and error handling.

1|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/tawf-labs/zkt-hackathon --skill frontend-ux-tawf-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux
Source: https://github.com/tawf-labs/zkt-hackathon/tree/main/.agents/skills/ethskills/frontend-ux
Command: npx skills add https://github.com/tawf-labs/zkt-hackathon --skill frontend-ux-tawf-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents common frontend UX failures in Ethereum dApps that cause users to double-submit transactions, misread addresses and amounts, get confused by pending/approval states, and encounter opaque errors or unreliable RPC behavior.

Core Features & Use Cases

  • Onchain button lifecycle: Forces a deterministic per-button pending state with immediate disable, clear action labels, and guaranteed unlock via finally blocks.
  • Approval-to-action correctness: Implements a four-state flow (connect, switch network, approve, execute) using fresh onchain reads to avoid stale allowance and mid-flight re-enablement.
  • Address and amount usability: Requires explorer linking, copy support, and validation/normalization, plus USD context and human-readable decimal conversions for token/ETH values.
  • Operational robustness: Sets guidance for RPC reliability/polling hygiene, contract error translation to human-readable messages, and theme semantics that preserve light/dark coherence.
  • Release readiness: Mandates pre-publish metadata checks so social previews and branding are accurate before production.

Quick Start

Use the frontend-ux skill to audit or implement your Ethereum dApp UI so every onchain button, approval flow, address display/input, token value display, RPC polling, error handling, theming, and production metadata follow the required UX rules.

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-submission on Ethereum dApp transaction buttons?▼

To prevent double-submission on dApp transaction buttons, implement a deterministic per-button pending state that immediately disables the button and guarantees an unlock via finally blocks.

What is the correct ERC-20 approval flow for dApp UX?▼

The correct ERC-20 approval flow is a four-state process: connect wallet, switch network, approve, and execute, using fresh onchain reads to avoid stale allowances and mid-flight re-enablement.

How should I display Ethereum addresses and token amounts in my dApp UI?▼

To display Ethereum addresses and token amounts safely, include explorer linking, copy support, address validation, and human-readable decimal conversions with USD context for token and ETH values.

How do I handle wrong-network errors and contract execution failures in EVM web apps?▼

Handle wrong-network errors and contract execution failures by mapping contract errors to human-readable messages and applying network-switching steps within the four-state action flow.

What are the best practices for RPC polling reliability in dApps?▼

Best practices for RPC polling reliability involve setting guardrails for RPC connections, ensuring stable polling hygiene, and translating operational errors into readable user feedback.

Does frontend-ux check pre-publish metadata and theming for EVM dApps?▼

Yes, frontend-ux checks pre-publish metadata so social previews and branding are accurate, and enforces theme semantics that preserve light and dark mode coherence in EVM dApps.