skills.rest
austintgriffith
austintgriffithCOMMUNITY
Explore all skills by this author →
Website𝕏@austingriffithGitHub

frontend-ux

Implement frontend UX rules for Ethereum dApps in Scaffold-ETH 2.

246|51|Updated Feb 13, 2026
Search Tags:#ui#best practices#frontend#ux#ethereum#dapp#scaffold-eth
One-click install
npx skills add https://github.com/austintgriffith/ethskills --skill frontend-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux
Source: https://github.com/austintgriffith/ethskills/tree/main/frontend-ux
Command: npx skills add https://github.com/austintgriffith/ethskills --skill frontend-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common user interface bugs and anti-patterns that AI agents frequently introduce when building Ethereum dApps, ensuring a professional and user-friendly experience.

Core Features & Use Cases

  • Onchain Button States: Implements robust loading and disabled states for all blockchain transaction buttons.
  • Four-State User Flow: Guides users through Connect → Network → Approve → Action seamlessly.
  • Address Handling: Ensures correct display and input of Ethereum addresses using ENS resolution and copy-to-clipboard.
  • USD Value Display: Integrates real-time USD equivalents for all token and ETH amounts.
  • Pre-Publish Checklist: Provides a comprehensive guide for ensuring production-readiness, including Open Graph tags and branding removal.
  • Use Case: Prevent users from accidentally submitting duplicate transactions by ensuring buttons disable and show loading states until onchain confirmation.

Quick Start

Apply the frontend-ux skill to ensure all onchain buttons have proper loading and disabled states.

Frequently Asked Questions about frontend-ux

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

FAQPage Schema
How do I prevent duplicate transactions in Ethereum dApp frontend buttons?▼

Prevent duplicate Ethereum dApp transactions by implementing mandatory loading and disabled states for onchain buttons until blockchain confirmation is received. This ensures robust user interaction by preventing users from clicking transaction buttons multiple times while waiting for network confirmations.

What is the correct user flow for Ethereum token approval and onchain actions?▼

The correct Ethereum token approval flow is a four-state process guiding users through Connect, Network, Approve, and Action sequentially. This pattern ensures users properly connect wallets, switch to the correct network, approve token spending, and execute the final onchain transaction without errors.

How should I handle Ethereum address display and input in a dApp UI?▼

Handle Ethereum address display by integrating ENS resolution to show human-readable names and providing copy-to-clipboard functionality for raw addresses. This ensures correct address input and prevents users from manually copying lengthy hexadecimal strings incorrectly.

Does Scaffold-ETH 2 require specific UI patterns for displaying token USD values?▼

Scaffold-ETH 2 requires integrating real-time USD equivalents for all token and ETH amounts displayed in the UI. This pattern provides users with clear fiat value context for their transactions, ensuring a professional and user-friendly decentralized application experience.

What should a pre-publish frontend checklist include for Ethereum dApps?▼

A pre-publish frontend checklist for Ethereum dApps should include verifying Open Graph tags, removing default branding, and checking RPC configuration. Ensuring production-readiness prevents common UI bugs and guarantees the application meets professional deployment standards.

Related Skills

Explore More Software Engineering Skills→
involvexinvolvex

siwe

Implement SIWE authentication with nonce generation, message verification, and encrypted cookie sessions.

Community
Advanced
gounthargounthar

aptos-dapp-integration

Integrate Aptos wallets and transactions into frontend dApps.

Community
Intermediate
VaitaRVaitaR
1

aiochainscan

Access blockchain data from multiple scanners via a unified Python client.

Community
Advanced
involvexinvolvex

erc-20

Add an ERC-20 token contract with deployment scripts and a frontend UI to Scaffold-ETH 2 projects.

Community
Intermediate