skills.rest
freeslugs
freeslugsCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ux

Enforce frontend UX best practices for Ethereum dApps with transaction handling and component standards.

Updated Feb 28, 2026
Search Tags:#ui#best practices#frontend#ux#ethereum#dapp
One-click install
npx skills add https://github.com/freeslugs/unlink-hackathon --skill frontend-ux-freeslugs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux
Source: https://github.com/freeslugs/unlink-hackathon/tree/main/_skills/eth-skills/frontend-ux
Command: npx skills add https://github.com/freeslugs/unlink-hackathon --skill frontend-ux-freeslugs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides essential frontend user experience rules and patterns for Ethereum dApps, preventing common AI agent-introduced UI bugs and ensuring a professional, user-friendly interface.

Core Features & Use Cases

  • Onchain Button States: Ensures buttons disable and show loaders during transactions until confirmation.
  • Flow Management: Guides users through connect, network switch, approval, and action states with clear, single calls to action.
  • Component Standards: Mandates the use of <Address/> for display and <AddressInput/> for input, along with USD value display for all amounts.
  • Production Readiness: Includes a pre-publish checklist covering metadata, branding, RPC configuration, and theme consistency.
  • Use Case: When building any new dApp frontend, apply these rules to guarantee a robust and intuitive user experience, avoiding common pitfalls like duplicate transaction submissions or confusing UI states.

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 handle Ethereum dApp transaction button states to prevent duplicate submissions?▼

Ethereum dApp transaction button states should disable and show loaders during transactions until confirmation to prevent duplicate submissions. Enforcing single calls to action during flow management ensures robust transaction handling and avoids common UI bugs.

What are the best practices for managing user flows in Ethereum dApps?▼

Best practices for Ethereum dApp user flows involve guiding users sequentially through connect, network switch, approval, and action states. Maintaining clear, single calls to action at each stage prevents user confusion and ensures robust transaction handling.

How should I display Ethereum addresses and token values in my dApp frontend?▼

Display Ethereum addresses and token values in your dApp frontend using standardized components like <Address/> for display and <AddressInput/> for input. You should also show the USD value alongside all onchain amounts for clear value representation.

What should a pre-publish checklist include for Ethereum dApp production readiness?▼

A pre-publish checklist for Ethereum dApp production readiness should cover metadata, branding, RPC configuration, and theme consistency. Verifying these elements ensures the frontend is fully prepared for a professional launch without common configuration errors.

Why do my AI-generated dApp UI components have confusing address displays and value representations?▼

AI-generated dApp UI components often have confusing address displays and value representations because they lack standardized component usage. Mandating specific patterns like <Address/> components and USD value displays corrects these common AI agent-introduced UI bugs.

Related Skills

Explore More Software Engineering Skills→
briannadoubtbriannadoubt

getting-started

Guide developers through installing, configuring, and starting a Trebuchet project.

Community
Basic
freeslugsfreeslugs

ship

Guide AI agents through developing and deploying decentralized applications.

Community
Advanced
LuisSambranoLuisSambrano
7

wagmi

Integrate Celo blockchain wallet connections and contract interactions in React apps.

Community
Intermediate
ObolNetworkObolNetwork
10

frontend-ux

Enforce Ethereum dApp frontend best practices for transaction states and displays.

Official
Intermediate