What problem does it solve?
This Skill prevents common Ethereum dApp frontend failures by enforcing interaction-safe UI patterns for onchain transactions, approvals, addresses, token amounts, RPC reliability, theming, and pre-publish metadata.
Core Features & Use Cases
- Onchain button pending-state correctness: ensures buttons disable immediately, reflect the right pending label, and remain locked through wallet-to-confirmation and confirmation-to-cache gaps.
- Four-state action flow: guides UIs to present the correct primary action for not-connected, wrong-network, needs-approval, and ready-to-execute states without mixing Approve and Execute.
- Address UX standards: requires validation, safe display/truncation, copy support, and explorer linking, including ENS/name handling when applicable.
- USD context for token values: mandates showing dollar equivalents for balances, inputs, confirmations, and portfolio summaries.
- RPC reliability & polling discipline: recommends intentional providers and stable polling to avoid runaway request patterns.
- Theme semantics and error translation: avoids hardcoded dark wrappers and converts contract errors into human-readable messages near the triggering action.
- Pre-publish product identity checks: verifies absolute, reachable OG/Twitter images and ensures branding, favicon, and tab titles are production-ready.
Quick Start
Apply these rules while building your Ethereum dApp so every onchain action has a correct, user-safe loading/disabled flow and displays addresses and token amounts with proper context.
