What problem does it solve?
This Skill codifies frontend UX rules that eliminate common Ethereum dApp failures such as duplicate submissions, stale approval state, unclear address handling, missing USD context, unreliable RPC polling, and poor pre-publish metadata.
Core Features & Use Cases
- Per-action pending states: Buttons disable immediately, show a clear pending label and spinner, and remain locked until onchain confirmation to prevent duplicate or conflicting transactions.
- Four-state action flow: Enforce a single visible action through Connect Wallet, Switch Network, Approve, then Execute to reduce user confusion and invalid flows.
- Address and token UX: ENS/name resolution, validation, paste normalization, copy-to-clipboard, explorer links, safe truncation, and human-readable token units with USD context for balances and confirmations.
- RPC reliability and polling: Use dedicated providers, reasonable polling intervals, intentional fallbacks, and rate-limit awareness to avoid runaway requests and stale state.
- Theming and pre-publish checks: Semantic theme tokens, accessible defaults, and production-ready Open Graph/Twitter metadata and favicon requirements.
- Contract error translation: Extract ABI/custom errors and present human-readable messages with inline persistent error UI near the triggering action.
Quick Start
Apply the frontend-ux rules to your dApp: ensure every onchain button disables on click, shows a pending state, verifies approval from onchain state, and displays USD context for token amounts.
